当前位置：网站首页 > 技术资源 > 正文

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

moboyou 2025-07-21 17:24 2 浏览

效果图展示

动态效果演示

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代码 - 页面布局主要基于div

<body>
    <div id="loader"></div>
    <script type="text/javascript">
        $('#loader').shCircleLoader({color: "#00deff"});
    </script>
    <!--Top Start!-->
    <div class="scanboardWp animsition">
        <div id="top">
            <div class="wp clearfix">
                <div class="left pageTit">
                </div>
                <div class="center topLogo">
                    <h1 style="color: whitesmoke; font-weight: bolder; font-size: x-large; ">汉堡炸鸡奶茶连锁餐饮店数据看板</h1>
                </div>
                <div class="right topBar">
                    <div class="topTime">时间加载中...</div>
                    <div class="clearfix">
                        <a href="index.html" class="signOut fr">退出</a>
                        <div class="company fr">
                            <h3 >资源推荐</h3>
                            <div class="dropdown">
                                <a href="https://blog.csdn.net/lildkdkdkjf/category_11398372.html">定制开发案例</a>
                                <a href="https://blog.csdn.net/lildkdkdkjf/category_9999313.html">可视化模板精选</a>
                                <a href="https://blog.csdn.net/lildkdkdkjf/category_11848863.html">智慧天气系统</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Top End!-->
        
        <!--Main Start!-->
        <div id="main" class="wp clearfix">
            <div class="left">
                <!--今日订单概览-->
                <div class="item waybill">
                    <div class="itemTit">
                        <span class="border-yellow">今日订单概览</span>
                    </div>
                    <div class="itemCon itembg">
                        <div class="progress" progress="80%">
                            <h3 class="clearfix"><span>滿意单</span><i id="normal">80单</i></h3>
                            <div class="progressBar">
                                <span></span>
                            </div>
                            <h4>0%</h4>
                        </div>
                        <div class="progress" progress="15%">
                            <h3 class="clearfix"><span>无评价单</span><i id="temporary">15单</i></h3>
                            <div class="progressBar">
                                <span></span>
                            </div>
                            <h4>0%</h4>
                        </div>
                        <div class="progress" progress="5%">
                            <h3 class="clearfix"><span>差评单</span><i id="abnormal">5单</i></h3>
                            <div class="progressBar">
                                <span></span>
                            </div>
                            <h4>0%</h4>
                        </div>
                    </div>
                </div>

                <!--各阶段平均用时统计-->
                <div class="item">
                    <div class="itemTit">
                        <span class="border-green">顾客平均用餐时间</span>
                    </div>
                    <div class="itemCon">
                        <ul class="listStyle">
                            <li class="clearfix">
                                <span>排队</span>
                                <span><strong>5</strong>分钟</span>
                            </li>
                            <li class="clearfix">
                                <span>用餐</span>
                                <span><strong>34</strong>分钟</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!--人员信息-->
                <div class="item">
                    <div class="itemTit">
                        <span class="border-blue">餐厅运作用时</span>
                    </div>
                    <div class="itemCon itembg">
                        <ul class="listStyle">
                            <li class="clearfix">
                                <span>每日开业打扫卫生</span>
                                <span><strong>30</strong>分钟</span>
                            </li>
                            <li class="clearfix">
                                <span>每日备料时间</span>
                                <span><strong>50</strong>分钟</span>
                            </li>
                            <li class="clearfix">
                                <span>每单制作时间</span>
                                <span><strong>5</strong>分钟</span>
                            </li>
                            <li class="clearfix">
                                <span>每单等待清理时间</span>
                                <span><strong>4</strong>分钟</span>
                            </li>
                            <li class="clearfix">
                                <span>每单清理垃圾</span>
                                <span><strong>5</strong>分钟</span>
                            </li>
                            <li class="clearfix">
                                <span>每日打烊打扫卫生</span>
                                <span><strong>50</strong>分钟</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="center">
                <div class="centerWp">
                    <!--中间大地图 高德-->
                    <div class="mapContainer">
                        <div class="btnLayer">
                            <div class="search">
                                <div class="searchInner">
                                    <a href="javascript:;" class="searchBtn"><span class="icoSearch"></span></a>
                                    <form class="searchForm">
                                        <button class="icoSearch"></button>
                                        <input type="text" name="" placeholder="请搜索门店">
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div id="myMap" class="item"></div>
                    </div>
                    
                    <!--日订量趋势图-->
                    <div class="billChart">
                        <div class="itemTit">
                            <span class="border-red">日订量趋势图</span>
                        </div>
                        <div id="myChart1" ></div>
                    </div>
                </div>
            </div>

            <div class="right">
                <!--总计运单数-->
                <div class="item total itembg">
                    <div class="itemTit">
                        <span class="border-yellow">总计订单数</span>
                    </div>
                    <div class="itemCon">
                        <div class="totalNum"><strong id="totalNum" total="1234">0</strong><span>单</span></div>
                    </div>
                </div>

                <!--实时订单状态-->
                <div class="item basicInfo">
                    <div class="itemTit">
                        <span class="border-green">实时订单状态</span>
                    </div>
                    <div class="itemCon itembg">
                        <div class="infoPie">
                            <ul class="clearfix">
                                <li class="color-green">
                                    <span class="border-green" id="indicator2" total="65">0</span>
                                    <p>已完成</p>
                                </li>
                                <li class="color-yellow">
                                    <span class="border-yellow" id="indicator1" total="32">0</span>
                                    <p>正在制作中</p>
                                </li>
                            
                                <li class="color-blue">
                                    <span class="border-blue" id="indicator3" total="5">0</span>
                                    <p>排队中</p>
                                </li>
                            </ul>
                            <div id="indicatorContainer"></div>
                        </div>
                    </div>
                </div>

                <!--订单列表-->
                <div class="item basicInfo" >
                    <div class="itemTit">
                        <span class="border-blue">订单列表</span>
                    </div>
                    <div class="itemCon itembg" id="vue_app">
                        <dv-scroll-board :config="config" style="height:220px"/>
                    </div>
                </div>
            </div>
        </div>
        <!--Main End!-->
    </div>
</body>

2. 前端JS -echarts图表

function init_echart_bar_ROA(container) {
    var chartDom = document.getElementById(container);
    var myChart = echarts.init(chartDom, window.gTheme);
    var option;

    option = {
        title: {
            // text: "资产负债率",
            //top: "5%",
            //left: "2%",
            textStyle: {
                // color: "#00ffff",
                fontSize: "16",
            },
        },
        grid: {
            left: "3%",
            right: "15%",
            bottom: "10%",
            top: "20%",
            containLabel: true,
        },
        tooltip: {
            trigger: "item",
            formatter: "{b}日: {c} 亿元",
            position: function (p) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            },
        },
        xAxis: {
            name: "日期",
            type: "category",
            nameTextStyle: {
                color: "rgba(255,255,255,.8)",
                fontSize: 12,
            },
            data: [],
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.8)",
                    fontSize: 14,
                },
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.2)",
                },
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                },
            },
        },
        yAxis: {
            name: "%",
            type: "value",
            min: 0,
            max: 100,
            nameTextStyle: {
                color: "rgba(255,255,255,.8)",
                fontSize: 12,
            },
            axisLabel: {
                textStyle: {
                    color: "rgba(255,255,255,.8)",
                    fontSize: 14,
                },
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.2)",
                },
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.1)",
                },
            },
        },
        series: [
            {
                data: [],
                type: "bar",
                showBackground: true,
                backgroundStyle: {
                    color: "rgba(180, 180, 180, 0.2)",
                },
            },
        ],
    };

    option && myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
}

3. 前端JS - 数据定时更新控制

支持在每个echarts图表中独立控制定时更新的间隔。

  var container = "container_sale";
    init_echart_bar_ROA(container);
    // 定时1s执行数据更新函数
    setInterval(function () {
        async_echart_bar_ROA(container, path_bar_ROA + "bar_ROA.json");
    }, 1000);

4. 前端高德地图

//高德地图
    var myMap = new AMap.Map('myMap',{
        resizeEnable: true,
        zoom: 14,
        mapStyle: 'amap://styles/darkblue',
        center: [113.752171,23.068716],
    });
    
    var point = [
        [113.752171,23.068716],
        [113.759037,23.072046],
        [113.73788,23.061257]
    ]
    var maker;
    for (var i = 0; i < point.length; i += 1) {
        var marker = new AMap.Marker({
            position: point[i],
            map: myMap,
            icon:'images/s_ico.png',
        });
        marker.content='<p>炸鸡汉堡 - 麻涌分店</p>'+
                '<p>好评率：95%</p>'+
                '<p>诚信经营：10年</p>';
        marker.on('click', markerClick);
        //map.setFitView(); 
    }
    var infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(16, -36)
    });

后端 Python Flask 代码


app = Flask(__name__, static_folder="static", template_folder="template")


@app.route('/')
def index():
    return redirect('/static/index.html')


# 主程序在这里
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案例

六、源码下载

36源码数据可视化：基于 Echarts + Python 动态实时大屏 - 连锁餐饮店订单数据看板.zip

https://download.csdn.net/download/lildkdkdkjf/87513373

mysql数据库源码

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

效果图展示

动态效果演示

2.静态切片效果图

一、确定需求方案

1.确定产品上线部署的屏幕LED分辨率

2.部署方式

二、整体架构设计

三、编码实现（关键代码）

1.前端html代码 - 页面布局主要基于div

2. 前端JS -echarts图表

3. 前端JS - 数据定时更新控制

4. 前端高德地图

四、运行效果

五、更多案例

六、源码下载

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

oracle常见问题处理

MYSQL经典面试题汇总

医院信息系统突发应急演练记录

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

苹果停止更新Windows版QuickTime!

Linux下开源BI工具Metabase本地化安装及配置详解

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

效果图展示

动态效果演示

2.静态切片效果图

一、确定需求方案

1.确定产品上线部署的屏幕LED分辨率

2.部署方式

二、整体架构设计

三、编码实现 （关键代码）

1.前端html代码 - 页面布局主要基于div

2. 前端JS -echarts图表

3. 前端JS - 数据定时更新控制

4. 前端高德地图

四、运行效果

五、更多案例

六、源码下载

相关推荐

Linux环境中查看Oracle错误和警告日志信息

絮语----工作四年的碎碎念

SQL 中的 (+)用法

oracle常见问题处理

MYSQL经典面试题汇总

医院信息系统突发应急演练记录

Windows 11:已知问题和已解决问题列表(更新时间:2022年1月)

最全面的IBMS系统集成系统技术规格书，赶紧收藏起来!

苹果停止更新Windows版QuickTime!

Linux下开源BI工具Metabase本地化安装及配置详解

三、编码实现（关键代码）