效果图展示
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代码
数据可视化页面设计
Data visualization page design
品牌销售TOP5
-
××品牌
15862
82%
-
××品牌
15862
82%
-
××品牌
15862
82%
-
××品牌
15862
82%
-
××品牌
15862
82%
大类销售分析
年销售
5684710411
月销售
1457104
周销售
564710
日销售
14504
销售总额
568971401
89%
同比
89%
完成率
89%
售罄率
89%
折扣率
会销情况分析
-
会销目标
Marketing Target
￥4,374,266
-
会销目标
Marketing Target
￥4,374,266
-
会销目标
Marketing Target
￥4,374,266
完成情况
会销完成率
会销占比
-
鞋类
52563
-
服装
32563
-
配饰
12563
数据状况
Data Status
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.pushi dataarr.pushmath.floormath.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: valuek 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.lineargradient0 0 0 1 offset: 0 color: 08808b offset: 1 color: rgba0000.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。