Real-time Data Visualization Dashboard with Python Flask and ECharts

This article demonstrates how to build a real‑time data‑visualization dashboard for a banking supervision system using a B/S architecture with Python Flask on the back‑end and ECharts on the front‑end.

The requirements include a 16:9 screen resolution and support for Windows, Linux, macOS and major browsers. The front‑end uses an HTML5 grid layout defined by CSS, and the back‑end serves JSON data via a Flask HTTP server.

The overall architecture consists of: (1) ECharts library for charts, (2) a Python HTTP server, (3) JSON data exchange, (4) JSON files or optional database sources, and (5) periodic HTTP GET polling for data updates.

Key front‑end code snippets:

<div class="grid-container">
    <div id="lo_0"><h2>32 数据可视化-银行监管系统</h2></div>
    ...
    <div id="lo_8"><div style="height: 10%;">
        <button onclick="async_echart_china('container_8','map_china_map/map_china_map.json','confirmAdd')">新增金额</button>
        <button onclick="async_echart_china('container_8','map_china_map/map_china_map.json','confirm')">累计金额</button>
        <button onclick="async_echart_china('container_8','map_china_map/map_china_map.json','nowConfirm')">现有金额</button>
    </div>
    <div id="container_8" style="height: 90%;"></div>
    </div>
</div>

CSS grid definition:

.grid-container {
    display: grid;
    grid-template-columns: 14% 14.5% 20% 20% 14.5% 14%;
    grid-template-rows: 10% 25% 30% 30%;
    grid-gap: 10px;
    width: 100%;
    height: 100%;
}
#lo_5 { grid-area: 3 / 1 / 4 / 3; }

JavaScript for initializing an ECharts line chart and handling tooltip positioning, visualMap, and data updates:

function init_echart_line_visualMap(container) {
    var myChart = echarts.init(document.getElementById(container), gTheme);
    var option = {
        title:{text:"股票市值实时监测",textStyle:{fontSize:"12"}},
        tooltip:{trigger:"item",formatter:"{a}<br/>{b}: {c} ({d}%)",position:function(p){return [p[0]+10,p[1]-10];}},
        grid:{left:"3%",right:"3%",bottom:"3%",top:"25%",containLabel:true},
        xAxis:{name:"名称",type:"category",data:[],axisLabel:{textStyle:{color:"rgba(255,255,255,.8)"}},axisLine:{lineStyle:{color:"rgba(255,255,255,.2)"}},splitLine:{lineStyle:{color:"rgba(255,255,255,.1)"}}},
        yAxis:{name:"亿元",type:"value",data:[],axisLabel:{textStyle:{color:"rgba(255,255,255,.8)"},formatter:"{value}"},axisLine:{lineStyle:{color:"rgba(255,255,255,.2)"}},splitLine:{lineStyle:{color:"rgba(255,255,255,.1)"}}},
        visualMap:{top:"top",left:"right",textStyle:{color:"rgba(255,255,255,.8)"},pieces:[{gt:0,lte:100,color:"#FF0000"},{gt:100,lte:800,color:"#FFA500"},{gt:800,lte:900,color:"#2E8B57"}]},
        series:[{name:"年龄分布",type:"line",markPoint:{label:{textStyle:{color:"rgba(255,255,255,.8)"}},data:[{type:"max",name:"Max"},{type:"min",name:"Min"}]},markLine:{data:[{type:"average",name:"Avg"}]}}]
    };
    myChart.setOption(option);
    window.addEventListener("resize",function(){myChart.resize();});
}

A helper function to extract keys from a data list:

function getKeys(dataList){
    var keys=[];
    var len=dataList.length;
    for(var i=0;i<len;i++) keys.push(dataList[i].name);
    return keys;
}

Backend Flask server skeleton:

from flask import Flask
app = Flask(__name__, static_folder="static", template_folder="template")
if __name__ == "__main__":
    a = threading.Thread(target=asyncJson.loop)
    a.start()
    app.run(host='0.0.0.0', port=88, debug=True)

Launch command: python main.py and open http://localhost:88/static/index.html in a browser to view the dashboard.

The final result shows a responsive, theme‑switchable dashboard with real‑time chart updates.