我的知识记录

Python pyecharts生成交互式柱状图:带悬停提示的HTML

用Python pyecharts生成交互式柱状图,鼠标悬停显示数值、可缩放、可导出图片,输出HTML文件直接浏览器打开,代码完整可运行。

场景痛点

matplotlib画的柱状图是静态图片,发给领导,他想多看一眼具体数值还得对照坐标轴猜。做数据分析报告时,交互式图表能让读者自己缩放、悬停看数值、切换系列。pyecharts基于ECharts,几行代码就能生成带交互的HTML文件,浏览器打开就能用,不用装任何插件。

用到的库

pip install pyecharts

完整代码

# 导入 pyecharts 柱状图和配置项
from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCode


def draw_interactive_bar():
# 月度各产品销量数据
months = ["1月", "2月", "3月", "4月", "5月", "6月"]
product_a = [230, 250, 300, 280, 320, 360]
product_b = [180, 210, 260, 240, 290, 310]
product_c = [260, 240, 280, 310, 300, 340]

bar = (
Bar()
.add_xaxis(months)
# 每个产品一条柱子,is_selected 控制默认显示/隐藏
.add_yaxis("产品A", product_a, label_opts=opts.LabelOpts(is_show=False))
.add_yaxis("产品B", product_b, label_opts=opts.LabelOpts(is_show=False))
.add_yaxis("产品C", product_c, label_opts=opts.LabelOpts(is_show=False))
# 翻转XY轴就是横向柱状图,这里保持纵向
.set_global_opts(
title_opts=opts.TitleOpts(title="上半年各产品销量对比", subtitle="数据来源:销售部"),
tooltip_opts=opts.TooltipOpts(trigger="axis", axis_pointer_type="shadow"),
# 图例可点击切换系列显示
legend_opts=opts.LegendOpts(pos_top="5%"),
# 底部缩放滑块
datazoom_opts=[opts.DataZoomOpts()],
yaxis_opts=opts.AxisOpts(name="销量(件)"),
xaxis_opts=opts.AxisOpts(name="月份"),
toolbox_opts=opts.ToolboxOpts(),  # 右上角工具栏,可下载PNG
)
# 柱子上显示数值
.set_series_opts(
label_opts=opts.LabelOpts(position="top", font_size=10)
)
)

# 渲染为HTML文件
bar.render("interactive_bar.html")
print("交互式柱状图已保存为 interactive_bar.html")


if __name__ == "__main__":
draw_interactive_bar()

代码讲解

  • Bar() 创建柱状图实例,add_xaxis() 设X轴分类,add_yaxis() 每个系列调一次,传入系列名和数值列表。
  • TooltipOpts(trigger="axis") 鼠标悬停在某根柱子上时,自动弹出该月所有产品的数值对比。
  • LegendOpts() 生成图例,点击图例上的系列名可以隐藏/显示对应柱子。
  • DataZoomOpts() 在底部加一个缩放滑块,数据点多的时候可以拖动放大某段区间。
  • ToolboxOpts() 右上角自动生成工具栏,包含下载图片、数据视图、还原等按钮。
  • render("xxx.html") 把图表输出成一个独立HTML文件,单文件包含全部JS依赖(pyecharts 2.x),双击就能在浏览器打开。

运行结果

当前目录生成 interactive_bar.html,双击用浏览器打开。鼠标悬停柱子会弹出数值提示,点击图例可以隐藏某条产品线,右上角工具栏可以下载PNG,底部滑块可以缩放查看区间。中文标题和图例正常显示,不需要额外配置字体。

注意事项

  • pyecharts 2.x 和 1.x 的API略有差异,本文用的是2.x写法,from pyecharts.charts import Bar
  • 生成的HTML依赖在线CDN加载ECharts,如果内网打不开外网,需要把ECharts的JS下载到本地,用 JsCode 引入。
  • 柱子上默认显示标签会很挤,数据系列多时把 is_show=False 关掉,靠悬停提示看数值。
  • 发给别人时直接发HTML文件就行,对方只要有浏览器就能打开,不用装Python。

Python pyecharts生成交互式柱状图:带悬停提示的HTML

标签:

更新时间:2026-09-14 20:28:02

上一篇:Python pyecharts生成折线图HTML:可交互的趋势图

下一篇:Python生成月度销售报表图表:自动汇总出图