37【源码】数据可视化:基于 Echarts + Python 动态实时大屏
ccwgpt 2025-01-08 11:53 34 浏览 0 评论
效果图展示
1.动态效果演示
2.静态切片效果图
一、确定需求方案
1.确定产品上线部署的屏幕LED分辨率
本案例基于16:9 屏宽比，F11全屏显示。
2.部署方式
浏览器打开播放，Chrome浏览器、360浏览器等。
二、整体架构设计
前端基于Echarts开源库设计，使用WebStorm编辑器；
后端基于Python Flask实现，使用 Vscode 或 Pycharm编辑器；
数据传输格式：JSON；
数据源类型：目前采用JSON文件方式，可自行添加支持PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite，自行添加pandas支持Excel表格等，还可以定制HTTP API接口方式。
数据更新方式：采用http get 轮询方式 。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式；
三、编码实现 （关键代码）
1.前端html代码
<body>
<!-- 头部模块 -->
<header>
<h1><span>数据可视化页面设计</span></h1>
<p><span>Data visualization page design</span></p>
</header>
<div class="main">
<!-- top5 -->
<div class="top5">
<div class="top5-title">
<span>品牌销售TOP5</span>
</div>
<div class="top5-content">
<ul>
<li>
<div class="cicle"></div>
<div class="li-content">
<span>××品牌</span>
<span>15862</span>
<span>82%</span>
<span><img src="./images/up.png" alt=""></span>
</div>
</li>
<li>
<div class="cicle"></div>
<div class="li-content">
<span>××品牌</span>
<span>15862</span>
<span>82%</span>
<span><img src="./images/up.png" alt=""></span>
</div>
</li>
<li>
<div class="cicle"></div>
<div class="li-content">
<span>××品牌</span>
<span>15862</span>
<span>82%</span>
<span><img src="./images/up.png" alt=""></span>
</div>
</li>
<li>
<div class="cicle"></div>
<div class="li-content">
<span>××品牌</span>
<span>15862</span>
<span>82%</span>
<span><img src="./images/up.png" alt=""></span>
</div>
</li>
<li>
<div class="cicle"></div>
<div class="li-content">
<span>××品牌</span>
<span>15862</span>
<span>82%</span>
<span><img src="./images/down.png" alt=""></span>
</div>
</li>
</ul>
</div>
<div class="top5-title">
<span>大类销售分析</span>
</div>
</div>
<!-- 销售总额 -->
<div class="total">
<div class="data1">
<span>年销售</span>
<p id="year_sale">5684710411</p>
</div>
<div class="data2">
<span>月销售</span>
<p id="month_sale">1457104</p>
</div>
<div class="data3">
<span>周销售</span>
<p id="week_sale">564710</p>
</div>
<div class="data4">
<span>日销售</span>
<p id="day_sale">14504</p>
</div>
<canvas class="rain"></canvas>
<canvas class="dashed"></canvas>
<div class="sphere">
<div class="sphere-bg"></div>
<div class="sum">
<span>销售总额</span>
<p id="total_sale">568971401</p>
</div>
</div>
<div class="cicle3"></div>
<div class="cicle4"></div>
<div class="cicle5"></div>
<div class="cicle6"></div>
<div class="cicle7"></div>
<div class="cicle8">
<span><div id="percent1" style="display:inline">89</div>%</span>
<p>同比</p>
</div>
<div class="cicle9">
<span><div id="percent2" style="display:inline">89</div>%</span>
<p>完成率</p>
</div>
<div class="cicle10">
<span><div id="percent3" style="display:inline">89</div>%</span>
<p>售罄率</p>
</div>
<div class="cicle11">
<span><div id="percent4" style="display:inline">89</div>%</span>
<p>折扣率</p>
</div>
</div>
<!-- 会销分析 -->
<div class="analyse">
<div class="analyse-title">
<span>会销情况分析</span>
</div>
<ul>
<li>
<img src="./images/s1.png" alt="">
<h5>会销目标</h5><br>
<span>Marketing Target</span><br>
<em>￥4,374,266</em>
</li>
<li>
<img src="./images/s3.png" alt="">
<h5>会销目标</h5><br>
<span>Marketing Target</span><br>
<em>￥4,374,266</em>
</li>
<li>
<img src="./images/s2.png" alt="">
<h5>会销目标</h5><br>
<span>Marketing Target</span><br>
<em>￥4,374,266</em>
</li>
</ul>
<div class="execution">
<div class="title">完成情况</div>
<div class="cicle1"></div>
<div class="cicle2"></div>
<div class="waterChart1">
<div class="chart-title">会销完成率</div>
<div class="chart1"></div>
</div>
<div class="waterChart2">
<div class="chart-title">会销占比</div>
<div class="chart2"></div>
</div>
</div>
</div>
<!-- 鞋服配销售分析 -->
<div class="sale">
<ul>
<li>
<div class="showImg">
<img src="./images/shoe.png" alt="">
</div>
<div class="data">
<span>鞋类</span>
<span>52563</span>
</div>
<div class="shoeChart"></div>
</li>
<li>
<div class="showImg">
<img src="./images/clothes.png" alt="">
</div>
<div class="data">
<span>服装</span>
<span>32563</span>
</div>
<div class="clothesChart"></div>
</li>
<li>
<div class="showImg">
<img src="./images/mz.png" alt="">
</div>
<div class="data">
<span>配饰</span>
<span>12563</span>
</div>
<div class="mzChart"></div>
</li>
</ul>
</div>
<!-- 折线图 -->
<div class="lineChart">
</div>
</div>
<!-- 底部模块 -->
<div class="bottom">
<h5><span>数据状况</span></h5>
<p>Data Status</p>
</div>
</body>2. 前端JS -echarts 折线图
// 折线图
function lineChart(ele) {
var chart = echarts.init(document.querySelector(ele));
var xdata = [];
var dataArr = [];
for (var i = 1; i < 30; i++) {
xdata.push(i);
dataArr.push(Math.floor(Math.random() * 20 + 5))
}
var max = Math.max.apply(null, dataArr);
var seriesName = '';
option = {
grid: {
left: "5%",
// right: "2%",
bottom: "5%",
top: "15%",
containLabel: true
},
xAxis: {
type: "category",
data: xdata,
axisLabel: {
show: true,
textStyle: {
color: "#fff",
fontSize: 0.5 * w
}
},
axisLine: {
lineStyle: {
color: 'transparent',
width: 2 //这里是为了突出显示加上的
}
}
},
tooltip: {
show: true,
trigger: 'item'
},
yAxis: [{
type: 'value',
// name: '立方米',
min: 0,
max: 25,
axisLabel: {
formatter: '{value}k',
textStyle: {
color: '#fff',
fontSize: 0.5 * w
}
},
axisLine: {
lineStyle: {
color: 'transparent',
width: 2 //这里是为了突出显示加上的
}
},
axisTick: {
show: false,
},
splitLine: {
show: false
}
}],
series: [{
name: seriesName,
type: 'line',
stack: '总量',
symbol: 'none',
smooth: false,
symbol: "circle",
itemStyle: {
normal: {
color: '#34a39a',
lineStyle: {
color: "#34a39a",
width: 2
},
areaStyle: {
//color: '#94C9EC'
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#08808b"
},
{
offset: 1,
color: 'rgba(0,0,0,0.2)',
}
])
}
}
},
data: dataArr
},]
};
var index = 0; //播放所在下标
var mTime = setInterval(function () {
chart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: index
});
index++;
if (index > xdata.length) {
index = 0;
}
}, 1500);
chart.setOption(option)
}
lineChart('.lineChart')3. 前端JS - 数据定时更新控制
支持在每个echarts图表中独立控制定时更新的间隔。
var init = function () {
updating();
setInterval(function() {updating()}, 2000);//刷新周期设置
};4. 后端 Python Flask 代码
@app.route('/get_percent')
def get_percent():
jsonData = {}
jsonData['percent1'] = random.randint(0, 100)
jsonData['percent2'] = random.randint(0, 100)
jsonData['percent3'] = random.randint(0, 100)
jsonData['percent4'] = random.randint(0, 100)
return json.dumps(jsonData)
def loop():
time.sleep(10)
pass
# 主程序在这里
if __name__ == "__main__":
a = threading.Thread(target=loop)
a.start()
# 开启 flask 服务
app.run(host='127.0.0.1', port=80, debug=True)
四、运行效果
五、更多案例
YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码）_YYDataV的博客-CSDN博客
【工厂扫码打印&扫码装箱&错误追溯系统】完整案例详解（Python&PyQt 源码&Mysql数据库）_YYDataV数据可视化的博客-CSDN博客_pyqt案例
六、源码下载
37源码数据可视化：基于 Echarts + Python 动态实时大屏 - 销售数据看板.zip
https://download.csdn.net/download/lildkdkdkjf/87701050
欢迎多多交流，微信 6550523。
?
相关推荐
- 腾讯开源框架TarsCpp-rpc设计分析-server(二)
-
2Tars协议2.1是什么借用官方说法：TARS编码协议是一种数据编解码规则，它将整形、枚举值、字符串、序列、字典、自定义结构体等数据类型按照一定的规则编码到二进制数据流中。对端接收到二进制数据流...
- 微服务调用为什么用RPC框架，http不更简单吗?
-
简单点，HTTP是协议，RPC是概念！实现RPC可以基于HTTP协议（Feign），TCP协议(Netty)，RMI协议（Soap），WebService（XML—RPC）框架。传输过程中，也因为序列...
- go-zero:开箱即用的微服务框架（gin框架微服务）
-
go-zero是一个集成了各种工程实践的Web和rpc框架，它的弹性设计保障了大并发服务端的稳定性，并且已经经过了充分的实战检验。go-zero在设计时遵循了“工具大于约定和文档”的理...
- SOFARPC :高性能、高扩展性、生产级的 Java RPC 框架
-
#暑期创作大赛#SOFARPC是一个高性能、高扩展性、生产级的JavaRPC框架。在蚂蚁金服，SOFARPC已经使用了十多年，已经发展了五代。SOFARPC致力于简化应用程序之间的RPC...
- 自研分布式高性能RPC框架及服务注册中心ApiRegistry实践笔记
-
痛点1.bsf底层依赖springcloud,影响bsf更新springboot新版本和整体最新技术版本升级。2.eureka已经闭源，且框架设计较重，同时引入eureka会自行引入较多sprin...
- Rust语言从入门到精通系列 - Tonic RPC框架入门实战
-
Rust语言是一种系统级语言，被誉为“没有丧失性能的安全语言”。Rust语言的优势在于其内存安全机制，在编译时就能保证程序的内存安全。Tonic模块是Rust语言的一个RPC（RemoteProce...
- 腾讯开源框架TarsCpp-rpc设计分析-client(一)
-
前言Tars是腾讯开源的微服务平台，包含了一个高性能的rpc框架和服务治理平台，TarsCpp是其C++版本。对于以C++为主要开发语言，同时还想深入了解rpc和微服务框架具体实现的同学来说，Tars...
- 设计了一款TPS百万级别的分布式、高性能、可扩展的RPC框架
-
为啥要开发RPC框架事情是这样的，在开发这个RPC框架之前，我花费了不少时间算是对Dubbo框架彻底研究透彻了。冰河在撸透了Dubbo2.x和Dubbo3.x的源码之后，本来想给大家写一个Dubbo源...
- rpc框架使用教程，超级稳定好用，大厂都在使用
-
rpc是什么远程调用协议如何使用导入依赖<dependency><groupId>org.apache.dubbo</groupId><art...
- Layui 框架实战:动态加载 Select 与二级联动全解析
-
在现代Web开发中，下拉选择框（Select）是用户输入数据时不可或缺的组件。很多时候，我们需要的选项并非静态写死在HTML中，而是需要根据业务逻辑从后端动态获取。更有甚者，我们可能需要实现“...
- 15个能为你节省数百小时的前端设计神器，从UI库到文档生成
-
无论你是刚开始开发之旅的新手，还是疲于应付生产期限的资深程序员，有一个真理始终不变：正确的工具能彻底改变你的工作流程。多年来，我测试了数百个开发工具——有些实用，大多数平庸。但有一批免费网站经受住了时...
- Layui与WinForm通用权限管理系统全解析
-
嘿，小伙伴们，今天咱们来聊聊Layui和WinForm这两个框架在通用权限管理系统中的应用。别担心，我会尽量用简单易懂的语言来讲解，保证让大家都能跟上节奏！首先说说Layui。Layui是一个前端UI...
- 纯Python构建精美UI!MonsterUI让前端开发效率飙升
-
“无需CSS知识，告别类名记忆，11行代码实现专业级卡片组件”在传统Web开发中，构建美观界面需要同时掌握HTML、CSS、JavaScript三剑客，开发者不得不在多种语言间频繁切换。即使使用Boo...
- WebTUI:将终端用户界面(TUI)之美带到浏览器的CSS库
-
在当今Web技术飞速发展的时代，界面设计愈发复杂多样。然而，随着现代化工具的广泛使用，一些开发者开始回归极简风格，追求一种简洁而富有韵味的设计。WebTUI正是这样一款CSS库，它将经典的终...
- 人教版二年级下册生字描红汇总(拼音+笔顺+描红)，可打印!
-
可定制内容，评论区留言。本次整理的为人教版二年级下册所有生字，共计300个；写字是小学阶段一项重要的基本功训练，把汉字写得正确、工整、美观，可以提高运用汉字这一交际工具的准确性和效率。对小学生进行写字...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 腾讯开源框架TarsCpp-rpc设计分析-server(二)
- 微服务调用为什么用RPC框架，http不更简单吗?
- go-zero:开箱即用的微服务框架（gin框架微服务）
- SOFARPC :高性能、高扩展性、生产级的 Java RPC 框架
- 自研分布式高性能RPC框架及服务注册中心ApiRegistry实践笔记
- Rust语言从入门到精通系列 - Tonic RPC框架入门实战
- 腾讯开源框架TarsCpp-rpc设计分析-client(一)
- 设计了一款TPS百万级别的分布式、高性能、可扩展的RPC框架
- rpc框架使用教程，超级稳定好用，大厂都在使用
- Layui 框架实战:动态加载 Select 与二级联动全解析
- 标签列表
-
- 框架图 (58)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (56)
- shiro框架 (61)
- 定时任务框架 (56)
- java日志框架 (61)
- JAVA集合框架 (47)
- mfc框架 (52)
- abb框架断路器 (48)
- ui自动化框架 (47)
- beego框架 (52)
- java框架spring (58)
- grpc框架 (65)
- tornado框架 (48)
- 前端框架bootstrap (54)
- ppt框架 (48)
- 内联框架 (52)
- cad怎么画框架 (58)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)