问题起因
公司内网限制,我想要做个饼图输出到 html 。
找了教程:https://pyecharts.org/#/zh-cn/quickstart
我看教程写得很规范,直接 Ctrl+C,Ctrl+V,百度的代码怎么可能有问题嘛?!
人生处处有惊喜。
样例运行不出图,打开 html 就是雪白一片,我的心啊,哇凉哇凉滴。
顺带一提:我用的版本是 pyechatrs 2.0.3
原因
在网页上,F12 按键可以看到前端代码中有一行:
src="https://assets.pyecharts.org/assets/v5/echarts.min.js"
意思是,网页运行起来的时候,html 需要依赖这个 js 文件才能显示的。打个比方,先有地基后有房,js就是地基,html就是房子。
但是你看 echarts.min.js 搁哪儿呢?在网上。怎么在断网情况下也能运行html呢?
解决过程(可不看)
好嘛,简单,把 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 就都在这里啦,要是再白屏,算我输!
评论说还是白屏,估计是文件放错位置了,文件存放目录参考:
> main.py
> echarts.min.js
> bar_pie_example.html
第三个文件是我们生成的html文件,打开它时要确保和 echarts.min.js 在同一级目录,因为我们配的是CurrentConfig.ONLINE_HOST = ''当前目录。如果想将 echarts.min.js 放在其它目录,相应修改 CurrentConfig.ONLINE_HOST = ‘xxx/xxx/’ 。
运行的代码:
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")
运行结果:
如果你遇到问题,可以留言,我一般两天会看一次消息。