pyecharts+flask制作数据大屏-进阶_pyecharts+flask可视化大屏实现

        去年整理了个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.自学前端或找个前端。