驗(yàn)2 數(shù)據(jù)看板的設(shè)計(jì)與實(shí)現(xiàn)(電商銷售數(shù)據(jù)看板))
一、實(shí)驗(yàn)概述本實(shí)驗(yàn)圍繞「電商銷售數(shù)據(jù)看板」業(yè)務(wù)場景完成數(shù)據(jù)準(zhǔn)備、預(yù)處理、圖表搭建與看板整合。代碼中變量名統(tǒng)一使用a, b, c等保證可讀性的同時(shí)滿足實(shí)驗(yàn)要求。二、文件 1data_prep.py任務(wù)2實(shí)驗(yàn)數(shù)據(jù)準(zhǔn)備與預(yù)處理此代碼用于生成模擬的電商數(shù)據(jù)進(jìn)行空值、異常值處理并保存為data.csv。# -*- coding: utf-8 -*- import pandas as pd import numpy as np 1. 模擬生成數(shù)據(jù) a: 日期序列 a pd.date_range(2023-01-01, periods100) b: 商品類別 b [數(shù)碼, 服飾, 食品, 圖書] c: 地區(qū) c [華北, 華東, 華南, 西南] d: 構(gòu)建原始數(shù)據(jù)列表 d [] for x in a: for _ in range(10): d.append({ 日期: x, 類別: np.random.choice(b), 地區(qū): np.random.choice(c), 銷售額: np.random.randint(100, 2000), 訂單量: np.random.randint(10, 200) }) 轉(zhuǎn)換為DataFrame df pd.DataFrame(d) 2. 數(shù)據(jù)預(yù)處理 模擬無效數(shù)據(jù)、空值和異常值 df.loc[0:5, 銷售額] np.nan df.loc[10:12, 銷售額] -50 # 異常值 剔除空值 df df.dropna() 剔除異常值銷售額必須大于0 df df[df[銷售額] 0] 3. 計(jì)算衍生指標(biāo) df[利潤] df[銷售額] * 0.2 # 假設(shè)利潤率20% 4. 保存數(shù)據(jù) df.to_csv(data.csv, indexFalse, encodingutf-8-sig) print(數(shù)據(jù)準(zhǔn)備完成已保存為 data.csv)三、文件 2app.py任務(wù)3 和 任務(wù)4圖表搭建與看板整合此代碼使用 Streamlit 和 Plotly 搭建完整的靜態(tài)數(shù)據(jù)看板。# -*- coding: utf-8 -*- import streamlit as st import pandas as pd import plotly.express as px 設(shè)置頁面配置必須在第一句 st.set_page_config(page_title電商數(shù)據(jù)看板, layoutwide) 讀取預(yù)處理后的數(shù)據(jù) df pd.read_csv(data.csv) df[日期] pd.to_datetime(df[日期]) 任務(wù)4整體排版與標(biāo)題 st.title( 電商銷售數(shù)據(jù)看板) st.markdown(---) 任務(wù)3 和 任務(wù)4數(shù)據(jù)概覽區(qū) st.markdown(### 數(shù)據(jù)概覽區(qū)) a, b, c, d st.columns(4) # 劃分4個(gè)數(shù)據(jù)卡片列 計(jì)算核心指標(biāo) total_sales df[銷售額].sum() avg_sales df[銷售額].mean() total_orders df[訂單量].sum() growth_rate 15.2 # 模擬增長率 使用數(shù)據(jù)卡片展示 a.metric(label總銷售額 (元), valuef{total_sales:,.0f}) b.metric(label平均銷售額 (元), valuef{avg_sales:,.2f}) c.metric(label總訂單量, valuef{total_orders}) d.metric(label環(huán)比增長率, valuef{growth_rate}%, delta較上月增長) 任務(wù)3 和 任務(wù)4維度統(tǒng)計(jì)與趨勢分析區(qū) st.markdown(---) st.markdown(### 維度統(tǒng)計(jì)與趨勢分析區(qū)) e, f st.columns(2) # 左右兩列 with e: # 柱狀圖分類數(shù)據(jù)對比 g df.groupby(類別)[銷售額].sum().reset_index() fig1 px.bar(g, x類別, y銷售額, color類別, title各品類銷售額對比, text_auto.2s) st.plotly_chart(fig1, use_container_widthTrue) with f: # 折線圖時(shí)間變化趨勢 h df.groupby(日期)[銷售額].sum().reset_index() fig2 px.line(h, x日期, y銷售額, title銷售額時(shí)間變化趨勢, markersTrue) st.plotly_chart(fig2, use_container_widthTrue) 任務(wù)3 和 任務(wù)4明細(xì)數(shù)據(jù)區(qū) st.markdown(---) st.markdown(### 明細(xì)數(shù)據(jù)區(qū)) i, j st.columns([1, 2]) # 餅圖占1份寬度表格占2份寬度 with i: # 餅圖/環(huán)形圖占比結(jié)構(gòu) k df.groupby(地區(qū))[銷售額].sum().reset_index() fig3 px.pie(k, names地區(qū), values銷售額, hole0.4, title各地區(qū)銷售額占比) st.plotly_chart(fig3, use_container_widthTrue) with j: # 數(shù)據(jù)表格展示 st.dataframe(df.head(100), use_container_widthTrue)四、任務(wù)1看板需求分析與版面設(shè)計(jì)可直接填入實(shí)驗(yàn)報(bào)告業(yè)務(wù)場景電商平臺銷售數(shù)據(jù)監(jiān)控。核心需求監(jiān)控整體銷售業(yè)績分析不同品類和地區(qū)的銷售差異追蹤銷售趨勢。版面布局?jǐn)?shù)據(jù)概覽區(qū)頂部4個(gè)數(shù)據(jù)卡片橫向排列總銷售額、平均銷售額、總訂單量、環(huán)比增長率。維度統(tǒng)計(jì)區(qū)中部左側(cè)柱狀圖展示各品類銷售額對比。趨勢分析區(qū)中部右側(cè)折線圖展示銷售額隨時(shí)間的變化趨勢。明細(xì)數(shù)據(jù)區(qū)底部左側(cè)環(huán)形圖展示地區(qū)占比右側(cè)數(shù)據(jù)表格展示詳細(xì)訂單記錄。配色方案主色科技藍(lán)#1E90FF輔助色活力橙#FFA500、翠綠#2E8B57背景色深色背景適配數(shù)據(jù)大屏科技風(fēng)。五、任務(wù)5實(shí)驗(yàn)結(jié)果驗(yàn)證與總結(jié)實(shí)驗(yàn)報(bào)告提綱1. 運(yùn)行結(jié)果運(yùn)行data_prep.py成功生成data.csv。終端運(yùn)行streamlit run app.py瀏覽器打開http://localhost:8501。預(yù)期截圖頁面頂部顯示4個(gè)帶數(shù)字的指標(biāo)卡中間左側(cè)為彩色柱狀圖右側(cè)為帶有數(shù)據(jù)點(diǎn)的折線圖底部左側(cè)為環(huán)形餅圖右側(cè)為數(shù)據(jù)表格。整體排版整潔無溢出。2. 遇到的問題及解決方法問題Streamlit 默認(rèn)頁面較窄圖表展示不夠大氣。解決在代碼最上方添加st.set_page_config(layoutwide)。問題Plotly 圖表在不同屏幕下寬度不一致。解決在st.plotly_chart中統(tǒng)一設(shè)置use_container_widthTrue。問題生成的數(shù)據(jù)包含負(fù)數(shù)導(dǎo)致圖表異常。解決在預(yù)處理階段使用df df[df[銷售額] 0]剔除異常數(shù)據(jù)。六、運(yùn)行步驟確保已安裝依賴pip install streamlit pandas numpy plotly終端執(zhí)行python data_prep.py生成數(shù)據(jù)終端執(zhí)行streamlit run app.py啟動看板