去年整理了个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 = strSrc
bOK = False
while 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 = True
return 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.自学前端或找个前端。
相关文章
您阅读本篇文章共花了：
发表评论