当前位置：首页 > news >正文

35【源码】数据可视化：基于 Echarts + Python 动态实时大屏 - 门店销售业绩数据中心

news 来源：原创 2024/5/2 22:51:58

效果图展示

1.动态实时更新数据效果图

说明: 其中 总销售额，折扣率，完成率，售罄率，同比，商品销售排名 做了动态实时更新处理。

2.静态切片效果图

一、确定需求方案

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

本案例基于16:9 屏宽比，F11全屏显示。

2、部署方式

基于免安装可执行程序：支持Windows、Linux、Mac等各种操作系统；将程序复制到服务器上即可，无需其它环境依赖；

观看方式：既可在服务器上直接观看程序界面，也可在远程用浏览器打开播放，例如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 class="header">
        <div class="title">
            <span>奶茶门店销售业绩数据中心</span>
        </div>
        <div class="time">
            <span></span>
        </div>
        <div class="company">
            <span>深圳市</span>
            <span>一杯奶茶</span>
        </div>
    </div>

    <!-- 主题模块 -->
    <div class="main">
        <div class="animate">
            <!-- 浮动层 -->
            <div class="float">
                <div class="floating1">
                    <div id="roate1">
                        <div class="roate-item">
                            <p>1111</p>
                            <span>销售额</span>
                        </div>
                        <div class="roate-item">
                            <p>0.7%</p>
                            <span>同比</span>
                        </div>
                        <div class="roate-item">
                            <p>77%</p>
                            <span>完成率</span>
                        </div>
                    </div>
                    <p class="pm">孙一付</p>
                </div>
                <div class="floating2">
                    <div id="roate2">
                        <div class="roate-item2">
                            <p>2222</p>
                            <span>销售额</span>
                        </div>
                        <div class="roate-item2">
                            <p>0.6%</p>
                            <span>同比</span>
                        </div>
                        <div class="roate-item2">
                            <p>66%</p>
                            <span>完成率</span>
                        </div>
                    </div>
                    <p class="pm2">赵二开</p>
                </div>
                <div class="floating3">
                    <div id="roate3">
                        <div class="roate-item3">
                            <p>12356</p>
                            <span>销售额</span>
                        </div>
                        <div class="roate-item3">
                            <p>0.5%</p>
                            <span>同比</span>
                        </div>
                        <div class="roate-item3">
                            <p>555%</p>
                            <span>完成率</span>
                        </div>
                    </div>
                    <p class="pm3">王工</p>
                </div>
                <div class="floating4">
                    <div id="roate4">
                        <div class="roate-item4">
                            <p>12356</p>
                            <span>销售额</span>
                        </div>
                        <div class="roate-item4">
                            <p>0.4%</p>
                            <span>同比</span>
                        </div>
                        <div class="roate-item4">
                            <p>44%</p>
                            <span>完成率</span>
                        </div>
                    </div>
                    <p class="pm4">李工</p>
                </div>
                <div class="floating5">
                    <div id="roate5">
                        <div class="roate-item5">
                            <p>12356</p>
                            <span>销售额</span>
                        </div>
                        <div class="roate-item5">
                            <p>0.3%</p>
                            <span>同比</span>
                        </div>
                        <div class="roate-item5">
                            <p>33%</p>
                            <span>完成率</span>
                        </div>
                    </div>
                    <p class="pm5">张工</p>
                </div>
            </div>
            <div class="sum">
                <div class="data">
                    <p>总销售额</p>
                    <span id="sell_total">2621526</span>
                </div>
                <div class="cicle1"></div>
                <canvas id="canvas1"></canvas>
                <canvas id="canvas2"></canvas>
                <div class="data1">
                    <div class="qiu">
                        <p id="qiu1">1%</p>
                    </div>
                    <span>折扣率</span>
                </div>
                <div class="data2">
                    <div class="qiu">
                        <p id="qiu2">2%</p>
                    </div>
                    <span>售罄率</span>
                </div>
                <div class="data3">
                    <div class="qiu">
                        <p id="qiu3">3%</p>
                    </div>
                    <span>完成率</span>
                </div>
                <div class="data4">
                    <div class="qiu">
                        <p id="qiu4">4%</p>
                    </div>
                    <span>同比</span>
                </div>
            </div>
        </div>
        <div class="charts">
            <div class="charts1">
                <div class="charts-title">
                    <span>产品销售情况分析</span>
                </div>
                <div id="container_sale" class="charts-content1 content"></div>
            </div>
            <div class="charts2">
                <div class="charts-title">
                    <span>商品销售排名</span>
                </div>
                <div class="charts-content2 content">
                    <table>
                        <thead>
                            <tr>
                                <td>排名</td>
                                <td>门店</td>
                                <td>销售额</td>
                                <td>完成情况</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>01</td>
                                <td>东门门店</td>
                                <td id="sell1">25947元</td>
                                <td id="percent1" style="color: #dbbd73">85%<span class="chart1"></span></td>
                            </tr>
                            <tr>
                                <td>02</td>
                                <td>老街门店</td>
                                <td id="sell2">25947元</td>
                                <td id="percent2" style="color: #4bd8ba">85%<span class="chart2"></span></td>
                            </tr>
                            <tr>
                                <td>03</td>
                                <td>华强门店</td>
                                <td id="sell3">25947元</td>
                                <td id="percent3" style="color: #4bd8ba">85%<span class="chart3"></span></td>
                            </tr>
                            <tr>
                                <td>04</td>
                                <td>上步门店</td>
                                <td id="sell4">25947元</td>
                                <td id="percent4" style="color: #4bd8ba">85%<span class="chart4"></span></td>
                            </tr>
                            <tr>
                                <td>05</td>
                                <td>下沙门店</td>
                                <td id="sell5">25947元</td>
                                <td id="percent5" style="color: #dbbd73">85%<span class="chart5"></span></td>
                            </tr>
                            <tr>
                                <td>06</td>
                                <td>南山门店</td>
                                <td id="sell6">25947元</td>
                                <td id="percent6" style="color: #4bd8ba">85%<span class="chart6"></span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </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. 后端 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)