近來(lái)deepseek爆火，看看deepseek能否幫我們快速實(shí)現(xiàn)數(shù)據(jù)看板實(shí)時(shí)更新。

可以看出這對(duì)不知道怎么動(dòng)手的小白來(lái)說(shuō)是相當(dāng)友好的，尤其是它的思考路徑，可以讓我們立馬理清頭緒，明確了動(dòng)作，但是具體的動(dòng)作執(zhí)行，看了Deepseek給的代碼，對(duì)于小白來(lái)說(shuō)難度就有點(diǎn)大了，今天我們手把手教大家實(shí)現(xiàn)。

業(yè)務(wù)數(shù)據(jù)看板自動(dòng)定時(shí)刷新

數(shù)據(jù)看板、儀表盤(pán)的設(shè)計(jì)和實(shí)現(xiàn)需要熟悉企業(yè)的業(yè)務(wù)，掌握指標(biāo)的設(shè)計(jì)方法，這些內(nèi)容在教材中有詳細(xì)的介紹。本文作為教材的補(bǔ)充拓展給大家介紹一下如何基于Python工具包Pyecharts實(shí)現(xiàn)可視化看板，并實(shí)現(xiàn)看板實(shí)時(shí)刷新。最終效果如下圖所示：

在CDA LEVELⅠ教材中多次提到數(shù)據(jù)看板和儀表盤(pán),如P151

Pyecharts的基本使用在之前的文章中已有介紹，不熟悉Pyecharts的小伙伴可以參考一下：【干貨】數(shù)據(jù)可視化很難？不存在的！一文弄懂PyEcharts可視化技術(shù)。接下來(lái)我們分步驟講解如何實(shí)現(xiàn)這個(gè)看板。

統(tǒng)一各個(gè)圖形風(fēng)格

在Pyecharts中常見(jiàn)的圖表可以通過(guò)設(shè)置統(tǒng)一的主題實(shí)現(xiàn)各個(gè)圖形風(fēng)格一致，但是一些HTML組件是無(wú)法設(shè)置主題的，這里我們用到了table組件，需要手動(dòng)設(shè)置。例如這里我統(tǒng)一使用Pyecharts中的ThemeType.DARK主題，那么表的背景顏色需與它一致。不同版本相同風(fēng)格對(duì)應(yīng)的顏色可能是不一樣的，需要先試試具體的顏色效果，然后通過(guò)一些取色器獲取顏色編碼(顏色設(shè)置的源碼在echarts下，看源碼比較麻煩)。例如PPT、一些截圖工具(Snipaste)都可以。

# 導(dǎo)入主題模塊
from pyecharts.globals import ThemeType
from pyecharts.charts import Bar 
import pyecharts.options as opts 
bar = Bar(init_opts=opts.InitOpts(theme=ThemeType.DARK))
bar.add_xaxis(["2021","2022","2023","2024","2025"])
bar.add_yaxis("A組銷售額",y_axis=[1000,3000,2500,4000,3900])
bar.render_notebook()

通過(guò)取色工具獲取顏色RGB編碼為：'#100c2a'，因此將table組件的背景顏色做如下設(shè)置

table_color =  '#100c2a' 

其余圖形如地圖、餅圖、儀表盤(pán)在創(chuàng)建圖形時(shí)基于init_opts=opts.InitOpts(theme=ThemeType.DARK)設(shè)置即可。

設(shè)計(jì)看板的布局

接下來(lái)如何將多個(gè)圖表按照自定義的位置進(jìn)行布局呢？pyecharts中的Page圖表可以實(shí)現(xiàn)該功能，其基本原理是將各個(gè)單獨(dú)的圖形組合在一個(gè)Page上。其使用方式如下：

from pyecharts.charts import Page

# 初始化Page對(duì)象
page = Page(page_title="零售數(shù)據(jù)大屏", # 網(wǎng)頁(yè)的標(biāo)題
            layout=Page.DraggablePageLayout # 布局采用拖拽式設(shè)定
           ) 

# 將各個(gè)圖形對(duì)象添加到Page中
page.add(get_table(["零售數(shù)據(jù)分析大屏"],[]),       # html表
         get_table(header,rows),                  # html表
         get_map(data),                           # 地圖
         get_bar(data),                           # 柱狀圖
         get_pie(data),                           # 餅圖1
         get_pie(data,dim="類別",chart_id="pie2"), # 餅圖2
         get_pie(data,dim="細(xì)分",chart_id="pie3")  # 餅圖3
        )

page.render() # 渲染成render.html網(wǎng)頁(yè)文件

首次生成的網(wǎng)頁(yè)文件中各個(gè)圖形是從上往下順序排列的，我們可以根據(jù)需要使用鼠標(biāo)拖拽各個(gè)模塊，使其布局符合要求。

當(dāng)布局調(diào)整好以后可以單擊左上角的Save Config按鈕保存圖形的布局信息為json文件。不然拖拽的效果只是臨時(shí)性的。

最后根據(jù)配置文件重新渲染網(wǎng)頁(yè)文件

# 根據(jù)調(diào)整后的模板 重新渲染圖形
Page.save_resize_html(
 cfg_file="chart_config.json", # 之前保存的圖形的布局信息json文件
 dest="零售數(shù)據(jù)大屏.html"       # 重新渲染后的html文件存儲(chǔ)位置
)

這樣我們就得到了一個(gè)靜態(tài)的網(wǎng)頁(yè)，如果想要?jiǎng)討B(tài)的可以自動(dòng)刷新還需編寫(xiě)后端程序。

前后端分離定時(shí)更新看板

PyEcharts官網(wǎng)有相關(guān)前后端分離的demo,不過(guò)只涉及單張圖，我們基于官網(wǎng)提供的方案并按照我們的實(shí)際需求做進(jìn)一步改造適應(yīng)我們的看板。我們分別從前端、后端兩側(cè)來(lái)做，前端、后端屬于開(kāi)發(fā)領(lǐng)域的知識(shí)，前端主要指網(wǎng)頁(yè)側(cè)，實(shí)現(xiàn)與用戶的交互。后端實(shí)現(xiàn)應(yīng)用的核心邏輯，涉及數(shù)據(jù)的處理、對(duì)網(wǎng)頁(yè)請(qǐng)求的響應(yīng)。

前端

前端主動(dòng)向后端進(jìn)行數(shù)據(jù)刷新，定時(shí)刷新的核心在于 HTML 的 setInterval 方法。網(wǎng)頁(yè)中主要元素都存儲(chǔ)在各個(gè)div標(biāo)簽中，我們對(duì)"零售數(shù)據(jù)大屏.html"這個(gè)文件中的各個(gè)圖表div標(biāo)簽進(jìn)行改造。如何識(shí)別div與圖的對(duì)應(yīng)關(guān)系呢，div中有個(gè)id屬性，我們可以根據(jù)div的id值確定。之前保存的"chart_config.json"文件中有各個(gè)圖形的id信息。

[{"cid":"96cb9e7ba9cc4be69fab9491ab1225e2","width":"1495.4px","height":"68.4px","top":"31.399999618530273px","left":"8px"},
{"cid":"31325b2a450a491aa64498c9708e5fc2","width":"1495.4px","height":"92.4px","top":"78.80000305175781px","left":"8px"},
{"cid":"map1","width":"650.4px","height":"350.4px","top":"170px","left":"116px"},
{"cid":"bar1","width":"628.4px","height":"350.4px","top":"170px","left":"766px"},
{"cid":"pie_1","width":"426.4px","height":"350.4px","top":"520px","left":"116px"},
{"cid":"pie2","width":"426.4px","height":"350.4px","top":"520px","left":"541px"},
{"cid":"pie3","width":"426.4px","height":"350.4px","top":"520px","left":"967px"}]

這里cid就是將來(lái)網(wǎng)頁(yè)中相應(yīng)div的id,后面的"width","height","top","left"則是圖形在網(wǎng)頁(yè)中的位置信息。pyecharts中的html組件id是隨機(jī)的，例如前兩個(gè)cid是table的，后續(xù)的5個(gè)是地圖、柱狀圖、餅圖等，這些是可以手動(dòng)設(shè)置的，在繪圖時(shí)設(shè)置即可,以餅圖代碼為例：

def get_pie(data,dim="地區(qū)",value="銷售額",chart_id="pie_1"):
    
    from pyecharts.charts import Pie
    # 下面的chart_id參數(shù)就是設(shè)置圖形id的，可以自行設(shè)置各種id值，別的圖形也是這樣設(shè)置
    pie = Pie(init_opts=opt.InitOpts(theme=theme_config,width=f"{pie_w}px",height="350px",chart_id=chart_id)) 
    data = data.groupby(dim,as_index=False)[value].sum()
    pie.add("",data_pair=data.values.tolist(),center=["50%","55%"])
    pie.set_global_opts(title_opts=opt.TitleOpts(title=f"各{dim}{value}占比-餅圖",pos_right='center'),
                       legend_opts=opt.LegendOpts(pos_left="right",orient="vertical"))
    pie.set_series_opts(label_opts=opt.LabelOpts(formatter="n------ngeybsqlxm7mc%")) 
    return pie 

在知道定位div的依據(jù)后，我們可以在記事本中編輯，例如編輯table組件：我們需要在tbody下的tr中存儲(chǔ)一行數(shù)據(jù)，給tr設(shè)置一個(gè)id 方便后續(xù)函數(shù)定位標(biāo)簽并動(dòng)態(tài)修改標(biāo)簽內(nèi)容。script標(biāo)簽中的內(nèi)容為JavaScript代碼，是實(shí)現(xiàn)自動(dòng)刷新的核心。這里面的函數(shù)會(huì)像"http://127.0.0.1:5000/api/data"發(fā)送請(qǐng)求獲取數(shù)據(jù)，并根據(jù)返回的數(shù)據(jù)更新table中的數(shù)值。setInterval(fetchapiData, 5000);中的5000表示每5000ms更新一次。代碼如下：

<div id="31325b2a450a491aa64498c9708e5fc2" class="chart-container" style="position: absolute; width: 1495.4px; height: 75px; top: 78.80000305175781px; left: 8px;">
            <p class="title" style="font-size: 0px; font-weight:bold;" > </p>
            <p class="subtitle" style="font-size: 0px;" > </p>
            <table align="center" style="text-align:center;background:#333333; width:1278px; height:50px; font-size:25px; color:#C0C0C0;padding:0px;">
                <thead>
                    <tr>
                        <th>銷售額</th>
                        <th>利潤(rùn)</th>
                        <th>利潤(rùn)率</th>
                        <th>訂單數(shù)</th>
                        <th>平均折扣</th>
                        <th>客單價(jià)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="tr_data">
                        
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            $(
            function () {
                fetchapiData();
                setInterval(fetchapiData, 5000);// 每5秒執(zhí)行一次fetchapiData函數(shù)
            }
            );

            function fetchapiData() {
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/api/data",
                    dataType: 'json',
                    success: function (data) {
                        document.getElementById('tr_data').innerHTML = `
                        <td>${data.sales}</td>
                <td>${data.profit}</td>
                <td>${data.profit_margin}</td>
                <td>${data.orders}</td>
                <td>${data.discount}</td>
                <td>${data.average_order_value}</td>
                `;
                    }
                });
            }
        </script>

我們?cè)倏匆幌嘛瀳D的前端改造,與table類似，只是請(qǐng)求的鏈接"http://127.0.0.1:5000/chart_map1"略有不同。

   <div id="map1" class="chart-container" style="position: absolute; width: 650.4px; height: 351.4px; top: 153px; left: 116px;"></div>
        <script>
            var chart_map1 = echarts.init(
                document.getElementById('map1'), 'dark', {renderer: 'canvas'});// 根據(jù)id定位div，并初始化圖表
            $(
                function () {
                    fetchData1(chart_map1);                                   // 調(diào)用刷新圖形函數(shù)更新圖形
                    setInterval(fetchData1, 5000);// 每5秒執(zhí)行一次刷新圖形函數(shù)
                }
            );
            // 刷新圖形函數(shù)定義
            function fetchData1() {
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:5000/chart_map1",
                    dataType: 'json',
                    success: function (result) {
                        chart_map1.setOption(result);
                    }
                });
            }
            
        </script>

其他的圖形也是類似改造，最后將改完的html文件存放到templates文件夾中。

后端

后端開(kāi)發(fā)使用Python中的Flask這個(gè)模塊，核心代碼如下：

from flask import Flask
from flask import jsonify,render_template

app = Flask(__name__, static_folder="templates")

@app.route("/")
def index():
    return render_template("零售數(shù)據(jù)大屏.html")

@app.route("/chart_map1")
def get_chart_map1():
    c = get_map(data.sample(np.random.randint(*number_range,1)[0]))
    return c.dump_options_with_quotes()

@app.route("/chart_gauge_1")
def get_chart_gauge_1():
    c = get_gauge(data.sample(np.random.randint(*number_range,1)[0]))
    return c.dump_options_with_quotes()

@app.route("/chart_pie_1")
def get_chart_pie_1():
    c = get_pie(data.sample(np.random.randint(*number_range,1)[0]))
    return c.dump_options_with_quotes()

@app.route("/chart_pie_2")
def get_chart_pie_2():
    c = get_pie(data.sample(np.random.randint(*number_range,1)[0]),dim="類別")
    return c.dump_options_with_quotes()

@app.route("/chart_pie_3")
def get_chart_pie_3():
    c = get_pie(data.sample(np.random.randint(*number_range,1)[0]),dim="細(xì)分")
    return c.dump_options_with_quotes()

@app.route('/api/data', methods=['GET'])
def get_data():
    da = data.sample(np.random.randint(*number_range,1)[0])
    rows =  {"sales":f"{da.銷售額.sum()/10000:.2f} 萬(wàn)元",
             "profit":f"{da.利潤(rùn).sum()/10000:.2f} 萬(wàn)元",
             "profit_margin":f"{da.利潤(rùn).sum()/da.銷售額.sum():.2%}",
             "orders":da.shape[0],
             "discount":f"{da.折扣.mean():.2%}",
             "average_order_value":f"{round(da.銷售額.sum()/da.shape[0],2):.2f}"}
    return jsonify(rows)

if __name__ == "__main__":
    app.run()

代碼首先初始化web應(yīng)用對(duì)象app,后續(xù)使用裝飾器@app.route()對(duì)各種請(qǐng)求設(shè)置了相應(yīng)的響應(yīng)函數(shù)。需要說(shuō)明的是響應(yīng)函數(shù)中使用的dump_options_with_quotes()函數(shù)會(huì)將pyecharts的圖形對(duì)象的參數(shù)序列化為json返回到前端頁(yè)面，前端中的charts通過(guò)setOption函數(shù)解析json變成圖表的前端形式，例如：chart_map1.setOption(result)中result就是后端發(fā)送到前端的json數(shù)據(jù)。為了模擬數(shù)據(jù)的變化，后端代碼中使用了pandas的sample對(duì)dataframe隨機(jī)抽取實(shí)現(xiàn)圖表顯示的變化，實(shí)際工作中一般會(huì)通過(guò)查詢數(shù)據(jù)庫(kù)中的數(shù)據(jù)實(shí)現(xiàn)實(shí)時(shí)更新圖形。最后啟動(dòng)后端程序(python執(zhí)行后端程序代碼文件)，然后在瀏覽器輸入'http://127.0.0.1:5000'即可查看動(dòng)態(tài)看板。

以上就是基于Python實(shí)現(xiàn)動(dòng)態(tài)看板的核心點(diǎn)

抓住機(jī)遇，狠狠提升自己

隨著各行各業(yè)進(jìn)行數(shù)字化轉(zhuǎn)型，數(shù)據(jù)分析能力已經(jīng)成了職場(chǎng)的剛需能力，這也是這兩年CDA數(shù)據(jù)分析師大火的原因。和領(lǐng)導(dǎo)提建議再說(shuō)“我感覺(jué)”“我覺(jué)得”，自己都覺(jué)得心虛，如果說(shuō)“數(shù)據(jù)分析發(fā)現(xiàn)……”，肯定更有說(shuō)服力。想在職場(chǎng)精進(jìn)一步還是要學(xué)習(xí)數(shù)據(jù)分析的，統(tǒng)計(jì)學(xué)、概率論、商業(yè)模型、SQL，Python還是要會(huì)一些，能讓你工作效率提升不少。備考CDA數(shù)據(jù)分析師的過(guò)程就是個(gè)自我提升的過(guò)程。

CDA 考試官方報(bào)名入口:https://www.cdaglobal.com/pinggu.html