如何使用pyecharts在HTML的Tab组件中添加表格内容

AI 小北

2026-8-31

pyecharts Tab同时嵌入图表与表格实现方法

Tab.add() 方法对所有pyecharts原生组件的适配逻辑一致，表格属于pyecharts内置的组件类，不需要额外做HTML拼接，直接按添加图表的相同逻辑接入即可。

操作步骤

补充导入依赖：表格组件不在pyecharts.charts路径下，需要单独从pyecharts.components导入Table类
构造表格实例：将需要展示的DataFrame拆分为表头列表、行数据二维列表，传入Table实例，可按需配置标题、样式
调用tab.add()传入表格实例和对应标签页名称，和添加图表的写法完全一致，最后统一渲染即可

修改后的完整代码

import pandas
from pathlib import Path
from pyecharts import options as opts
from pyecharts.charts import Bar, Calendar, Tab, Pie
# 补充导入表格组件
from pyecharts.components import Table

df = pandas.read_excel("Team_details.xlsx")
data = df.head()

grouped_by_names = df.groupby(by=['Name'], as_index=False).sum()[["Test Planned","Test Completed", 'Name']]

bar_chart_by_name = (
    Bar()
    .add_xaxis(grouped_by_names['Name'].tolist())
    .add_yaxis("Completed", grouped_by_names["Test Completed"].round(0).tolist())
    .add_yaxis("Planned", grouped_by_names["Test Planned"].round(0).tolist())
    .set_global_opts(
        title_opts=opts.TitleOpts(title= "Test planned vs Test Completed", subtitle= "In days")
    )
)

# 构造表格实例
# 表头直接取DataFrame列名
table_headers = data.columns.tolist()
# 行数据取DataFrame数值转列表
table_rows = data.values.tolist()
data_table = (
    Table()
    .add(headers=table_headers, rows=table_rows)
    .set_global_opts(
        title_opts=opts.ComponentTitleOpts(title="原始数据预览", subtitle="前5条团队明细记录")
    )
)

tab = Tab(page_title= "Team Updates")
tab.add(bar_chart_by_name,'Task Report')
# 将表格添加为独立标签页
tab.add(data_table, '明细数据表')
tab.render(Path.cwd() / "Project.html")