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

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

2024-06-18 00:06:54 前端知识 前端哥 684 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基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

推荐一款神器：jQuery JSON Viewer

2024-06-24 02:06:16

jQuery基本使用

2024-06-24 02:06:16

升级到 jQuery 3.6.1 遇见的几个坑以及应对方法

2024-06-24 02:06:15

[echarts] markArea显示不同颜色

2024-06-24 02:06:49

基于javaweb mysql的springboot医药进销存管理系统(java springboot html echarts jquery maven mysql)

2024-06-24 02:06:16

vue在created里面请求数据，在mounted里面加载echarts

2024-06-24 02:06:16

echarts点击柱状图跳转到指定页面

2024-06-24 02:06:15

使用Vue纯前端实现发送短信验证码并实现倒计时

2024-06-24 02:06:12

使用小皮【phpstudy】运行Vue MySql项目

2024-06-24 02:06:58

Vue 3中的v-for指令使用详解

2024-06-24 02:06:58

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

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

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

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

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

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