catalogue
1. dynamic real-time update data rendering
2. right click to switch topics
1, What? Determine the demand scheme?
II Overall architecture design
III Coding implementation (based on space and readability, some key codes are shown here)
2? Front end JS - ecarts chart
3? Front end JS - Data regular update control
4. data transmission format - JSON definition
Effect display
1. dynamic real-time update data rendering
2. right click to switch topics
I Determine the demand scheme
1. screen resolution
The resolution of this case is 16:9, the most commonly used widescreen ratio.
Screen adaptive display according to computer resolution, F11 full screen view;
2. deployment method
**B/S mode: * * support Windows, Linux, Mac and other mainstream operating systems; Support mainstream browsers such as Chrome, Microsoft Edge, 360, etc; The server is written in Python language, and the python environment can be configured.
II Overall architecture design
- **Front end ecarts open source library: * * use the WebStorm editor;
- Back end http server: Based on Python implementation, using pychart or VSCode editor;
- Data transmission format: JSON;
- Data source type: JSON file. In the actual development requirements, it supports customization of HTTP API interface mode or other types of databases, such as PostgreSQL, MySQL, Oracle, Microsoft SQL Server, SQLite, Excel tables, etc.
- **Data update method: * * http get polling method is adopted. In the practical application, the method of real-time updating and real-time pushing of back-end data of j monitoring can also be selected according to the situation;
III Coding implementation (based on space and readability, some key codes are shown here)
1. front end html code
This page layout uses the * * * * grid layout of H5, and the code is simple and easy to operate.
<div class="grid-container">
<div id="lo_0">
<h2>32 Data visualization-Banking supervision system</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')">New amount</button>
<button
onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'confirm')">Cumulative amount</button>
<button
onclick="async_echart_china('container_8', 'map_china_map/map_china_map.json', 'nowConfirm')">Current amount</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 definition
.grid-container {
display: grid;
/* 6 Columns, defining column widths */
grid-template-columns: 14% 14.5% 20% 20% 14.5% 14%;
/* auto: It is used to automatically set the height of the row, which depends on the size of the containers and contents in the row. */
grid-template-rows: 10% 25% 30% 30%;
grid-gap: 10px;
/* background-color: #2196F3; */
padding: 0;
width: 100%;
height: 100%;
}
Define a grid that spans multiple rows and columns
#lo_5 {
grid-area: 3 / 1 / 4 / 3;
}
2. front end JS - ecarts chart
function init_echart_line_visualMap(container) {
// Initialize the ecarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById(container), gTheme);
option = {
title: {
text: "Real time monitoring of stock market value",
// top: 0,
// left: "center",
textStyle: {
// color: "#17c0ff",
fontSize: "12",
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
position: function (p) {
//Where p is the current mouse position
return [p[0] + 10, p[1] - 10];
},
},
grid: {
left: "3%",
right: "3%",
bottom: "3%",
top: "25%",
containLabel: true,
},
xAxis: {
name: "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: "RMB100mn",
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: "age distribution",
type: "line",
// stack: "total",
// label: {
// show: true,
// },
// Using system functions
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" }],
},
// Custom data
// markLine: {
// //Whether the graph does not respond to and trigger mouse events
// 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",
// },
// },
// ],
// },
},
],
};
// Display the chart using the configuration items and data you just specified.
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** Front end JS - Data regular update control
It supports the independent control of the interval of scheduled updates in each ecarts chart.
// Execute the data update function at a fixed time of 1s
setInterval(function () {
async_echart_bar_horizontal(
container,
path_bar_horizontal + "bar_horizontal.json"
);
}, 1000);
4. data transmission format - JSON definition
[
{
"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. back end flask server
from flask import Flask
app = Flask(__name__, static_folder="static", template_folder="template")
# The main program is here
if __name__ == "__main__":
# Start the thread and trigger dynamic data
a = threading.Thread(target=asyncJson.loop)
a.start()
# Enable flask service
app.run(host='0.0.0.0', port=88, debug=True)
IV Start command
<!-- start-up server command --> python main.py <!-- Enter the web address in the browser to view the large screen (the port is main.py Medium port Parameter definition) --> http://localhost:88/static/index.html <!-- For more information, please refer to my blog home page --> https://yydatav.blog.csdn.net/ <!-- More case references --> https://blog.csdn.net/lildkdkdkjf/article/details/120705616 My wechat: 6550523 welcome to communicate more
V Operation effect
Vi Source code download
More cases
This sharing is over. Welcome to discuss! QQ wechat ID: 6550523