百度360必应搜狗淘宝本站头条
php redisredis 命令oracle位图索引redis 锁启动 redis
当前位置：网站首页 > 技术教程 > 正文

37【源码】数据可视化:基于 Echarts + Python 动态实时大屏

mhr18 2025-06-15 17:38 23 浏览 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。

相关推荐

Java面试题及答案总结(2025版)

大家好，我是Java面试陪考员最近很多小伙伴在忙着找工作，给大家整理了一份非常全面的Java面试题及答案。涉及的内容非常全面，包含：Redis、Linux、SpringBoot、Spring、MySQ...

Java面试题及答案最全总结(2025春招版)

大家好，我是Java面试分享最近很多小伙伴在忙着找工作，给大家整理了一份非常全面的Java面试题及答案。涉及的内容非常全面，包含：Spring、MySQL、JVM、Redis、Linux、Spring...

Java面试题及答案最全总结(2025版持续更新)

大家好，我是Java面试陪考员最近很多小伙伴在忙着找工作，给大家整理了一份非常全面的Java面试题及答案。涉及的内容非常全面，包含：Spring、MySQL、JVM、Redis、Linux、Sprin...

蚂蚁金服面试题(附答案)建议收藏:经典面试题解析

前言最近编程讨论群有位小伙伴去蚂蚁金服面试了，以下是面试的真题，跟大家一起来讨论怎么回答。点击上方“捡田螺的小男孩”，选择“设为星标”，干货不断满满1.用到分布式事务嘛?为什么用这种方案,有其他方案...

测试工程师面试必问的十道题目!全答上来的直接免试

最近参加运维工程师岗位的面试，笔者把自己遇到的和网友分享的一些常见的面试问答收集整理出来了，希望能对自己和对正在准备面试的同学提供一些参考。一、Mongodb熟悉吗，一般部署几台？部署过，没有深入研究...

10次面试9次被刷?吃透这500道大厂Java高频面试题后，怒斩offer

很多Java工程师的技术不错，但是一面试就头疼，10次面试9次都是被刷，过的那次还是去了家不知名的小公司。问题就在于：面试有技巧，而你不会把自己的能力表达给面试官。应届生：你该如何准备简历，面试项目和...

java高频面试题整理

【高频常见问题】1、事务的特性原子性：即不可分割性，事务要么全部被执行，要么就全部不被执行。一致性或可串性：事务的执行使得数据库从一种正确状态转换成另一种正确状态隔离性：在事务正确提交之前，不允许把该...

2025 年最全 Java 面试题，京东后端面试面经合集，答案整理

最近京东搞了个TGT计划，针对顶尖青年技术天才，直接宣布不设薪资上限。TGT计划面向范围包括2023年10月1日到2026年9月30日毕业的海内外本硕博毕业生。时间范围还...

idGenerator测评

工作中遇到需要生成随机数的需求，看了一个个人开发的基于雪花算法的工具，今天进行了一下测评（测试）。idGenerator项目地址见：https://github.com/yitter/IdGenera...

2024年开发者必备:MacBook Pro M1 Max深度体验与高效工作流

工作机器我使用的是一台16英寸的MacBookProM1Max。这台电脑的表现堪称惊人！它是我用过的最好的MacBook，短期内我不打算更换它。性能依然出色，即使在执行任务时也几乎听不到风扇的...

StackOverflow 2022 年度调查报告

一个月前，StackOverflow开启了2022年度开发者调查，历时一个半月，在6月22日，StackOverflow正式发布了2022年度开发者调查报告。本次报告StackO...

这可能是最全面的SpringDataMongoDB开发笔记

MongoDB数据库，在最近使用越来越广泛，在这里和Java的开发者一起分享一下在Java中使用Mongodb的相关笔记。希望大家喜欢。关于MongoDB查询指令，请看我的上一篇文章。SpringD...

Mac M2 本地部署ragflow

修改配置文件Dockerfile文件ARGNEED_MIRROR=1//开启国内镜像代理docker/.envREDIS_PORT=6380//本地redis端口冲突RAGFLOW_IMA...

别再傻傻分不清!localhost、127.0.0.1、本机IP，原来大有讲究!

调试接口死活连不上？部署服务队友访问不了？八成是localhost、127.0.0.1、本机IP用混了！这三个看似都指向“自己”的东西，差之毫厘谬以千里。搞不清它们，轻则调试抓狂，重则服务裸奔。loc...

我把 Mac mini 托管到机房了:一套打败云服务器的终极方案

我把我积灰的Macmini托管到机房了，有图有真相。没想到吧？一台在家吃灰的苹果电脑，帮我省了大钱！对，就是控制了自己的服务器，省了租用云服务器的钱，重要数据还全捏在自己手里，这感觉真爽。你可...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
赣ICP备2024040476号-7