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