簡介面向Vue學(xué)習(xí)者與前端開發(fā)者的疫情數(shù)據(jù)可視化大屏項目源碼適合需要快速搭建數(shù)據(jù)看板或?qū)W習(xí)大屏交互方案的中級開發(fā)者。項目基于Vue生態(tài)構(gòu)建包含數(shù)據(jù)模擬、API請求封裝、路由配置及多個可視化組件模塊如省級排名柱狀圖、數(shù)據(jù)地圖、治愈與死亡趨勢、當(dāng)前確診對比等能夠完整演示從數(shù)據(jù)獲取到圖表渲染的大屏實現(xiàn)流程。壓縮包共34個文件以vue組件、js邏輯、json數(shù)據(jù)三類為主輔以HTML入口、圖標(biāo)及配置文件整體僅724KB結(jié)構(gòu)緊湊便于本地運行與二次改造。目前已有475人學(xué)習(xí)下載。通過該源碼可掌握大屏項目目錄組織方式、常見可視化圖表接入思路以及組件化拆分技巧對獨立完成數(shù)據(jù)可視化類作品或課程設(shè)計有直接參考價值。1. 基于Vue的疫情數(shù)據(jù)可視化大屏到底解決什么問題打開這個標(biāo)題的人大概率是兩類一類接了一個要做疫情數(shù)據(jù)可視化大屏的活兒想找一套能改能跑的源碼另一類想把 Vue 路由、組件化、ECharts 配置和大屏適配串成一個完整項目來學(xué)。兩類人真正要的一致不是一張好看的截圖而是一套從數(shù)據(jù)到像素都講得清的工程方案。這個標(biāo)題的本質(zhì)就是用 Vue 全家桶搭一塊 16:9 全屏展示的數(shù)據(jù)大屏把累計確診、新增趨勢、地區(qū)分布這類指標(biāo)變成可維護(hù)的圖表而不是靜態(tài)頁面。它管的是組件和路由圖表交給 ECharts數(shù)據(jù)用 mock 先頂住后端就緒后隨時可以切真實接口。適合前端初中級開發(fā)者做作品集也適合需要快速交付演示屏的團(tuán)隊。下面按技術(shù)選型、組件實現(xiàn)、適配性能和排錯路徑一步步展開每個環(huán)節(jié)都給可直接抄的參數(shù)和代碼。2. 從零初始化一套大屏源碼工程技術(shù)選型與數(shù)據(jù)鏈路打開任何一套開發(fā)中的數(shù)據(jù)大屏源碼第一件事都不是看圖表怎么配的而是確認(rèn)這套技術(shù)棧能在你機(jī)器上跑起來、數(shù)據(jù)從哪來、路由怎么走。很多教程默認(rèn)你已經(jīng)解決了 vue 安裝及環(huán)境配置結(jié)果新手全卡在第一步的依賴報錯上。這一章先把選型理由講透再給你一套能直接用的目錄結(jié)構(gòu)和數(shù)據(jù)鏈路設(shè)計后面寫圖表才有地方放。2.1 選型邏輯為什么是 Vue為什么路由要用 hash 模式大屏本質(zhì)上是一個展示型單頁應(yīng)用對服務(wù)端渲染沒有剛需所以 Vue 3 Vite 是目前最舒服的組合。Vite 的冷啟動速度比 vue-cli 快一個量級而大屏開發(fā)里改圖表配置是最高頻的操作改完一秒內(nèi)熱更新和等三秒刷新對開發(fā)體驗的影響是決定性的。如果你接手的是團(tuán)隊里已有的 Vue 2 項目也別急著折騰重構(gòu)ECharts 5 對 Vue 2 和 Vue 3 都兼容真正要關(guān)注的是路由模式和數(shù)據(jù)響應(yīng)式這兩個邊界。路由建議直接用 hash 模式這是一個很容易被忽略的坑。數(shù)據(jù)大屏經(jīng)常要部署到 nginx 的子路徑或者打包成一個靜態(tài)目錄直接扔給客戶跑用 history 模式在這種場景下必須讓后端配合做 rewrite否則一刷新就是 404。hash 模式雖然 URL 里多個#但在這個場景下?lián)Q來的穩(wěn)定性非常值。Vue Router 4 里創(chuàng)建路由時默認(rèn)就是 hash你只需要顯式寫上createWebHashHistory團(tuán)隊里的新人也一眼能看懂意圖。2.2 項目初始化一條命令跑出可運行的最小工程一套源碼能不能跑起來往往取決于初始化步驟是否干凈。我習(xí)慣用 Vite 官方腳手架創(chuàng)建工程不需要額外配置一堆 loader裝完依賴直接npm run dev就能看到頁面。具體命令如下npm create vitelatest epidemic-screen -- --template vue cd epidemic-screen npm install vue-router4 echarts npm run dev邏輯說明npm create vite是當(dāng)前創(chuàng)建 Vue 3 工程最干凈的方式--template vue會生成基于組合式 API 的模板省去手動搭 Vite 配置的步驟vue-router4是 Vue 3 對應(yīng)的路由版本echarts不鎖版本號時默認(rèn)安裝最新的 5.x兼容性沒問題。跑完npm run dev后Vite 默認(rèn)開 5173 端口瀏覽器能打開就說明 vue 安裝及環(huán)境配置已經(jīng)過了。工程初始化完成后還需要做兩件事。第一件是把開發(fā)端口固定下來大屏項目經(jīng)常要同時聯(lián)調(diào)后端接口端口漂移會導(dǎo)致跨域配置反復(fù)修改在vite.config.js里加一行server: { port: 8088 }就能固定。第二件是設(shè)置路徑別名把指向src這樣后面所有組件里引用目錄都寫/components/xxx避免一長串../../相對路徑。// vite.config.js import { defineConfig } from vite import vue from vitejs/plugin-vue import { fileURLToPath, URL } from node:url export default defineConfig({ plugins: [vue()], resolve: { alias: { : fileURLToPath(new URL(./src, import.meta.url)) } }, server: { port: 8088, host: true } })說明host: true允許局域網(wǎng)內(nèi)其他設(shè)備通過 IP 訪問大屏演示時經(jīng)常要用另一臺電腦或平板投屏這個配置能省掉代理工具的麻煩。alias里的路徑是基于node:url計算的Windows 和 macOS 通用。2.3 目錄結(jié)構(gòu)按功能拆組件而不是按頁面拆看過很多大屏源碼最容易翻車的結(jié)構(gòu)是把所有圖表堆在一個Screen.vue里數(shù)據(jù)請求、圖表初始化、定時器全混在一起。這種寫法短期跑得通但只要有一天要換數(shù)據(jù)源或者新增一個圖表就會牽連出一堆副作用。我一般按功能把代碼拆成下面這樣src/ ├── api/ │ └── epidemic.js # 唯一的數(shù)據(jù)出口組件只認(rèn)這個目錄 ├── assets/ │ ├── geo/ # 中國地圖 / 省份 GeoJSON │ └── style/ # 全局主題變量、大屏背景 ├── components/ │ ├── charts/ # 圖表組件一個圖表一個文件 │ ├── layout/ # 大屏框架組件Header、SidePanel │ └── common/ # 數(shù)字滾動、邊框、標(biāo)題等復(fù)用組件 ├── mock/ │ └── data.js # 沒有后端時先用靜態(tài)數(shù)據(jù)頂住 ├── router/ │ └── index.js # 路由配置主屏 下鉆詳情頁 ├── views/ │ ├── Screen.vue # 大屏主頁面 │ └── Detail.vue # 圖表下鉆詳情頁 └── App.vue邏輯說明components/charts是這套源碼里最核心的目錄每個圖表獨立成一個單文件組件自己管自己的 ECharts 實例mock目錄專門放靜態(tài)數(shù)據(jù)等后端接口就緒后只改api/epidemic.js這一個文件所有圖表組件完全不動。很多項目失敗在數(shù)據(jù)層和組件層強(qiáng)耦合這個結(jié)構(gòu)的價值就是讓數(shù)據(jù)源可替換。路由上建議保留一個Detail.vue因為大屏交互經(jīng)常要“點擊省份跳詳情”預(yù)留坑位比臨時加路由要省事得多。2.4 數(shù)據(jù)鏈路mock、模擬接口和真實 API 怎么和平共處數(shù)據(jù)可視化大屏的常見死法是后端還沒好前端拿一個寫死的 JSON 開始開發(fā)等接口好了再回頭改所有調(diào)用的地方。正確做法是設(shè)計一個統(tǒng)一的數(shù)據(jù)出口組件層永遠(yuǎn)只認(rèn) Promise 返回值不關(guān)心數(shù)據(jù)是從 mock 來的還是 axios 來的。下面是我常用的寫法// api/epidemic.js —— 唯一的數(shù)據(jù)出口 export async function getOverview() { // 后端就緒后把下面這行換成 // return axios.get(/api/epidemic/overview).then(res res.data) return import(../mock/data.js).then(m m.overview) } export async function getProvinceTrend(id) { return import(../mock/data.js).then(m m.provinceTrend[id]) }邏輯說明把每個接口都寫成一個返回 Promise 的函數(shù)組件調(diào)用時用await等待結(jié)果。mock 階段用動態(tài)import加載靜態(tài)數(shù)據(jù)換真實接口時只需要改函數(shù)內(nèi)部的實現(xiàn)對外契約不變。參數(shù)id是省份編碼overview是全局概要指標(biāo)這兩個字段名在 mock 和真實接口里保持一致后續(xù)切換零成本。這么做還有一個好處并行開發(fā)時前端不需要等后端自己就能把大屏全部功能跑通。3. 核心圖表實現(xiàn)把疫情指標(biāo)拆成可維護(hù)的 ECharts 組件這一章進(jìn)入源碼的主體部分。企業(yè)級數(shù)據(jù)可視化的習(xí)慣是每個圖表獨立成一個組件自己初始化、自己銷毀、自己訂閱數(shù)據(jù)而不是把十幾張圖全堆在頁面里。下面以三個最典型的疫情大屏組件為例趨勢折線圖、地區(qū)分布地圖、核心指標(biāo)卡片每個都給出可直接運行的代碼和關(guān)鍵參數(shù)說明。3.1 趨勢折線圖時間序列的配置要點與數(shù)據(jù)更新策略趨勢圖是疫情大屏里最常被盯著看的一塊現(xiàn)有確診、新增治愈、新增死亡都適合用平滑折線表達(dá)。組件內(nèi)部維護(hù) ECharts 實例通過setOption更新數(shù)據(jù)重點在于銷毀時釋放實例否則切路由后 Canvas 會殘留。template div refchartRef classtrend-chart/div /template script setup import { ref, onMounted, onBeforeUnmount } from vue import * as echarts from echarts import { getTrend } from /api/epidemic const chartRef ref(null) let chart null onMounted(async () { chart echarts.init(chartRef.value) const data await getTrend(confirm) chart.setOption({ tooltip: { trigger: axis }, grid: { left: 50, right: 20, top: 40, bottom: 30 }, xAxis: { type: category, boundaryGap: false, data: data.dates }, yAxis: { type: value, name: 人數(shù), scale: true }, series: [{ name: 現(xiàn)有確診, type: line, smooth: true, showSymbol: false, lineStyle: { width: 2 }, areaStyle: { opacity: 0.25 }, data: data.values }] }) }) onBeforeUnmount(() { if (chart) { chart.dispose() chart null } }) /script style scoped .trend-chart { width: 100%; height: 100%; min-height: 260px; } /style邏輯說明onMounted里先echarts.init再setOption順序不能反否則實例不存在會報錯await getTrend(confirm)拿到的數(shù)據(jù)對象里包含dates和values兩個數(shù)組分別對應(yīng) x 軸和 y 軸。smooth: true讓折線變平滑適合展示連續(xù)日期的疫情趨勢showSymbol: false是數(shù)據(jù)點太多時防止圓點密密麻麻的關(guān)鍵參數(shù)。boundaryGap: false讓折線從第一個點開始貼合坐標(biāo)軸左邊界。scale: true這個參數(shù)經(jīng)常被人忽略它的作用是當(dāng)數(shù)據(jù)最小值離 0 很遠(yuǎn)時y 軸自動壓縮讓波動更明顯但如果想強(qiáng)調(diào)“從零開始”的對比就不該開這個參數(shù)。另外onBeforeUnmount里調(diào)用dispose是必須的Vue 組件銷毀后 DOM 也會被移除ECharts 實例不手動釋放會造成內(nèi)存泄漏這也是很多大屏越用越卡的主要原因。3.2 地圖組件動態(tài)注冊 GeoJSON 與視覺映射配置疫情大屏幾乎必有一塊中國地圖按省份著色表示累計確診量。地圖組件最容易踩的坑是地圖數(shù)據(jù)沒有注冊ECharts 5 之后的版本不再內(nèi)置地圖必須先用registerMap注冊 GeoJSON。script setup import * as echarts from echarts import chinaGeoJson from /assets/geo/china.json echarts.registerMap(china, chinaGeoJson) export function buildMapOption(mapData) { const maxValue Math.max(...mapData.map(item item.value)) return { tooltip: { formatter: ({ name, value }) ${name}br/累計確診${value ?? 0} 例 }, visualMap: { min: 0, max: maxValue, calculable: true, left: 20, bottom: 20, text: [高, 低], inRange: { color: [#e8f4ff, #7ec8ff, #1890ff, #003a70] } }, series: [{ type: map, map: china, roam: true, label: { show: false }, itemStyle: { borderColor: #ffffff, borderWidth: 0.5 }, emphasis: { label: { show: true, color: #333 }, itemStyle: { areaColor: #ffd666 } }, data: mapData }] } } /script邏輯說明registerMap是整個地圖組件的前提chinaGeoJson通過import靜態(tài)引入打包時會自動處理路徑避免運行時 404。mapData的數(shù)據(jù)格式要求是[{ name: 湖北, value: 67800 }, ...]name必須和 GeoJSON 里的省名完全一致比如“湖北”不能寫成“湖北省”。獲取地圖背景數(shù)據(jù)不要太依賴線上 CDN常見的做法是發(fā)布前把 GeoJSON 下載到本地assets/geo/目錄和源碼一起走版本管理。visualMap有四個關(guān)鍵參數(shù)min和max決定顏色映射范圍max這里取數(shù)據(jù)最大值保證顏色分布有區(qū)分度calculable: true顯示可拖動的滑塊方便人手工篩選區(qū)間inRange.color是四段漸變色。roam: true允許縮放和拖拽在大屏演示時觀眾經(jīng)常會要求看一眼某個省份的細(xì)節(jié)這個參數(shù)一定要開。3.3 指標(biāo)卡片把環(huán)比計算封進(jìn)組件避免每個頁面重寫大屏頂部通常是一排數(shù)字卡片累計確診、累計治愈、累計死亡、現(xiàn)有確診每張卡片還要顯示“較昨日 xxx”或者“較昨日 -xxx”。這個邏輯從數(shù)據(jù)上就是簡單的減法但如果不封裝每個頁面都會復(fù)制粘貼一份加減法代碼。把環(huán)比計算收進(jìn)卡片組件里父級只負(fù)責(zé)傳當(dāng)前值和昨日值。template div classstat-card div classlabel{{ label }}/div div classvalue{{ value.toLocaleString() }}/div div classdiff :classdiffClass 較昨日 {{ diffText }} /div /div /template script setup import { computed } from vue const props defineProps({ label: { type: String, required: true }, value: { type: Number, required: true }, prev: { type: Number, required: true } }) const diffText computed(() { const diff props.value - props.prev return diff 0 ? ${diff.toLocaleString()} : diff.toLocaleString() }) const diffClass computed(() { return props.value props.prev ? diff-up : diff-down }) /script邏輯說明卡片本身不請求數(shù)據(jù)而是通過props接收label、value、prev三個參數(shù)。value.toLocaleString()是讓數(shù)字每隔三位加一個逗號大屏上顯示67,800比67800更專業(yè)。diffText這個計算屬性處理正負(fù)號的格式化123和-45能直接用。diffClass控制上漲和下降時的顏色樣式上漲為紅色、下降為綠色這是國內(nèi)大屏約定俗成的配色習(xí)慣除非客戶明確要求別用否則不要反著來。這套設(shè)計的好處是主頁面里寫StatCard label累計確診 :valueoverview.confirmed :prevoverview.prevConfirmed /就夠了后續(xù)換數(shù)據(jù)源、加統(tǒng)計口徑都只改父組件傳參卡片內(nèi)部永遠(yuǎn)不動。4. 大屏適配與性能優(yōu)化三組參數(shù)和兩個高頻坑數(shù)據(jù)大屏的設(shè)計稿幾乎都是 1920 × 1080但實際投放的屏幕可能是 1366 的筆記本、2560 的顯示器、甚至 4K 的會議屏。很多新手在這一步開始瘋狂寫媒體查詢結(jié)果越寫越亂。工作里最可靠的大屏適配方案還真不是 rem而是 transform 縮放。4.1 為什么大屏不適合 rem推薦 transform: scale 方案rem 方案在普通網(wǎng)頁里很好用但在可視化大屏上有個致命問題ECharts 繪制在 Canvas 里文字和線條的尺寸在渲染時已經(jīng)按像素定死了rem 只對 DOM 元素生效。你通過媒體查詢改了根字體大小頁面的標(biāo)題和表格變小了但圖表的坐標(biāo)軸文字、圖例、折線粗細(xì)完全無感結(jié)果是整塊屏的視覺比例是亂的。transform: scale 方案思路完全不同頁面內(nèi)部永遠(yuǎn)按 1920 × 1080 布局最外層容器固定這個寬高然后用 JS 計算當(dāng)前視口和設(shè)計稿的縮放比例整體縮放。這樣做保證圖表內(nèi)部和外部 DOM 的縮放比例完全一致視覺上是一個無損的等比縮小或放大。// utils/useScreenScale.js export function useScreenScale(baseWidth 1920, baseHeight 1080) { const applyScale () { const screen document.getElementById(screen-root) if (!screen) return const scaleX window.innerWidth / baseWidth const scaleY window.innerHeight / baseHeight const scale Math.min(scaleX, scaleY) screen.style.transform scale(${scale}) screen.style.transformOrigin left top } window.addEventListener(resize, applyScale) applyScale() return { applyScale } }邏輯說明Math.min(scaleX, scaleY)取兩個方向中較小的值這樣才能保證頁面等比縮放不會出現(xiàn)橫向或縱向拉伸變形。transformOrigin: left top是關(guān)鍵它讓縮放后的頁面左上角對準(zhǔn)視口左上角否則默認(rèn)的縮放中心在元素中線頁面會跑到屏幕外面去。調(diào)用useScreenScale()后大屏外層容器會被加載這個 hook 在Screen.vue的onMounted里調(diào)用一次并返回applyScale這樣當(dāng)全屏狀態(tài)變化時可以手動再執(zhí)行一次來修正比例。4.2 三個必調(diào)參數(shù)devicePixelRatio、notMerge、resize 時機(jī)第一組必調(diào)參數(shù)是 ECharts 的devicePixelRatio。大屏經(jīng)常跑在 2K、4K 屏上瀏覽器默認(rèn)把 Canvas 的分辨率按設(shè)備像素比放大但 ECharts 默認(rèn)devicePixelRatio: 1導(dǎo)致高分屏上圖表文字邊緣發(fā)虛。解決辦法是在echarts.init時顯式傳入chart echarts.init(chartRef.value, null, { devicePixelRatio: window.devicePixelRatio || 1 })第二個必調(diào)參數(shù)是setOption的notMerge。大屏數(shù)據(jù)定時刷新時如果新舊數(shù)據(jù)里的系列數(shù)量不一致比如早上還是 4 條曲線下午接口改成 3 條默認(rèn)的 merge 模式會保留舊系列導(dǎo)致圖表上出現(xiàn)幽靈數(shù)據(jù)。刷新數(shù)據(jù)時改成chart.setOption(option, { notMerge: true })第三個是圖表 resize 的時機(jī)。window resize 事件里要同時處理外層縮放和每個圖表實例的尺寸修正如果只縮放外層、不調(diào)chart.resize()圖表內(nèi)部會保持之前的像素寬高出現(xiàn)內(nèi)容擠壓。常見做法是在 window resize 監(jiān)聽里遍歷所有已注冊的圖表實例統(tǒng)一調(diào)用resize()window.addEventListener(resize, () { applyScale() chartRefs.value.forEach(item item.chart item.chart.resize()) })4.3 性能優(yōu)化按需引入 ECharts 模塊和清理副作用全套引入import * as echarts from echarts開發(fā)時方便但打包體積會多出幾百 KB。大屏項目一般只用 line、bar、map、pie 這幾種基礎(chǔ)圖表完全可以用按需引入把體積壓下來import * as echarts from echarts/core import { LineChart, BarChart, PieChart, MapChart } from echarts/charts import { TooltipComponent, GridComponent, VisualMapComponent, LegendComponent } from echarts/components import { CanvasRenderer } from echarts/renderers echarts.use([ LineChart, BarChart, PieChart, MapChart, TooltipComponent, GridComponent, VisualMapComponent, LegendComponent, CanvasRenderer ])邏輯說明echarts/core是核心包只包含基礎(chǔ)架構(gòu)echarts/charts里按需要引入圖表類型echarts/components里引入組件比如 tooltip、grid、visualMap最后一個CanvasRenderer是渲染器。按這種方式改完打包產(chǎn)物明顯變小對加載速度有直接幫助。這里有個需要注意的地方如果用了echarts/core按需引入registerMap依然有效但要確保MapChart和GeoComponent都已注冊否則地圖還是白屏。性能上第二件常被忽略的事是副作用清理。大屏里的定時刷新、輪播、resize 監(jiān)聽都是需要在onBeforeUnmount里釋放的資源。一個靠譜的寫法是把所有定時器句柄收集到一個數(shù)組銷毀時統(tǒng)一clearInterval監(jiān)聽 window 的事件要用removeEventListener移除并且傳入的 handler 要保持引用不能每次onMounted都新建匿名函數(shù)。5. 疫情大屏開發(fā)避坑五個高發(fā)問題與排查記錄可視化大屏看著炫翻車的時候也是真的玄學(xué)。下面是做過多次這類項目后最常遇到的五個問題每條都按現(xiàn)象、原因、解決三段記錄希望幫你把血淚經(jīng)驗直接變成排查手冊。5.1 現(xiàn)象一地圖區(qū)域完全空白控制臺報 Map not found這應(yīng)該是疫情大屏里最高頻的問題?，F(xiàn)象是頁面其他圖表正常唯獨中間的地圖區(qū)域一片空白瀏覽器控制臺提示Map china not found.或者類似的錯誤。原因是 ECharts 5 之后不再內(nèi)置任何地圖數(shù)據(jù)你必須先執(zhí)行echarts.registerMap(china, geoJson)并且這個動作要在setOption之前完成。很多人把地圖數(shù)據(jù)用fetch去線上拉取網(wǎng)絡(luò)一慢或者地址失效地圖就沒了。解決方式是直接把 GeoJSON 下載到src/assets/geo/下用import chinaGeoJson from /assets/geo/china.json靜態(tài)引入打包后文件跟隨工程走不依賴外網(wǎng)。注意registerMap只需要調(diào)用一次放在模塊頂層或者main.js里都行。5.2 現(xiàn)象二路由切換后再回來圖表出現(xiàn)重疊或殘留大屏主頁面和詳情頁來回切換時圖表區(qū)域會出現(xiàn)兩個 Canvas 疊在一起或者圖表直接花屏。根本原因是組件銷毀時沒有釋放 ECharts 實例舊的 Canvas 跟著 DOM 被移除了但實例的監(jiān)聽和渲染狀態(tài)沒清干凈再回來時新實例和殘留狀態(tài)沖突。解決方法是把上一章的onBeforeUnmount清理邏輯當(dāng)成鐵律真正執(zhí)行dispose()并把局部變量置空。如果使用了keep-alive緩存頁面那么不能在onUnmounted銷毀圖表要改用onDeactivated和onActivated配合在onActivated里重新resize()。5.3 現(xiàn)象三窗口放大后大屏兩邊留白圖表被拉伸變形大屏部署好后把瀏覽器窗口拖大頁面內(nèi)容沒有鋪滿而是左右兩大塊空白或者橫向變寬、縱向不變圖表的圓被拉成了橢圓。原因通常是把外層縮放了但圖表容器自身還在響應(yīng)式布局里跟著變寬。解決方式是明確兩層職責(zé)外層固定 1920 × 1080專門承擔(dān) transform: scale內(nèi)層所有圖表組件一律width: 100%; height: 100%但外層縮放時內(nèi)層容器的實際布局像素不參與變化這樣圖表只會整體縮放、不會重新布局。5.4 現(xiàn)象四數(shù)據(jù)更新了setOption 調(diào)了但圖表紋絲不動接口返回新數(shù)據(jù)后控制臺打印數(shù)據(jù)是新的但圖表不刷新。最常見的原因有兩個一個是setOption沒有傳notMerge: true舊數(shù)據(jù)和新數(shù)據(jù)結(jié)構(gòu)有差異時 ECharts 默認(rèn)增量更新導(dǎo)致看起來像沒刷新另一個是數(shù)據(jù)經(jīng)過了 Vue 的響應(yīng)式代理ECharts 直接操作被代理的對象時內(nèi)部判斷數(shù)據(jù)沒有變化默認(rèn)不重繪。解決方式是先JSON.parse(JSON.stringify(data))或者用toRaw還原原始數(shù)據(jù)然后chart.setOption(option, { notMerge: true })強(qiáng)制全量更新。5.5 現(xiàn)象五本地運行正常打包部署后地圖和字體 404本地開發(fā)好好的執(zhí)行npm run build后放到服務(wù)器上地圖沒了、自定義字體也變成默認(rèn)字體。原因幾乎都是資源引用方式不對GeoJSON 如果用fetch(/assets/geo/china.json)這種方式寫打包后路徑匹配不上部署子目錄字體文件如果用 CSS 里相對路徑引用但沒被 Vite 處理也會 404。根治方式是所有靜態(tài)資源統(tǒng)一走 import 引入或者放在public目錄下。GeoJSON 用import保證被打包進(jìn)產(chǎn)物同時確認(rèn)部署時把base配置成實際子路徑比如base: /data-screen/。字體文件盡量用系統(tǒng)字體或者把字體文件放進(jìn)assets并顯式font-face引入。6. 讓大屏活起來輪播、主題切換和定時刷新圖表能正常顯示只是第一步落到實際演示場景大屏要能自己動頁面每隔幾秒自動輪播一屏數(shù)據(jù)深色主題可以持久化數(shù)據(jù)定時刷新時不能白屏或閃跳。這一章把最后這點進(jìn)階能力補(bǔ)齊。自動輪播可以用一個通用 hook 實現(xiàn)它接收當(dāng)前頁面的索引和總頁數(shù)在setInterval里遞增取模實現(xiàn)循環(huán)。注意大屏輪播的間隔不要太短8 到 10 秒是大多數(shù)客戶能接受的節(jié)奏太短會讓人來不及看清圖表內(nèi)容。輪播時最好配合圖表的高亮動畫比如讓折線圖重新播放動畫視覺上更有“活”的感覺。主題切換和數(shù)據(jù)刷新也要一起考慮。主題色存進(jìn)localStorage刷新頁面后保持主題一致ECharts 的主題切換則通過echarts.registerTheme注冊兩套主題切換時重新init當(dāng)前實例。定時刷新接口時優(yōu)先保留舊數(shù)據(jù)展示等新數(shù)據(jù)拿到后再一次性setOption更新而不是先把圖表清空再等接口返回。這樣即使接口慢了幾秒大屏上也不是空白用戶感知會好很多。我早期做大屏?xí)r最常犯的錯就是忘記清理定時器和 resize 監(jiān)聽結(jié)果演示到一半瀏覽器變卡圖表動畫也一頓一頓的。后來養(yǎng)成的習(xí)慣是每個圖表組件里所有副作用都在同一個鉤子里釋放全局只保留一個刷新入口寧可代碼看起來啰嗦一點也要保證長時間運行不倒。做可視化大屏炫酷是面子穩(wěn)定才是里子希望這套思路能幫你在自己的項目里少走幾段彎路。本文還有配套的精品資源點擊獲取