菜单 搜索
首页 前端知识 37【源码】数据可视化：基于 Echarts Python 动态实时大屏 - 销售数据看板模板

37【源码】数据可视化：基于 Echarts Python 动态实时大屏 - 销售数据看板模板

2024-06-18 00:06:54 前端知识 前端哥 697 37 我要收藏

 效果图展示

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

欢迎多多交流，微信 DataV6550523。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/12534.html
标签
数据分析
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！