去年整理了个pyecharts+flask制作数据大屏的基础版，事情比较多，一直没时间进一步完善。这篇进阶版是基于上篇的基础上，说明如何实现一个功能完整的数据大屏。

注：本人对CSS和JS并不熟悉，只能说会点皮毛，能看懂，而大屏要漂亮还是要个前端来调样式的，这块内容就不阐述了，本文的核心内容是解决完善数据大屏的过程中遇到的问题。

一、前提准备

查看这篇文章的前提是已经基于pyecharts + flask 搭建了一个能够动态刷新数据的基础大屏。具体可以参考：上一篇文章。

本文整个说明也是基于上篇文章Demo中的代码进行优化，主要就：app.py和main.html两个文件。

二、会遇到的问题

2.1JsCode在前后端分离情况下不生效的问题

formatter=JsCode("function(data){return data.name +':'+ data.value[2];}"),

pyecharts的官方Demo里面，会有一些需要动态加载一些JS代码的例子，这种功能在做数据大屏还是很有用的，比如需要根据查询结构的优良中差，动态调整柱状图的颜色(Demo:Bar_custom_bar_color)。但是按照Demo去实际，会发现JsCode里面的JS代码被当做字符串了（本地生成的html可以）。

问题原因：

通过ajax获取后台图表option数据的时候，这段JS代码是作为字符串传到前端的，有“”双引号。

解决方案：

我用的是死办法，或返回option数据的时候，把双引号去掉，代码如下（代码没怎么优化）

def myUpdateJsCode(strSrc):strOut = strSrcbOK = Falsewhile bOK == False:re_ser = re.search("\"\s*function", strOut)if re_ser:index = re_ser.span()[0]strOut = strOut[:index] + strOut[index + 1:]iend = strOut.index("\"", index)  # 遍历下一个",function不能再有双引号strOut = strOut[:iend] + strOut[iend + 1:]else:bOK = Truereturn strOut

前端html，发送ajax请求的地方也需要做修改：

function fetchData1() {$.ajax({type: "GET",url: "http://127.0.0.1:5000/mapChart",//dataType: 'json',success: function (result) {var re_obj = (new Function("return " + result))();map.setOption(re_obj);}});}

2.2图表布局的问题

有时候柱状图的列名特别长，就是加倾斜后，显示效果并不是太好，可以在图表上面套一层Grid,来调整div内的显示布局

c = (Grid().add(bar, grid_opts=opts.GridOpts(pos_left="20%",pos_bottom="10%",pos_top="15%")))

通过pos 上下左右的调整能得到一个比较好的显示，return的是这个grid（return c）

2.3图表点击事件

这个记得是从echars的官方文档看来的，代码如下：

//点击事件mychart.on('click', function (params) {alert("单击了"+params.name+"_____"+params.value); //这里根据实际的需要编写其他内容，如跳转到详情页面});

mychart 是对应图表的对象。

2.4表格的绘制

数据大屏除了图就是表格了。表格的绘制跟pyecharts就没什么关系了，ajax + html去实现的了。这个在上一篇文章源码里面有，就不再描述了。实现方案就是动态填充表格的html代码。

2.5跨域问题

前端页面在请求后台数据的时候，是通过ajax请求访问的，页面里面会写一个请求地址。有时候我们发布到不同环境时，突然会发现页面上大数据展示不出来了。是因为ajax请求里面配置的地址不是当前系统的访问地址。

目前我的解决方案就是换一个部署环境需要同时修改ajax的请求地址（有时候也会忘）。

2.6其他

其他的基本就基于pyecharts的官方文档调图表的具体展示细节了。目前做的这个大屏就遇到这些问题，若后面还有再补充。

三、总结

1.pyecharts实现前后端分离的基础过程：html页面里面提供基础的布局，然后通过ajax请求从后台获取该图表的Option数据，然后就setOption生成图片。实际遇到一些问题可以和本地生成的图表html进行比较，看Option数据差在哪，进而再解决相应问题。

2.pyecharts是基于echarts的，有些pyecharts官方文档不涉及的内容，可以直接查看echarts的文档说明去解决，所以这两个文档都比较重要，比较好的是都是中文文档，读起来比较轻松。

另外下面两个配置项对于调整图表的美观很重要！多用用就熟悉了，看官方文档就行。

set_global_opts  #设置全局配置
set_series_opts  #设置系列配置

3.自学前端或找个前端。

pyecharts+flask制作数据大屏-进阶相关推荐

3000 字推荐一个可视化神器，50 行 Python 代码制作数据大屏
作者 | 俊欣来源 | 关于数据分析与可视化今天小编给大家分享一个制作数据大屏的工具,非常的好用,100行左右的Python代码就可以制作出来一个完整的数据大屏,并且代码的逻辑非常容易理解. Py ...
用 Python 制作数据大屏，超简单
作者 | 俊欣来源 | 关于数据分析与可视化今天我们用Streamlit模块来制作一个数据面板,将数据更加直观地呈现给别人观看,整个页面大致如下图所示: 制作工具栏在页面的左侧是一个工具栏,工具 ...
如何从0-1制作数据大屏，我用大白话给你解释清楚了
好莱坞大片<摩天营救>中有这么一个场景: 你可以看见反派大boss在屏幕上随便点点,就能看到每个角落的具体情况,不禁让人惊呼:满满的高科技! 其实这背后就是咱们今天要讲的数据可视化:把相对 ...
50 行 Python 代码制作一个数据大屏
今天给大家分享一个制作数据大屏的工具,非常的好用,100行左右的Python代码就可以制作出来一个完整的数据大屏,并且代码的逻辑非常容易理解. PywebIO介绍 Python当中的PywebIO模块 ...
PywebIO 轻松制作一个数据大屏，代码只需100行
今天我给大家分享一个制作数据大屏的工具,非常的好用,100行的Python代码就可以制作出来一个完整的数据大屏,并且代码的逻辑非常容易理解. PywebIO介绍 Python当中的PywebIO模块可 ...
Python制作可视化大屏（东京奥运会）
目录文章目录前言一.数据爬取二.数据预处理三.Pyecharts可视化 3.1 2020东京奥运会各国金牌分布图 3.2 2020东京奥运会奖牌榜详情 3.3 2020东京奥运会中国各项目获 ...
15分钟构建超低成本数据大屏：DataV + DLA
为什么80%的码农都做不了架构师?>>> 第一步:准备低成本存储的业务数据和DLA表 OSS(https://www.aliyun.com/product/oss)是云上低成本 ...
GoView 开源，一个好用的 Vue3 低代码开发数据大屏系统
介绍 GoView 是一个高效的拖拽式低代码数据可视化开发平台,将图表或页面元素封装为基础组件,无需编写代码即可制作数据大屏,减少心智负担.当然低代码也不是 "银弹",希望所有技术 ...
【Python】全文3000字，Pyecharts制作可视化大屏全流程! (附代码分享)
就在上一篇的文章当中干货分享 | 用Pyecharts绘制20钟不同风格的炫酷交互式图表,建议收藏有粉丝提到说是不是可以写一篇用Pyecharts模块做可视化大屏的相关教程,小编立马就答应了他的请 ...

pyecharts+flask制作数据大屏-进阶