时间:2021-05-22
在Flask页面展示echarts,主要有两种方法:
方法1、原生echarts方法
自己在前端引入echarts.js文件、自己创建div、自己初始化echarts对象、自己从官网复制并且配置图表、自己给echarts对象设置配置项实现绘制,这种方法的缺点是配置项都是js的形式比较繁琐,对于后端开发人员来说有点过于参与前端js部分的配置开发;
这种方式参照echarts官网的方式,其实跟flask没有多大关系,php/java不同后端语言都一样,地址
方法2:使用pyecharts
pyecharts主要是做了一件事情,把js的配置option,完全抽离使用Python代码配置,把js的数据结构使用python的代码结构实现,让后端开发只需要配置数据就能搞定图表,真的很像matplotlib,当然echarts的强大使得pyecharts更强大;
但是这里真的要吐槽pyecharts,因为它包含多种输出图表结果的方式,没有一种是能够和flask完美配合的:
最后给出使用chart.dump_options()方法给一个flask网页配置多个图表的方法代码:
Python代码:
@app.route("/show_pyecharts")def show_pyecharts(): bar = ( Bar() .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]) .add_yaxis("商家A", [5, 20, 36, 10, 75, 90]) ) # print(bar.render_embed()) # print(bar.dump_options()) return render_template( "show_pyecharts.html", bar_data=bar.dump_options() )Flask模板代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/echarts.min.js"></script></head><body><h1>柱状图</h1><div> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption({{ bar_data | safe }}); </script> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main2" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom,初始化echarts实例 var myChart2 = echarts.init(document.getElementById('main2')); // 指定图表的配置项和数据 var option2 = {{ bar_data | safe }}; // 使用刚指定的配置项和数据显示图表。 myChart2.setOption(option2); </script></div> </body></html>展示输出:
总结
以上所述是小编给大家介绍的Flask使用Pyecharts在单个页面展示多个图表的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
pyecharts是一个封装百度开源图表库echarts的包,使用pyecharts可以生成独立的网页,也可以在flask、django中集成使用。示例如下:f
在开发过程中我们常常需要,在一个页面中使用相同的图表来展示同级别的多个事物(如:同级别的多个不同id的仓库、同级别的多个不同id的设备等)。上图效果实现代码:/
pyecharts团队将其支持的图表类型归纳为以下几个类型:基本图表、直角坐标系图表、树型图表、地理图表、3D图表、组合图表。对于分析师来讲,我们日常工作中使用
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错:“所有图表类型将在v1.9.0版本开始强制使用ChartItem进行数据项配置”的解
V0.5.X版本的pyecharts使用:frompyechartsimportBarbar=Bar("我的第一个图表","这里是副标题")bar.add("服