36【源码】数据可视化:基于 Echarts + Python 动态实时大屏 - 连锁餐饮店数据看板

效果图展示

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

  • 0
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
28「源码数据可视化:基于 echarts flask 动态实时大屏 - 数据分析,是一种数据可视化的展示方式,通过将数据转换为图形化的形式,使数据更加直观、易于理解和分析。 该方案采用 echarts 和 flask 这两种技术进行数据可视化的展示。Echarts 是一个基于 JavaScript 的开源可视化库,它提供了丰富的图表类型和交互式的功能,可以满足各种的数据可视化需求。Flask 是 Python 语言中的一个轻量级 Web 框架,它提供了构建 Web 应用的基础框架,同时也可以与其他库和插件进行组合使用,实现更加复杂的功能。 在该方案中,数据从后端数据库中获取,并通过 flask 的模板语言进行处理,然后通过 echarts 绘制出各种类型的图表。整个展示过程通过 WebSocket 技术实现动态更新,大屏幕的内容会实时更新,保障时效性和准确性。同时,在页面设计上也注重视觉效果和用户体验,数据展示界面简洁明了,显示效果清晰美观。 该方案可以被广泛应用于各种需要进行数据可视化展示的领域,例如企业经营数据分析、科学研究领域的数据可视化、金融、航空、物流等领域的数据分析等。由于使用的技术基础较为简单,对于开发人员来说,也具有较高的可拓展性和可维护性。因此,它是一种非常实用的数据可视化方案,可以为用户提供更好的数据分析和决策支持。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

YYDataV数据可视化

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值