Pyecharts 输出到 html 白屏？终极解决方案来了。

news2025/1/16 1:34:26

问题起因

公司内部网络，想要做个饼图输出到 html 。

找了教程：https://pyecharts.org/#/zh-cn/quickstart
我看教程写得这么规范，直接 Ctrl+C，Ctrl+V，百度来的代码怎么可能会有问题嘛！
人生处处有惊喜。
样例运行不出图，打开 html 就是雪白一片，我的心啊，哇凉哇凉滴。

原因

在网页上，F12 按键可以看到前端代码中有一行：

src="https://assets.pyecharts.org/assets/v5/echarts.min.js"

在这里插入图片描述
也就是说网页运行起来的时候，是需要先拿到这个联网才能拿到的 echarts.min.js 才行。怎么在断网情况下不白屏呢？

解决过程（可不看）

好嘛，简单，直接在网址栏输入：https://assets.pyecharts.org/assets/v5/echarts.min.js
把内容拿下来，放在本地，然后改一下路径不就行了嘛。

echarts.min.js 内容：在这里插入图片描述
CV工程师又来了，以 UTF-8 保存，放在 .py 文件的同级目录，像这样：

好了，再次运行，还是一片空白。我秃了。过于玄学烧脑，我从事后端开发8年，拥有15年的开发经验都不够用了。

所以，一条拥有15年开发经验的建议：不要做 CV 工程师！

echarts.min.js 要用鼠标右键，另存为。。。不要用CV！

另存为

最终解决方案：

1.正确下载 echatrs.min.js
2.在代码前添加一行 CurrentConfig.ONLINE_HOST = ‘’ 来修改 echarts.min.js 所在路径为当前目录。
3.再次运行代码，刷新网页。

echarts.min.js

我知道你们肯定想做伸手党，所以给你们准备好了，直接从我这儿下载也行（懒人专用下载链接）：
https://download.csdn.net/download/JiuShu110/87754202
当然，最好还是按照它给的链接去下载，我相信你们：https://assets.pyecharts.org/assets/v5/echarts.min.js

我运行的代码+配套的echarts.min.js 就都在这里啦，要是再白屏，算我输！

运行的代码：

from pyecharts.charts import Bar, Pie, Page
from pyecharts import options as opts

CurrentConfig.ONLINE_HOST = ''
# 数据
categories = ["苹果", "香蕉", "橙子", "梨子", "柚子"]
sales = [100, 200, 150, 250, 175]

# 创建柱状图对象
bar = (
    Bar()
    .add_xaxis(categories)
    .add_yaxis("水果销售", sales)
    .set_global_opts(
        title_opts=opts.TitleOpts(title="水果销售情况"),
        toolbox_opts=opts.ToolboxOpts(),
        legend_opts=opts.LegendOpts(is_show=True),
    )
    .set_series_opts(label_opts=opts.LabelOpts(is_show=True))
)

# 创建饼状图对象
pie = (
    Pie()
    .add(
        "",
        [list(z) for z in zip(categories, sales)],
        selected_mode='single',  # 启用单选模式
    )
    .set_global_opts(title_opts=opts.TitleOpts(title="水果销售占比"))
    .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c} ({d}%)"))
)

# 设置第一个数据为选中状态
pie.options["series"][0].update(data=[{"name": "苹果", "value": 100, "selected": True}, {"name": "香蕉", "value": 200}, {"name": "橙子", "value": 150}, {"name": "梨子", "value": 250}, {"name": "柚子", "value": 175}])

# 使用 Page 组件布局图表
page = Page(layout=Page.SimplePageLayout)
page.add(pie, bar)

# 渲染图表
page.render("bar_pie_example.html")