content
2. Overall Architecture Design
2. Front-end JS code - bar chart Echarts option
3. JSON Communication Data Definition - Histogram Echarts option
4. Front-end JS - Data Timing Update Control
Show results
Written in the front, this ultra-widescreen 32:9 case basically includes all the commonly used charts for visual development . After mastering this case, it is very easy to do visual development~
- pie chart
- rose figure
- water polo chart liquidFill
- calendar chart calendar
- histogram bar
- line chart
- Pictogram pictorial
- bar stack
- line stack
- China map china
- world map world
- word graph wordcloud
- funnel chart
- radar chart
- video area video
- carousel table
1. Effect animation
2. Various theme effects
1. Determine the demand plan
1. Screen Resolution
The large screen resolution of this case is not 4:3, nor 16:9, but the ultra-wide screen 32:9.
According to the computer resolution screen adaptive display, F11 full screen view;
2. Deployment method
B/S mode: support Windows, Linux, Mac and other mainstream operating systems; support mainstream browsers Chrome, Microsoft Edge, 360, etc.; the server is written in python language, and the python environment can be configured.
2. Overall Architecture Design
- Front-end Echarts open source library: use WebStorm editor;
- Back- end http server : based on Python implementation, using Pycharm or VSCode editor;
- Data transmission format: JSON;
- Data source type: JSON file . In actual development requirements, it supports custom HTTP API interface or other types of databases, such as PostgreSQL, MySQL, Oracle, Microsoft SQL Server, SQLite, Excel form, etc.
- Data update method: use http get polling method . In practical applications, you can also choose to monitor the real-time update of the back-end data and push it to the front-end in real time according to the situation;
3. Coding implementation (based on space and readability considerations, some key codes are shown here)
1. Front-end html code
Implemented using bootstrap container-fluid, row, col, etc.
1.1 Widescreen 32:9
Because it is an ultra-wide screen 32:9, the development machine here sets the width to 200%.
<body style="height: 100%; width:200%;" >
</body>1.2 Page div layout
<div id="vue_app" class="container-fluid">
<!-- 外框 1 -->
<div class="row" style="height: 5%;">
<div id="container_1" class="col" style="height: 100%; color:#00ffff; text-align: center; ">
<h3>【27】数据可视化大屏：基于 Echarts + Flask 实现的 32:9 超宽屏可视化范例 - 监控指挥中心 </h3>
</div>
</div>
<div class="row" style="height: 2%;">
</div>
<!-- 外框 2 -->
<div class="row" style="height: 60%;">
<!-- 左侧 -->
<div class="col" style="height: 100%">
<!-- 左侧第1行 -->
<div class="row" style="height: 30%">
<dv-border-box-7 class=" col" :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']"
style="width: 25%;">
<div id="container_l1" style="height: 100%;">
</div>
</dv-border-box-7>
<dv-border-box-7 class="col" :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']"
style="width: 25%;">
<div id="container_l2" style="height: 100%;">
</div>
</dv-border-box-7>
<dv-border-box-7 class="col" :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']"
style="width: 25%;">
<div id="container_l3" style="height: 100%;">
</div>
</dv-border-box-7>
<dv-border-box-7 class="col" :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']"
style="width: 25%;">
<div id="container_l4" style="height: 100%;">
</div>
</dv-border-box-7>
</div>
<!-- 左侧第2行 -->
<div class="row" style="height: 35%">
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col">
<div id="container_l5" style="height: 100%">
</div>
</dv-border-box-13>
</div>
<!-- 左侧第3行 -->
<div class="row" style="height: 35%">
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 40%;">
<div id="container_l6" style="height: 100%">
</div>
</dv-border-box-13>
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 60%;">
<div id="container_l7" style="height: 100%">
</div>
</dv-border-box-13>
</div>
</div>
<!-- 中间 -->
<div class="col" style="height: 100%">
<div class="row" style="height: 100%">
<dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col"
style="width: 45%;">
<div id="container_m1" style="height: 100%; ">
</div>
</dv-border-box-7>
<dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col"
style="width:45%;">
<div id="container_m2" style="height: 100%;">
</div>
</dv-border-box-7>
</div>
</div>
<!-- 右侧 -->
<div class="col" style="height: 100%">
<!-- 右侧第一行 -->
<div class="row" style="height: 30%">
<dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col">
<div id="container_r1" style="height: 100%">
</div>
</dv-border-box-7>
<dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col">
<div id="container_r2" style="height: 100%">
</div>
</dv-border-box-7>
<dv-border-box-7 :color="['rgba(0, 255, 255, 0.1)','rgba(0, 255, 255, 1)']" class="col">
<div id="container_r3" style="height: 100%">
</div>
</dv-border-box-7>
</div>
<!-- 右侧第二行 -->
<div class="row" style="height: 35%">
<div id="container_r4" class="col">
<iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
allowfullscreen="true" width="100%" height="100%"> </iframe>
</div>
<div id="container_r5" class="col">
<iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
allowfullscreen="true" width="100%" height="100%"> </iframe>
</div>
<div id="container_r6" class="col">
<iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
allowfullscreen="true" width="100%" height="100%"> </iframe>
</div>
</div>
<!-- 右侧第三行 -->
<div class="row" style="height: 35%">
<div id="container_r7" class="col">
<iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
allowfullscreen="true" width="100%" height="100%"> </iframe>
</div>
<div id="container_r8" class="col">
<iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
allowfullscreen="true" width="100%" height="100%"> </iframe>
</div>
<div id="container_r9" class="col">
<iframe src="img/1.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
allowfullscreen="true" width="100%" height="100%"> </iframe>
</div>
</div>
</div>
</div>
<!-- 外框 3 -->
<div class="row" style="height: 30%;">
<div class="col" style="height: 100%">
<div class="row" style="height: 100%">
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 50%;">
<div id="container_b1" style="height: 100%;">
</div>
</dv-border-box-13>
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 50%;">
<div id="container_b2" style="height: 100%; ">
</div>
</dv-border-box-13>
</div>
</div>
<div class="col" style="height: 100%">
<div class="row" style="height: 100%">
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 33%; ">
<div id="container_b3" style="height: 100%; ">
</div>
</dv-border-box-13>
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 33%; ">
<div id="container_b4" style="height: 100%; ">
</div>
</dv-border-box-13>
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 33%; ">
<div id="container_b5" style="height: 100%; ">
</div>
</dv-border-box-13>
</div>
</div>
<div class="col" style="height: 100%">
<div class="row" style="height: 100%">
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col" style="width: 50%;">
<div id="container_b6" style="height: 90%; ">
</div>
</dv-border-box-13>
<dv-border-box-13 :color="['rgba(0, 255, 255, 0.7)']" class="col"
style="width: 50%; padding: 2%;">
<div id="container_b7">
<dv-scroll-board :config="config" />
</div>
</dv-border-box-13>
</div>
</div>
</div>
</div>
</div>2. Front-end JS code - bar chart Echarts option
function init_echart_bar_horizontal(container) {
var chartDom = document.getElementById(container);
var myChart = echarts.init(chartDom, window.gTheme);
var option = {
title: {
text: "供应商",
top: "5%",
left: "2%",
textStyle: {
// color: "#3690be",
fontSize: "12",
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} 亿元",
position: function (p) {
//其中p为当前鼠标的位置
return [p[0] + 10, p[1] - 10];
},
},
legend: {
data: ["成交额", "综合评价"],
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: "10",
},
top: "15%",
},
grid: {
left: "10%",
top: "30%",
right: "5%",
bottom: "2%",
containLabel: true,
},
dataZoom: [
{
type: "slider",
yAxisIndex: 0,
left: "5%",
start: 95,
end: 100,
},
],
xAxis: [
{
name: "成交额(亿元)",
type: "value",
min: 0,
max: 5000,
nameLocation: "start",
nameTextStyle: {
color: "#3690be",
fontSize: 10,
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.8)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
{
name: "综合评价",
type: "value",
min: 0,
max: 100,
nameLocation: "start",
nameTextStyle: {
color: "#3690be",
fontSize: 10,
},
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.8)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
],
yAxis: {
// name:'供应商',
type: "category",
data: [],
axisLabel: {
textStyle: {
color: "rgba(255,255,255,.8)",
fontSize: 10,
},
},
axisLine: {
lineStyle: {
color: "rgba(255,255,255,.8)",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,.1)",
},
},
},
series: [
{
name: "成交额",
type: "bar",
xAxisIndex: 0,
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [],
},
{
name: "综合评价",
type: "bar",
xAxisIndex: 1,
label: {
show: true,
},
emphasis: {
focus: "series",
},
data: [],
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
function async_echart_bar_horizontal(container, filename) {
$.getJSON(filename).done(function (data) {
var myChart = echarts.init(
document.getElementById(container),
window.gTheme
);
myChart.setOption({
yAxis: { data: data["yAxis"]["data"] },
series: [
{ data: data["series"][0]["data"] },
{ data: data["series"][1]["data"] },
],
});
}); //end $.getJSON}
}
3. JSON communication data definition - bar chart Echarts option
{"yAxis": {"data": ["竞帝科技", "东方电子", "华兴科技", "华通科技", "正大科技", "卓越科技", "蓝讯科技", "科赛科技", "乐怿科技", "大族科技", "泓是科技", "卓蓝科技", "讯飞科技", "头头是道科技", "三一科技", "绿卓科技", "讯天科技", "鸿海科技", "中正电子", "和讯元器件", "普飞电子", "宏达科技", "正视公司", "和达有线科技", "傲视科技", "通达科技", "迅雷电子", "暴风电子", "搜狐电子", "腾科电子", "百世电子", "东正科技", "东方红科技", "宏景科技", "雷赛科技", "丰辰科技", "台达科技"]}, "series": [{"data": [91, 27, 90, 94, 50, 60, 76, 60, 23, 83, 98, 43, 21, 47, 26, 74, 89, 57, 50, 32, 98, 86, 25, 91, 82, 26, 25, 92, 52, 93, 71, 51, 64, 73, 80, 68, 86]}, {"data": [40, 63, 41, 29, 97, 68, 79, 38, 90, 55, 32, 62, 58, 42, 26, 37, 30, 94, 72, 73, 25, 58, 44, 58, 52, 26, 62, 40, 78, 61, 28, 92, 27, 81, 38, 24, 78]}]}4. Front-end JS - Data Timing Update Control
// 定时1s执行数据更新函数
setInterval(function () {
async_echart_bar_horizontal(
container,
path_bar_horizontal + "bar_horizontal.json"
);
}, 1000);5. Backend flask server
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)4. Start command
<!-- 启动server命令 -->
python main.py
<!-- 浏览器中输入网址查看大屏（端口为 main.py 中的 port 参数定义） -->
http://localhost:88/static/index.html
<!-- 更多资料参考我的博客主页 -->
https://yydatav.blog.csdn.net/
<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616
我的微信号：6550523 欢迎多多交流5. Operation effect
6. Source code download
27 [source code] Data visualization large screen: 32-9 ultra-wide large screen example based on Echarts + Python Flask - monitoring and command center
More wonderful cases
YYDatav's Data Visualization "Summary of Wonderful Cases"_YYDataV's Blog - CSDN Blog