1200字范文 > E1【数据可视化】基于Python Flask/Echarts折线图line/视觉映射visualMap/标记线mark

E1【数据可视化】基于Python Flask/Echarts折线图line/视觉映射visualMap/标记线mark

时间：2018-10-29 15:32:03

思路

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

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

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

架构

1.前后端分离：前端 Echarts JavaScript BootStrap; 后端Python Flask；
2.数据动态更新：服务端触发数据源的变化，前端AJAX自动获取最新数据并渲染到Echarts图表上；
3.数据格式：JSON；

动态效果

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

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

关键代码

1. Echarts 视觉映射visualMap

visualMap: {top: "top",left: "right",textStyle: {color: "rgba(255,255,255,.8)",//fontSize: 14,},pieces: [{gt: 0,lte: 100,color: "#FF0000",},{gt: 100,lte: 800,color: "#FFA500",},{gt: 800,lte: 900,color: "#2E8B57",},],},

2. Echarts 标线markLine

markLine: {// 图形是否不响应和触发鼠标事件silent: true,label: {textStyle: {color: "rgba(255,255,255,.8)",//fontSize: 14,},},data: [{yAxis: 100,lineStyle: {color: "#FF0000",},},{yAxis: 800,lineStyle: {color: "#FFA500",},},{yAxis: 900,lineStyle: {color: "#2E8B57",},},],},

3. Python Flask web服务器

app = Flask(__name__, static_folder="static", template_folder="template")@app.route('/')def hello_world():return 'Hello World!'# 主程序在这里if __name__ == "__main__":# 开启线程，触发动态数据a = threading.Thread(target=asyncJson.loop)a.start()# 开启 flask 服务app.run(host='0.0.0.0', port=88, debug=True)

4. JSON 数据格式

[{"name": "北京","value": 20},{"name": "上海","value": 90},{"name": "广州","value": 300},{"name": "深圳","value": 900},{"name": "西安","value": 800},{"name": "南京","value": 350},{"name": "沈阳","value": 500},{"name": "洛阳","value": 400}]

5. AJAX动态刷新数据

function async_echart_line_visualMap(container, filename) {$.getJSON(filename).done(function (data) {var myChart = echarts.init(document.getElementById(container));myChart.setOption({xAxis: { data: getKeys(data) },series: [{ data: data }],});}); //end $.getJSON}