37【源码】数据可视化:基于 Echarts + Python 动态实时大屏
bigegpt 2025-01-20 10:57 24 浏览
效果图展示
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。
?
相关推荐
- 10w qps缓存数据库——Redis（redis缓存调优）
-
一、Redis数据库介绍：Redis：非关系型缓存数据库nosql：非关系型数据库没有表，没有表与表之间的关系，更不存在外键存储数据的形式为key：values的形式c语言写的服务（监听端口），用来存...
- Redis系列专题4--Redis配置参数详解
-
本文基于windowsX64，3.2.100版本讲解，不同版本默认配置参数不同在Redis中，Redis的根目录中有一个配置文件（redis.conf，windows下为redis.windows....
- 开源一夏 | 23 张图，4500 字从入门到精通解释 Redis
-
redis是目前出场率最高的NoSQL数据库，同时也是一个开源的数据结构存储系统，在缓存、数据库、消息处理等场景使用的非常多，本文瑞哥就带着大家用一篇文章入门这个强大的开源数据库——Redis。...
- redis的简单与集群搭建（redis建立集群）
-
Redis是什么？是开源免费用c语言编写的单线程高性能的（key-value形式）内存数据库，基于内存运行并支持持久化的nosql数据库作用主要用来做缓存，单不仅仅是做缓存，比如：redis的计数器生...
- 推荐几个好用Redis图形化客户端工具
-
RedisPlushttps://gitee.com/MaxBill/RedisPlusRedisPlus是为Redis可视化管理开发的一款开源免费的桌面客户端软件，支持Windows、Linux...
- 关于Redis在windows上运行及fork函数问题
-
Redis在将数据库进行持久化操作时，需要fork一个进程，但是windows并不支持fork，导致在持久化操作期间，Redis必须阻塞所有的客户端直至持久化操作完成。微软的一些工程师花费时间在解决在...
- 你必须懂的Redis十大应用场景（redis常见应用场景）
-
Redis作为一款高性能的键值存储数据库，在互联网业务中有着广泛的应用。今天，我们就来详细盘点一下Redis的十大常用业务场景，并附上Golang的示例代码和简图，帮助大家更好地理解和应用Redis。...
- 极简Redis配置（redis的配置）
-
一、概述Redis的配置文件位于Redis安装目录下，文件名为redis.conf(Windows名为redis.windows.conf，linux下的是redis.conf)你可以通过C...
- 什么是redis，怎么启动及如何压测
-
从今天起咱们一起来学习一下关于“redis监控与调优”的内容。一、Redis介绍Redis是一种高级key-value数据库。它跟memcached类似，不过数据可以持久化，而且支持的数据类型很丰富。...
- 一款全新Redis UI可视化管理工具，支持WebUI和桌面——P3X Redis UI
-
介绍P3XRedisUI这是一个非常实用的RedisGUI，提供响应式WebUI访问或作为桌面应用程序使用，桌面端是跨平台的，而且完美支持中文界面。Githubhttps://github....
- windows系统的服务器快速部署java项目环境地址
-
1、mysql:https://dev.mysql.com/downloads/mysql/（msi安装包）2、redis:https://github.com/tporadowski/redis/r...
- window11 下 redis 下载与安装（windows安装redis客户端）
-
#热爱编程是一种怎样的体验#window11下redis下载与安装1）各个版本redis下载(windows)https://github.com/MicrosoftArchive/r...
- 一款轻量级的Redis客户端工具，贼好用!
-
使用命令行来操作Redis是一件非常麻烦的事情，我们一般会选用客户端工具来操作Redis。今天给大家分享一款好用的Redis客户端工具TinyRDM，它的界面清新又优雅，希望对大家有所帮助！简介Ti...
- 一个.NET开发且功能强大的Windows远程控制系统
-
我们致力于探索、分享和推荐最新的实用技术栈、开源项目、框架和实用工具。每天都有新鲜的开源资讯等待你的发现！项目介绍SiMayRemoteMonitorOS是一个基于Windows的远程控制系统，完...
- Redis客户端工具详解(4款主流工具)
-
大家好，我是mikechen。Redis是大型架构的基石，也是大厂最爱考察内容，今天就给大家重点详解4款Redis工具@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合集...
- 一周热门
- 最近发表
- 标签列表
-
- mybatiscollection (79)
- mqtt服务器 (88)
- keyerror (78)
- c#map (65)
- resize函数 (64)
- xftp6 (83)
- bt搜索 (75)
- c#var (76)
- mybatis大于等于 (64)
- xcode-select (66)
- mysql授权 (74)
- 下载测试 (70)
- skip-name-resolve (63)
- linuxlink (65)
- pythonwget (67)
- logstashinput (65)
- hadoop端口 (65)
- vue阻止冒泡 (67)
- oracle时间戳转换日期 (64)
- jquery跨域 (68)
- php写入文件 (73)
- kafkatools (66)
- mysql导出数据库 (66)
- jquery鼠标移入移出 (71)
- 取小数点后两位的函数 (73)