使用 Django 进行 Web 开发时,经常有需要展示图表的需求,以此来丰富网页的数据展示文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
常见方案包含:Highcharts、Matplotlib、Echarts、Pyecharts,其中后 2 种方案使用频率更高文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
本篇文章将聊聊 Django 结合 Echarts、Pyecharts 实现图表可视化的具体流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
Echarts
Echarts 是百度开源的一个非常优秀的可视化框架,它可以展示非常复杂的图表类型文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
以展示简单的柱状图为例,讲讲 Django 集成 Echarts 的流程文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
首先,在某个 App 的 views.py 编写视图函数文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
当请求方法为 POST 时,定义柱状图中的数据值,然后使用 JsonResponse 返回数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
在模板文件中,导入 Echarts 的依赖文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
PS:可以使用本地 JS 文件或 CDN 加速服务文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
然后,重写 window.onload 函数,发送一个 Ajax 请求给后端,利用 Echarts 将返回结果展示到图表中去文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
最后,编写路由 URL,运行项目文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
发现,首页展示了一个简单的柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
更多复杂的图表展示可以参考官方文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
https://echarts.apache.org/examples/zh/index.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
Pyecharts
Pyecharts 是一款使用 Python 对 Echarts 进行再次封装后的开源框架文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
相比 Echarts,Django 集成 Pyecharts 更快捷、方便文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
Django 集成 Pyecharts 只需要 4 步文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
3-1 安装依赖文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
3-2 拷贝 pyecharts 的模板文件到项目下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
将虚拟环境中 pyecharts 的模板文件拷贝到项目的模板文件夹下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
比如本机路径如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
/Users/xingag/Envs/xh_log/lib/python3.7/site-packages/pyecharts/render/templates/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
3-3 编写视图函数,渲染图表文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
在视图文件中,使用 pyecharts 库内置的类 Bar 创建一个柱状图文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
3-4 运行项目文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
运行项目,生成的柱状图如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
这只是最简单的使用实例,更多复杂的图表及前后端分离、更新的例子文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
可以参考官网:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
https://pyecharts.org/#/zh-cn/web_django?id=django-%e5%89%8d%e5%90%8e%e7%ab%af%e5%88%86%e7%a6%bb文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html
4. 最后
文中介绍了 Django 快速集成 Echarts 和 Pyecharts 的基本步骤。实际项目中,一些复杂的图表、前后端分离数据更新可以参考官网去拓展。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/bc/28190.html