pyecharts源码解读（17）HTML组件包components之表格组件Table

本文介绍了Pyecharts 1.9.0版本中的Table组件，详细讲解了其结构、功能、使用方法以及如何配合prettytable库创建表格。通过实例演示了如何添加数据、设置样式和配置标题。

当前pyecharts的版本为1.9.0。

`components`包概述

components包位于pyecharts包顶级目录中，用于定义pyecharts的HTML组件。包结构如下：

├─components # HTML组件包
│  │  image.py # 定义图像组件类Image
│  │  table.py # 定义表格组件类Table
│  │  __init__.py # 重构命名空间，将组件类命名空间提升至components包命名空间

目前HTML组件类Table 和Image 与复合图表类Page不兼容。

`Table`类

pyecharts/components/table.py模块只定义了表格组件类Table。

Table类继承自基类ChartMixin，作用为绘制表格。功能依赖第三方库prettytable（pyecharts依赖库）。

Table类的签名为class Table(page_title: str = CurrentConfig.PAGE_TITLE, js_host: str = "")。

Table类的构造方法参数如下：

js_host：JavaScript库的URL。字符串，默认值为""。
page_title：HTML页面标题。字符串，默认值为全局变量CurrentConfig.PAGE_TITLE。

Table类的属性如下：

js_host：JavaScript库的URL。字符串，默认值为全局变量CurrentConfig.ONLINE_HOST。属性值为构造方法参数js_host与全局变量CurrentConfig.ONLINE_HOST进行或操作的结果。
page_title：HTML页面标题。字符串。值为构造方法参数page_title值。
js_functions：自定义JavaScript语句。类型为OrderedSet对象。默认值为OrderedSet()。
js_dependencies：定义JavaScript依赖库。类型为OrderedSet对象。默认值为OrderedSet("echarts")。
title_opts：表格标题配置。类型为ComponentTitleOpts对象，默认值为ComponentTitleOpts()。标题配置包括title、subtitle、title_style、subtitle_style等4个配置项。
html_content：表格的HTML。字符串，默认值为""。
_component_type：组件类型。字符串，默认值为"table"。
chart_id：组件id。字符串，默认值为uuid.uuid4().hex。

Table类的方法如下：

add(self, headers: Sequence, rows: Sequence, attributes: Optional[dict] = None)：添加图表数据。
- headers：图表标题行。类型为序列。
- rows：图表行数据。类型为序列。
- attributes：图表样式属性。类型为字典。默认值为None or {"class": "fl-table"}
def set_global_opts(title_opts: Union[ComponentTitleOpts, dict, None] = None)：将表格对象的title_opts属性值设置为title_opts参数值。
render：调用render包engine模块中的render函数渲染HTML文档。默认渲染模板为components.html。
render_embed：调用render包engine模块中的render_embed函数输出HTML字符串。默认渲染模板为components.html。
render_notebook：调用render包engine模块中的render_notebook函数将输出嵌入到notebook中。默认渲染模板为 nb_components.html。

表格模板

macro部分源码：

{
   
   %- macro gen_components_content(chart) %}
    {
   
   % if chart._component_type == "table" %}
        <style>
            .fl-table {
   
   
                margin: 20px;
                border-radius: 5px;
                font-size: 12px;
                border: none;
                border-collapse: collapse;
                max-width: 100%;
                white-space: nowrap;
                word-break: keep-all;
            }

            .fl-table th {
   
   
                text-align: left;
                font-size: 20px;
            }

            .fl-table tr {
   
   
                display: