Echart
https://echarts.baidu.com/
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
丰富的可视化类型
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
PyEchart
Echarts 是一个由百度开源的数据可视化，凭借着良好的交互性，精巧的图表设计，得到了众多开发者的认可。而 Python 是一门富有表达力的语言，很适合用于数据处理。当数据分析遇上数据可视化时，pyecharts 诞生了。
✨ 特性
- 简洁的 API 设计，使用如丝滑般流畅，支持链式调用
- 囊括了 30+ 种常见图表，应有尽有
- 支持主流 Notebook 环境，Jupyter Notebook 和 JupyterLab
- 可轻松集成至 Flask，Sanic，Django 等主流 Web 框架
- 高度灵活的配置项，可轻松搭配出精美的图表
- 详细的文档和示例，帮助开发者更快的上手项目
- 多达 400+ 地图文件，并且支持原生百度地图，为地理数据可视化提供强有力的支持
Why not matplotlib？
说道echart比它的优点：
（1） 类型多，依托echart库。
（2）可交互， 依托echart库。
（3）容易嵌入web页面。支持前后端分离模式 和 不分离模式。
共同点： 都是为数据分析人员使用。
实例
https://pyecharts.org/#/zh-cn/web_flask
全部使用 python实现
示例代码
from flask import Flask from jinja2 import Markup, Environment, FileSystemLoader from pyecharts.globals import CurrentConfig # 关于 CurrentConfig，可参考 [基本使用-全局变量] CurrentConfig.GLOBAL_ENV = Environment(loader=FileSystemLoader("./templates")) from pyecharts import options as opts from pyecharts.charts import Bar app = Flask(__name__, static_folder="templates") def bar_base() -> Bar: c = ( Bar() .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]) .add_yaxis("商家A", [5, 20, 36, 10, 75, 90]) .add_yaxis("商家B", [15, 25, 16, 55, 48, 8]) .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题")) ) return c @app.route("/") def index(): c = bar_base() return Markup(c.render_embed()) if __name__ == "__main__": app.run()
前后端分离模式
Step 3: 新建一个 HTML 文件
新建 HTML 文件保存位于项目根目录的 templates 文件夹，这里以如下 index.html 为例. 主要用到了
jquery和pyecharts管理的echarts.min.js依赖index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Awesome-pyecharts</title> <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script> </head> <body> <div id="bar" style="width:1000px; height:600px;"></div> <script> $( function () { var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'}); $.ajax({ type: "GET", url: "http://127.0.0.1:5000/barChart", dataType: 'json', success: function (result) { chart.setOption(result); } }); } ) </script> </body> </html>Step 4: 编写 flask 和 pyecharts 代码渲染图表
请将下面的代码保存为 app.py 文件并移至项目的根目录下。
目录结构如下
sunhailindeMacBook-Pro:pyecharts_flask sunhailin$ tree -L 1 . ├── app.py └── templates注: 目前由于 json 数据类型的问题，无法将 pyecharts 中的 JSCode 类型的数据转换成 json 数据格式返回到前端页面中使用。因此在使用前后端分离的情况下尽量避免使用 JSCode 进行画图。
app.py
from random import randrange from flask import Flask, render_template from pyecharts import options as opts from pyecharts.charts import Bar app = Flask(__name__, static_folder="templates") def bar_base() -> Bar: c = ( Bar() .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]) .add_yaxis("商家A", [randrange(0, 100) for _ in range(6)]) .add_yaxis("商家B", [randrange(0, 100) for _ in range(6)]) .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题")) ) return c @app.route("/") def index(): return render_template("index.html") @app.route("/barChart") def get_bar_chart(): c = bar_base() return c.dump_options() if __name__ == "__main__": app.run()