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

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

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

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

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

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

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

在Pyecharts中常見的圖表可以通過設(shè)置統(tǒng)一的主題實現(xiàn)各個圖形風(fēng)格一致，但是一些HTML組件是無法設(shè)置主題的，這里我們用到了table組件，需要手動設(shè)置。例如這里我統(tǒng)一使用Pyecharts中的ThemeType.DARK主題，那么表的背景顏色需與它一致。不同版本相同風(fēng)格對應(yīng)的顏色可能是不一樣的，需要先試試具體的顏色效果，然后通過一些取色器獲取顏色編碼(顏色設(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()

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

table_color =  '#100c2a' 

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

設(shè)計看板的布局

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

from pyecharts.charts import Page

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

# 將各個圖形對象添加到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="細分",chart_id="pie3")  # 餅圖3
        )

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

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

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

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

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

這樣我們就得到了一個靜態(tài)的網(wǎng)頁，如果想要動態(tài)的可以自動刷新還需編寫后端程序。

前后端分離定時更新看板

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

前端

前端主動向后端進行數(shù)據(jù)刷新，定時刷新的核心在于 HTML 的 setInterval 方法。網(wǎng)頁中主要元素都存儲在各個div標(biāo)簽中，我們對"零售數(shù)據(jù)大屏.html"這個文件中的各個圖表div標(biāo)簽進行改造。如何識別div與圖的對應(yīng)關(guān)系呢，div中有個id屬性，我們可以根據(jù)div的id值確定。之前保存的"chart_config.json"文件中有各個圖形的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就是將來網(wǎng)頁中相應(yīng)div的id,后面的"width","height","top","left"則是圖形在網(wǎng)頁中的位置信息。pyecharts中的html組件id是隨機的，例如前兩個cid是table的，后續(xù)的5個是地圖、柱狀圖、餅圖等，這些是可以手動設(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中存儲一行數(shù)據(jù)，給tr設(shè)置一個id 方便后續(xù)函數(shù)定位標(biāo)簽并動態(tài)修改標(biāo)簽內(nèi)容。script標(biāo)簽中的內(nèi)容為JavaScript代碼，是實現(xiàn)自動刷新的核心。這里面的函數(shù)會像"http://127.0.0.1:5000/api/data"發(fā)送請求獲取數(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>利潤</th>
                        <th>利潤率</th>
                        <th>訂單數(shù)</th>
                        <th>平均折扣</th>
                        <th>客單價</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>

我們再看一下餅圖的前端改造,與table類似，只是請求的鏈接"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文件夾中。

后端

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

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="細分")
    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} 萬元",
             "profit":f"{da.利潤.sum()/10000:.2f} 萬元",
             "profit_margin":f"{da.利潤.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)用對象app,后續(xù)使用裝飾器@app.route()對各種請求設(shè)置了相應(yīng)的響應(yīng)函數(shù)。需要說明的是響應(yīng)函數(shù)中使用的dump_options_with_quotes()函數(shù)會將pyecharts的圖形對象的參數(shù)序列化為json返回到前端頁面，前端中的charts通過setOption函數(shù)解析json變成圖表的前端形式，例如：chart_map1.setOption(result)中result就是后端發(fā)送到前端的json數(shù)據(jù)。為了模擬數(shù)據(jù)的變化，后端代碼中使用了pandas的sample對dataframe隨機抽取實現(xiàn)圖表顯示的變化，實際工作中一般會通過查詢數(shù)據(jù)庫中的數(shù)據(jù)實現(xiàn)實時更新圖形。最后啟動后端程序(python執(zhí)行后端程序代碼文件)，然后在瀏覽器輸入'http://127.0.0.1:5000'即可查看動態(tài)看板。

以上就是基于Python實現(xiàn)動態(tài)看板的核心點

抓住機遇，狠狠提升自己

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

CDA 考試官方報名入口:https://www.cdaglobal.com/pinggu.html