E1数据可视化Python Flask/Echarts折线图line/视觉映射visualMap/标记线markLine的动态模块绩效

思路

企业分析绩效，通常是《按比例》找出《模范标杆》以及《典型后腿》。

具体应用时，通常列出《10%》的《模范标杆》，以及《10%》的《典型后腿》，然后对《典型后腿》针对性优化，这样可以取得较大的工作成绩。

本例中的可视化图表，在line折线图的基础上，增加了视觉映射visualMap实现了重点关注区域的标记，同时使用markLine标线对关键数据点进行标识。

架构

1. 前后端分离：前端 Echarts JavaScript BootStrap; 后端Python Flask；

2. 数据动态更新：服务端触发数据源的变化，前端AJAX自动获取最新数据并渲染到Echarts图表上；

3. 数据格式：JSON；

动态效果

1.《10%》的《模范标杆》，以及《10%》的《典型后腿》分析

 2. 《平均绩效》《最高绩效》《最低绩效》分析

关键代码

1. Echarts 视觉映射visualMap

1.  
   visualMap: {
2.  
   top: "top",
3.  
   left: "right",
4.  
   textStyle: {
5.  
   color: "rgba(255,255,255,.8)",
6.  
   //fontSize: 14,
7.  
   },
8.  
   pieces: [
9.  
   {
10.  
    gt: 0,
11.  
    lte: 100,
12.  
    color: "#FF0000",
13.  
    },
14.  
    {
15.  
    gt: 100,
16.  
    lte: 800,
17.  
    color: "#FFA500",
18.  
    },
19.  
    {
20.  
    gt: 800,
21.  
    lte: 900,
22.  
    color: "#2E8B57",
23.  
    },
24.  
    ],
25.  
    },

 2. Echarts 标线markLine

1.  
   markLine: {
2.  
   // 图形是否不响应和触发鼠标事件
3.  
   silent: true,
4.  
   label: {
5.  
   textStyle: {
6.  
   color: "rgba(255,255,255,.8)",
7.  
   //fontSize: 14,
8.  
   },
9.  
   },
10.  
    data: [
11.  
    {
12.  
    yAxis: 100,
13.  
    lineStyle: {
14.  
    color: "#FF0000",
15.  
    },
16.  
    },
17.  
    {
18.  
    yAxis: 800,
19.  
    lineStyle: {
20.  
    color: "#FFA500",
21.  
    },
22.  
    },
23.  
    {
24.  
    yAxis: 900,
25.  
    lineStyle: {
26.  
    color: "#2E8B57",
27.  
    },
28.  
    },
29.  
    ],
30.  
    },

3. Python Flask web服务器

1.  
    
2.  
   app = Flask(__name__, static_folder="static", template_folder="template")
3.  
    
4.  
    
5.  
   @app.route('/')
6.  
   def hello_world():
7.  
   return 'Hello World!'
8.  
    
9.  
    
10.  
    # 主程序在这里
11.  
    if __name__ == "__main__":
12.  
    # 开启线程，触发动态数据
13.  
    a = threading.Thread(target=asyncJson.loop)
14.  
    a.start()
15.  
     
16.  
    # 开启 flask 服务
17.  
    app.run(host='0.0.0.0', port=88, debug=True)

4. JSON 数据格式

1.  
   [
2.  
   {
3.  
   "name": "北京",
4.  
   "value": 20
5.  
   },
6.  
   {
7.  
   "name": "上海",
8.  
   "value": 90
9.  
   },
10.  
    {
11.  
    "name": "广州",
12.  
    "value": 300
13.  
    },
14.  
    {
15.  
    "name": "深圳",
16.  
    "value": 900
17.  
    },
18.  
    {
19.  
    "name": "西安",
20.  
    "value": 800
21.  
    },
22.  
    {
23.  
    "name": "南京",
24.  
    "value": 350
25.  
    },
26.  
    {
27.  
    "name": "沈阳",
28.  
    "value": 500
29.  
    },
30.  
    {
31.  
    "name": "洛阳",
32.  
    "value": 400
33.  
    }
34.  
    ]

5. AJAX动态刷新数据

1.  
    
2.  
   function async_echart_line_visualMap(container, filename) {
3.  
   $.getJSON(filename).done(function (data) {
4.  
   var myChart = echarts.init(document.getElementById(container));
5.  
   myChart.setOption({
6.  
   xAxis: { data: getKeys(data) },
7.  
   series: [{ data: data }],
8.  
   });
9.  
   }); //end $.getJSON
10.  
    }

源码下载

https://download.csdn.net/download/lildkdkdkjf/85122763

这篇好文章是转载于：学新通技术网