37【源码】数据可视化:基于 Echarts + Python 动态实时大屏
toyiye 2024-09-12 21:02 7 浏览 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。
?
相关推荐
- 为何越来越多的编程语言使用JSON（为什么编程）
-
JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON（数据库用json格式存储）
-
在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...
- MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）
-
前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶（json格式对象）
-
一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data（json和formdata提交区别）
-
在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...
- JSON 语法（json 语法 priority）
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解（json的语法规则）
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...
- MySQL JSON数据类型操作（mysql的json）
-
概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...
- JSON的数据模式（json数据格式示例）
-
像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解（后端json格式）
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势（什么叫json）
-
现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类（javascript 包）
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?（json和xml哪个好）
-
JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)