成果展现
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 Flaskapp = 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