共计 4353 个字符，预计需要花费 11 分钟才能阅读完成。
成果展现
1. 动静实时更新数据效果图
2. 鼠标右键切换主题
一. 确定需要计划
1. 屏幕分辨率
这个案例的分辨率是 16:9，最罕用的的宽屏比。
依据电脑分辨率屏幕自适应显示，F11 全屏查看；
2. 部署形式
B/ S 形式：反对 Windows、Linux、Mac 等各种支流操作系统；反对支流浏览器 Chrome，Microsoft Edge，360 等；服务器采纳 python 语言编写，配置好 python 环境即可。
最近刚好整顿了 Python 书籍材料电子版等材料，都打包好了，须要的小伙伴可间接返回 gzh【Python 编程学习圈】支付，关注回复关键词【学习材料】即可收费获取，蕴含有入门到进阶、爬虫、数据分析等方向的材料教程，不要错过啦！
二. 整体架构设计
- 前端 Echarts 开源库：应用 WebStorm 编辑器；
- 后端 http 服务器：基于 Python 实现，应用 Pycharm 或 VSCode 编辑器；
- 数据传输格局：JSON；
- 数据源类型：JSON 文件。理论开发需要中，反对定制 HTTP API 接口方式或其它各种类型数据库，如 PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel 表格等。
- 数据更新形式：采纳 http get 轮询形式。在理论利用中，也能够视状况抉择 j 监测后端数据实时更新，实时推送到前端的形式；
三. 编码实现（基于篇幅及可读性思考，此处展现局部要害代码）
1. 前端 html 代码
本次页面布局应用 H5 的 grid 布局，代码简略易操作。
<div class="grid-container">
<div id="lo_0">
<h2>32 数据可视化 - 银行监管零碎 </h2>
</div>
<div id="lo_1">
</div>
<div id="lo_2">
</div>
<div id="lo_3">
</div>
<div id="lo_4">
</div>
<div id="lo_5">
</div>
<div id="lo_6">
</div>
<div id="lo_7">
</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 id="lo_9">9</div>
<div id="lo_10">10</div>
</div>grid-container 定义
.grid-container {
display: grid;
/* 6 列，定义列宽 */
grid-template-columns: 14% 14.5% 20% 20% 14.5% 14%;
/* auto: 它用于主动设置行的高度，即取决于行中容器和内容的大小。*/
grid-template-rows: 10% 25% 30% 30%;
grid-gap: 10px;
/* background-color: #2196F3; */
padding: 0;
width: 100%;
height: 100%;
}对横跨多个行列的格子定义
#lo_5 {grid-area: 3 / 1 / 4 / 3;}2. 前端 JS – echarts 图表
function init_echart_line_visualMap(container) {
// 基于筹备好的 dom，初始化 echarts 实例
var myChart = echarts.init(document.getElementById(container), gTheme);
option = {
title: {
text: "股票市值实时监测",
// top: 0,
// left: "center",
textStyle: {
// color: "#17c0ff",
fontSize: "12",
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: function (p) {
// 其中 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)",
//fontSize: 14,
},
// formatter: "{value}%",
},
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)",
//fontSize: 14,
},
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)",
//fontSize: 14,
},
pieces: [
{
gt: 0,
lte: 100,
color: "#FF0000",
},
{
gt: 100,
lte: 800,
color: "#FFA500",
},
{
gt: 800,
lte: 900,
color: "#2E8B57",
},
],
},
series: [
{
name: "年龄散布",
type: "line",
// stack: "total",
// label: {
// show: true,
// },
// 应用零碎函数
markPoint: {
label: {
textStyle: {color: "rgba(255,255,255,.8)",
//fontSize: 14,
},
},
data: [{ type: "max", name: "Max"},
{type: "min", name: "Min"},
],
},
markLine: {data: [{ type: "average", name: "Avg"}],
},
// 自定义数据
// 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",
// },
// },
// ],
// },
},
],
};
// 应用刚指定的配置项和数据显示图表。myChart.setOption(option);
window.addEventListener("resize", function () {myChart.resize();
});
}
function getKeys(dataList) {var keys = [];
var len = dataList.length;
for (var i = 0; i < len; i++) keys.push(dataList[i].name);
return keys;
}3. 前端 JS – 数据定时更新管制
反对在每个 echarts 图表中独立管制定时更新的距离。
// 定时 1s 执行数据更新函数
setInterval(function () {
async_echart_bar_horizontal(
container,
path_bar_horizontal + "bar_horizontal.json"
);
}, 1000);4. 数据传输格局 – JSON 定义
[
{
"name": "10:00",
"value": 300
},
{
"name": "10:01",
"value": 301
},
{
"name": "10:02",
"value": 301
},
{
"name": "10:03",
"value": 300
},
{
"name": "10:04",
"value": 300
},
{
"name": "10:05",
"value": 303
},
{
"name": "10:06",
"value": 303
},
{
"name": "10:07",
"value": 303
}
]5. 后端 flask 服务器
from flask import Flask
app = Flask(__name__, static_folder="static", template_folder="template")
# 主程序在这里
if __name__ == "__main__":
# 开启线程，触发动态数据
a = threading.Thread(target=asyncJson.loop)
a.start()
# 开启 flask 服务
app.run(host='0.0.0.0', port=88, debug=True)四. 启动命令
<!-- 启动 server 命令 -->
python main.py
<!-- 浏览器中输出网址查看大屏（端口为 main.py 中的 port 参数定义）-->
http://localhost:88/static/index.html五. 运行成果
正文完
