利用Flask与pyecharts搭建Dashboard

概述

当处理一些较为灵活的数据时,团队内不同角色的同事会有自己对数据的关注点,所以,这就要求数据分析师不能只出一个“死”报告了事儿,而需要的是一个可以让同事们去探索,去解决自己关注问题的”活“报告——Dashboard)。本文就一起来探讨下,利用FlaskPyecharts搭建局域网内Dashboard的方法,其中Flask用来提供Web应用框架,Pyecharts用来解决交互式可视化的需求。

功能需求

  • 可视化图像可交互
  • 可以根据用户需求,从数据库中筛选不同的数据进行可视化

Dashboard框架

mE1fkd.png

如上图所示,我们依据数据的流向确定了Dashboard的框架,并列出了在不同过程中的所需知识:

  • 依据Dashboard中用户的需求(可选),从数据库中提取数据,并对数据进行预处理,以方便后续进行可视化;
  • 利用Pyecharts对提取的数据进行可视化;
  • 利用Flask将Pyecharts生成的可视化图像嵌入到HTML模板中,并利用Javascript丰富前端的动作、处理事件,利用Ajax实现前后端交互等。

两个关键点

  • 在Flask框架中使用Pyecharts

这在Pyecharts的官方文档中写的非常详细,可以戳Flask 模板渲染查看示例。

  • 如何处理Jinja2 和 JavaScript 语法的冲突

为了快速搭建Dashboard,免去一些前端配色、布局等烦恼,我们一般会挑选一个HTML模板,而Jinja2就是一个模板渲染引擎,它的语法中,使用一对双大括号标记变量,这与JavaScript的语法标记会有冲突,所以,如果你使用Jinja2进行模板渲染的同时使用了JavaScript,就要进行语法冲突处理

最终效果

mEB0bR.gif

mEBg2D.gif

致谢&参考

源码

Github链接:Flask+Pyecharts定制Dashboard

除以上两点之外,在源码中,还实现了以下功能:

  • 多个可视化图像的联动
  • 多级菜单联动选择
  • 前后端交互
  • 表格数据排序与搜索

希望能对有相同需求的你有所帮助,欢迎留言,一起讨论!

知识共享许可协议

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。

Allen Jia wechat
扫一扫订阅我的公众号
听说你要请我喝杯咖啡?