
4.3 PyEcharts交互图
前面两节介绍了Python绘制静态图表的方法,但由于静态图可展示的信息有限,有时用户需要交互地获取更多信息,而开发动态交互程序的工作量大且需要考虑用户操作系统及程序运行平台,因此网页交互就成为主流的交互方式。Python也有一些第三方库支持该功能,如Dash,PyEcharts等。
4.3.1 ECharts
ECharts是Enterprise Charts的缩写,是一个提供用户交互式操作的图表绘制工具库,由JavaScript开发,图表通过浏览器显示,兼容IE,Chrome,Firefox,Safari等主流浏览器,能在各种操作系统的PC和移动设备上流畅地运行。
PyECharts是Python版本的Echarts,由于其用法类似于Matplotlib,因此不需要重新学习API和Callback逻辑,这节约了很大的学习成本。其在风格与配色上也很丰富和考究,在与JavaScript编写的EChart程序结合时,可保持风格一致。而且PyEchars可以在Jupyter Notebook中调试,其显示效果与浏览器显示效果一致。另外,它还支持显示地图以及雷达图等特殊图表。
4.3.2 准备工作
1.安装软件
执行以下命令,安装PyEcharts软件包:

2.包含头文件
使用PyEcharts需要包含头文件,本例中使用了简单的数据v1和v2作图,在4.3节中所有示例都需要包含以下头文件,在此统一说明,后续例程中省略。

4.3.3 绘制交互图
1.柱图
无论使用哪种绘图工具,柱图、饼图、散点图都是最重要的图表。交互图与静态图的区别在于,当用户把鼠标移至图形上时,能即时地展示出其对应的详细信息,以本例中的柱图为例,当鼠标落在第一根柱上时,即可显示出类型v1在Jan一月的具体值为2。

程序运行结果如图4.36所示。

图4.36 交互柱图
可以看到,在不指定任何附加参数的情况下,图表中就自动标出了均值、最大值、最小值以及两个柱图的对比,本例中使用render函数将图表渲染并保存为当前目录下的test.html文件。
2.特效散点图
特效散点图是效果比较特殊的图表,图中的小图像是动态扩散的,看起来效果比较炫,而且配色不夸张,使用效果很好。

程序运行结果如图4.37所示。

图4.37 特效散点图
3.其他图表
由于在Matplotlib中已经介绍了直方图、条状图等基本图表,这里不再重复,只列出常用图表及对应的函数。
线图,如代码所示:

饼图,如代码所示:

箱线图,如代码所示:

4.多种类型图叠加
与Matplotlib不同,如果要在一张PyEcharts图中显示两种不同类型的图表,则需要使用overlap方法将两种或两种以上图表对象叠加在一起。

程序运行结果如图4.38所示。

图4.38 交互叠加图
4.3.4 在网页中显示图
本例中将PyEcharts与flask框架结合起来实现图在网页中的显示,PyEcharts将图存成网页,再用flask建立http服务支持显示该网页。注意,运行前需要先建立templates目录,flask默认从该目录中读取网页。如果在运行以下程序成功后,在浏览器中打开http://localhost:9993即可看到PyEchart生成的网页。

程序运行结果如图4.39所示:

图4.39 浏览器显示的交互图