思路
企业分析绩效，通常是《按比例》找出《模范标杆》以及《典型后腿》。
具体应用时，通常列出《10%》的《模范标杆》，以及《10%》的《典型后腿》，然后对《典型后腿》针对性优化，这样可以取得较大的工作成绩。
本例中的可视化图表，在 line折线图的基础上，增加了 视觉映射visualMap实现了重点关注区域的标记，同时使用 markLine标线对关键数据点进行标识。
架构
- 前后端分离：前端 Echarts JavaScript BootStrap; 后端Python Flask；
- 数据动态更新：服务端触发数据源的变化，前端AJAX自动获取最新数据并渲染到Echarts图表上；
- 数据格式：JSON；
动态效果
1.《10%》的《模范标杆》，以及《10%》的《典型后腿》分析
关键代码
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
}
源码下载
https://download.csdn.net/download/lildkdkdkjf/85122763
Original: https://blog.csdn.net/lildkdkdkjf/article/details/124104782
Author: YYDataV数据可视化
Title: E1【数据可视化】基于Python Flask/Echarts折线图line/视觉映射visualMap/标记线markLine的动态模块绩效分析
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/747707/
转载文章受原作者版权保护。转载请注明原作者出处！