效果展示

1. 效果动图

2. 多种主题效果

一. 确定需求方案

1. 屏幕分辨率

2. 部署方式

二. 整体架构设计

三. 编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

1. 前端html代码

1.1 宽屏 32:9

1.2 页面div布局

2. 前端JS代码 - 柱状图 Echarts option

3. JSON 通信数据定义 - 柱状图 Echarts option

4. 前端JS - 数据定时更新控制

5. 后端 flask 服务器

四. 启动命令

五. 运行效果

六. 源码下载

更多精彩案例

效果展示

写在前面，这个超宽屏 32：9 案例基本包括了可视化开发所有常用的图表，掌握了这个案例，再去做可视化开发就是一件非常容易的事了~

饼图 pie

玫瑰图 rose

水球图 liquidFill

日历图 calendar

柱状图 bar

折线图 line

象形图 pictorial

柱状堆叠图 bar stack

折线堆叠图 line stack

中国地图 china

世界地图 world

词语图 wordcloud

漏斗图 funnel

雷达图 radar

视频区域 video

轮播表格 table

1. 效果动图

2. 多种主题效果

一. 确定需求方案

1. 屏幕分辨率

这个案例的大屏分辨率不是4:3，也不是16:9，而是超宽屏32:9。

根据电脑分辨率屏幕自适应显示，F11全屏查看；

2. 部署方式

B/S方式：支持Windows、Linux、Mac等各种主流操作系统；支持主流浏览器Chrome，Microsoft Edge，360等；服务器采用python语言编写，配置好python环境即可。

二. 整体架构设计

前端Echarts开源库：使用 WebStorm 编辑器；
后端 http服务器：基于 Python 实现，使用 Pycharm 或 VSCode 编辑器；
数据传输格式：JSON；
数据源类型：JSON文件。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
数据更新方式：采用http get 轮询方式 。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；

三. 编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

1. 前端html代码

使用bootstrap container-fluid， row， col等实现。

1.1 宽屏 32:9

因为是超宽屏 32:9 ，所以这里开发机将宽度设置为 200%。

<body style="height: 100%; width:200%;" >
</body>

1.2 页面div布局

<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=0allowfullscreen="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=0allowfullscreen="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=0allowfullscreen="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=0allowfullscreen="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=0allowfullscreen="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=0allowfullscreen="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. 前端JS代码 - 柱状图 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 通信数据定义 - 柱状图 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. 前端JS - 数据定时更新控制

 // 定时1s执行数据更新函数setInterval(function () {async_echart_bar_horizontal(container,path_bar_horizontal + "bar_horizontal.json");}, 1000);

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<!-- 更多资料参考我的博客主页  -->
https://yydatav.blog.csdn.net/<!-- 更多案例参考 -->
https://blog.csdn.net/lildkdkdkjf/article/details/120705616我的微信号：6550523  欢迎多多交流

五. 运行效果

六. 源码下载

27【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏范例 - 监控指挥中心

https://download.csdn.net/download/lildkdkdkjf/84992072

27【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏范例 - 监控指挥中心

效果展示

1. 效果动图

2. 多种主题效果

一. 确定需求方案

1. 屏幕分辨率

2. 部署方式

二. 整体架构设计

三. 编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）

1. 前端html代码

1.1 宽屏 32:9

1.2 页面div布局

2. 前端JS代码 - 柱状图 Echarts option

3. JSON 通信数据定义 - 柱状图 Echarts option

4. 前端JS - 数据定时更新控制

5. 后端 flask 服务器

四. 启动命令

五. 运行效果

六. 源码下载

更多精彩案例

27【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏范例 - 监控指挥中心相关推荐

最新文章

热门文章

27【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏范例 - 监控指挥中心

效果展示

1. 效果动图

2. 多种主题效果

一. 确定需求方案

1. 屏幕分辨率

2. 部署方式

二. 整体架构设计

三. 编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

1. 前端html代码

1.1 宽屏 32:9

1.2 页面div布局

2. 前端JS代码 - 柱状图 Echarts option

3. JSON 通信数据定义 - 柱状图 Echarts option

4. 前端JS - 数据定时更新控制

5. 后端 flask 服务器

四. 启动命令

五. 运行效果

六. 源码下载

更多精彩案例

27【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏范例 - 监控指挥中心相关推荐

最新文章

热门文章

三. 编码实现（基于篇幅及可读性考虑，此处展示部分关键代码）