利用Flask与pyecharts搭建Dashboard

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

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

Dashboard框架

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

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

两个关键点

在Flask框架中使用Pyecharts

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

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

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