
近來(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)。
數(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è)看板。
在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è)置即可。
接下來(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ě)后端程序。
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)
隨著各行各業(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
數(shù)據(jù)分析咨詢請(qǐng)掃描二維碼
若不方便掃碼,搜微信號(hào):CDAshujufenxi
LSTM 模型輸入長(zhǎng)度選擇技巧:提升序列建模效能的關(guān)鍵? 在循環(huán)神經(jīng)網(wǎng)絡(luò)(RNN)家族中,長(zhǎng)短期記憶網(wǎng)絡(luò)(LSTM)憑借其解決長(zhǎng)序列 ...
2025-07-11CDA 數(shù)據(jù)分析師報(bào)考條件詳解與準(zhǔn)備指南? ? 在數(shù)據(jù)驅(qū)動(dòng)決策的時(shí)代浪潮下,CDA 數(shù)據(jù)分析師認(rèn)證愈發(fā)受到矚目,成為眾多有志投身數(shù) ...
2025-07-11數(shù)據(jù)透視表中兩列相乘合計(jì)的實(shí)用指南? 在數(shù)據(jù)分析的日常工作中,數(shù)據(jù)透視表憑借其強(qiáng)大的數(shù)據(jù)匯總和分析功能,成為了 Excel 用戶 ...
2025-07-11尊敬的考生: 您好! 我們誠(chéng)摯通知您,CDA Level I和 Level II考試大綱將于 2025年7月25日 實(shí)施重大更新。 此次更新旨在確保認(rèn) ...
2025-07-10BI 大數(shù)據(jù)分析師:連接數(shù)據(jù)與業(yè)務(wù)的價(jià)值轉(zhuǎn)化者? ? 在大數(shù)據(jù)與商業(yè)智能(Business Intelligence,簡(jiǎn)稱 BI)深度融合的時(shí)代,BI ...
2025-07-10SQL 在預(yù)測(cè)分析中的應(yīng)用:從數(shù)據(jù)查詢到趨勢(shì)預(yù)判? ? 在數(shù)據(jù)驅(qū)動(dòng)決策的時(shí)代,預(yù)測(cè)分析作為挖掘數(shù)據(jù)潛在價(jià)值的核心手段,正被廣泛 ...
2025-07-10數(shù)據(jù)查詢結(jié)束后:分析師的收尾工作與價(jià)值深化? ? 在數(shù)據(jù)分析的全流程中,“query end”(查詢結(jié)束)并非工作的終點(diǎn),而是將數(shù) ...
2025-07-10CDA 數(shù)據(jù)分析師考試:從報(bào)考到取證的全攻略? 在數(shù)字經(jīng)濟(jì)蓬勃發(fā)展的今天,數(shù)據(jù)分析師已成為各行業(yè)爭(zhēng)搶的核心人才,而 CDA(Certi ...
2025-07-09【CDA干貨】單樣本趨勢(shì)性檢驗(yàn):捕捉數(shù)據(jù)背后的時(shí)間軌跡? 在數(shù)據(jù)分析的版圖中,單樣本趨勢(shì)性檢驗(yàn)如同一位耐心的偵探,專注于從單 ...
2025-07-09year_month數(shù)據(jù)類型:時(shí)間維度的精準(zhǔn)切片? ? 在數(shù)據(jù)的世界里,時(shí)間是最不可或缺的維度之一,而year_month數(shù)據(jù)類型就像一把精準(zhǔn) ...
2025-07-09CDA 備考干貨:Python 在數(shù)據(jù)分析中的核心應(yīng)用與實(shí)戰(zhàn)技巧? ? 在 CDA 數(shù)據(jù)分析師認(rèn)證考試中,Python 作為數(shù)據(jù)處理與分析的核心 ...
2025-07-08SPSS 中的 Mann-Kendall 檢驗(yàn):數(shù)據(jù)趨勢(shì)與突變分析的有力工具? ? ? 在數(shù)據(jù)分析的廣袤領(lǐng)域中,準(zhǔn)確捕捉數(shù)據(jù)的趨勢(shì)變化以及識(shí)別 ...
2025-07-08備戰(zhàn) CDA 數(shù)據(jù)分析師考試:需要多久?如何規(guī)劃? CDA(Certified Data Analyst)數(shù)據(jù)分析師認(rèn)證作為國(guó)內(nèi)權(quán)威的數(shù)據(jù)分析能力認(rèn)證 ...
2025-07-08LSTM 輸出不確定的成因、影響與應(yīng)對(duì)策略? 長(zhǎng)短期記憶網(wǎng)絡(luò)(LSTM)作為循環(huán)神經(jīng)網(wǎng)絡(luò)(RNN)的一種變體,憑借獨(dú)特的門(mén)控機(jī)制,在 ...
2025-07-07統(tǒng)計(jì)學(xué)方法在市場(chǎng)調(diào)研數(shù)據(jù)中的深度應(yīng)用? 市場(chǎng)調(diào)研是企業(yè)洞察市場(chǎng)動(dòng)態(tài)、了解消費(fèi)者需求的重要途徑,而統(tǒng)計(jì)學(xué)方法則是市場(chǎng)調(diào)研數(shù) ...
2025-07-07CDA數(shù)據(jù)分析師證書(shū)考試全攻略? 在數(shù)字化浪潮席卷全球的當(dāng)下,數(shù)據(jù)已成為企業(yè)決策、行業(yè)發(fā)展的核心驅(qū)動(dòng)力,數(shù)據(jù)分析師也因此成為 ...
2025-07-07剖析 CDA 數(shù)據(jù)分析師考試題型:解鎖高效備考與答題策略? CDA(Certified Data Analyst)數(shù)據(jù)分析師考試作為衡量數(shù)據(jù)專業(yè)能力的 ...
2025-07-04SQL Server 字符串截取轉(zhuǎn)日期:解鎖數(shù)據(jù)處理的關(guān)鍵技能? 在數(shù)據(jù)處理與分析工作中,數(shù)據(jù)格式的規(guī)范性是保證后續(xù)分析準(zhǔn)確性的基礎(chǔ) ...
2025-07-04CDA 數(shù)據(jù)分析師視角:從數(shù)據(jù)迷霧中探尋商業(yè)真相? 在數(shù)字化浪潮席卷全球的今天,數(shù)據(jù)已成為企業(yè)決策的核心驅(qū)動(dòng)力,CDA(Certifie ...
2025-07-04CDA 數(shù)據(jù)分析師:開(kāi)啟數(shù)據(jù)職業(yè)發(fā)展新征程? ? 在數(shù)據(jù)成為核心生產(chǎn)要素的今天,數(shù)據(jù)分析師的職業(yè)價(jià)值愈發(fā)凸顯。CDA(Certified D ...
2025-07-03