簡(jiǎn)介這份60套數(shù)據(jù)可視化大屏源碼資源包聚焦企業(yè)大屏場(chǎng)景的數(shù)據(jù)呈現(xiàn)面向數(shù)據(jù)分析師、前端開(kāi)發(fā)與BI工程師可作為學(xué)習(xí)可視化設(shè)計(jì)與獨(dú)立搭建看板的實(shí)用素材。壓縮包共2000個(gè)文件除核心的html頁(yè)面、js交互腳本、css樣式外還包含大量png/jpg背景圖、gif動(dòng)效、json數(shù)據(jù)配置、地圖與字體資源合計(jì)約277.73MB目錄按項(xiàng)目組織可對(duì)照預(yù)覽圖快速定位。已有3396人學(xué)習(xí)下載。60套實(shí)例覆蓋業(yè)務(wù)監(jiān)控、銷(xiāo)售分析、用戶行為、地理信息等常見(jiàn)主題源碼基于ECharts、D3等常用庫(kù)編寫(xiě)可學(xué)習(xí)圖表選型、大屏柵格布局、數(shù)據(jù)動(dòng)態(tài)刷新與交互聯(lián)動(dòng)技巧。通過(guò)替換數(shù)據(jù)和修改樣式能直接生成適合自身業(yè)務(wù)的可視化大屏也可用于二次開(kāi)發(fā)或者拆解研究。此外資源中多樣化的地圖、動(dòng)態(tài)特效和定制組件也能幫助理解大屏視覺(jué)層級(jí)與色彩搭配。1. 60套數(shù)據(jù)可視化大屏含源碼.zip先別急著雙擊 index.html如果你跟我要這個(gè)60套數(shù)據(jù)可視化大屏含源碼.zip多半是老板丟來(lái)一句“下周就要看到數(shù)據(jù)大屏”而你手里連個(gè)像樣的圖表都沒(méi)有。這個(gè) zip 包的真實(shí)價(jià)值不是 60 張截圖而是 60 套能獨(dú)立運(yùn)行的 ECharts 可視化大屏源碼工程覆蓋數(shù)據(jù)監(jiān)控、運(yùn)維告警、經(jīng)營(yíng)戰(zhàn)情室、園區(qū)總覽等常見(jiàn)場(chǎng)景?？伤畲蟮目右苍凇巴暾焙芏嗤瑢W(xué)解壓后直接雙擊 index.html十個(gè)人里有八個(gè)看到白屏轉(zhuǎn)頭就罵資源是假的。其實(shí)根子在瀏覽器的file://協(xié)議限制不在模板本身。這篇我就按拿到同類資源包的真實(shí)路徑來(lái)寫(xiě)從解壓到跑通從換數(shù)據(jù)到改版式最后收在部署上線的三個(gè)動(dòng)作上。適合要用可視化大屏快速出原型的運(yùn)維和產(chǎn)品也適合接私活需要現(xiàn)成版式的前端新手。2. 從 zip 到能跑的頁(yè)面解壓、目錄結(jié)構(gòu)與本地靜態(tài)服務(wù)器2.1 先看包里是什么可視化大屏源碼的通用骨架解開(kāi) zip 之后不要急著開(kāi)頁(yè)面先打開(kāi)目錄看一遍。常見(jiàn)的大屏模板資源包內(nèi)部是“一套一個(gè)文件夾”的結(jié)構(gòu)也就是 60 套里每一套都是一個(gè)獨(dú)立工程而不是 60 個(gè)頁(yè)面共用一個(gè)入口。每套工程通常會(huì)有一個(gè)index.html這是整個(gè)大屏的入口旁邊可能跟著static、assets、js、css、data這類目錄名。命名不一定統(tǒng)一但職責(zé)是固定的js目錄里放圖表庫(kù)和頁(yè)面邏輯css目錄放樣式data目錄放模擬業(yè)務(wù)的 JSON 數(shù)據(jù)文件。為什么強(qiáng)調(diào)先看目錄因?yàn)橘Y源包作者習(xí)慣差異很大。有人把 ECharts 的echarts.min.js放在本地js/lib下有人直接寫(xiě)死 CDN 外鏈也有人把圖表配置和頁(yè)面代碼全塞進(jìn)一個(gè)index.html里。這些差異直接決定你怎么啟動(dòng)、要不要聯(lián)網(wǎng)、能不能改數(shù)據(jù)。你多半會(huì)遇到寫(xiě)死外鏈的版本圖省事但部署到內(nèi)網(wǎng)大屏機(jī)器上就暴露問(wèn)題這點(diǎn)放到第 4 章和第 6 章再展開(kāi)。2.2 為什么雙擊會(huì)白屏file 協(xié)議的兩個(gè)硬限制直接雙擊index.html后瀏覽器地址欄是file:///E:/.../index.html這個(gè)協(xié)議下有兩個(gè)常見(jiàn)坑。第一個(gè)是fetch / XHR 加載本地 JSON 會(huì)被 CORS 攔截。模板里有一段fetch(data/report.json)瀏覽器看到地址是file://直接報(bào)Cross origin requests are only supported for protocol schemes: http...圖表區(qū)域全是空的其他靜態(tài)資源卻正常顯示。第二個(gè)是某些模板把資源路徑寫(xiě)成了絕對(duì)路徑比如/js/echarts.min.js在file://下這個(gè)地址會(huì)指向磁盤(pán)根目錄必 404。所以“雙擊白屏”不是模板壞是加載環(huán)境不對(duì)。可視化大屏本質(zhì)是一個(gè)純前端頁(yè)面工程它需要跑在 HTTP 服務(wù)上。不要在這一步玄學(xué)排查先記住一個(gè)結(jié)論拿到這種 zip 資源包第一件事是起本地靜態(tài)服務(wù)器而不是雙擊 HTML。2.3 用本地靜態(tài)服務(wù)器跑通最小命令起服務(wù)的方式很多我一般用下面兩種里的任一種。第一種是 Python 自帶模塊基本是個(gè)電腦就能跑第二種是 Node 生態(tài)的serve包。打開(kāi)終端先進(jìn)入某一套大屏的目錄再執(zhí)行cd 60套數(shù)據(jù)可視化大屏/01-企業(yè)銷(xiāo)售數(shù)據(jù)大屏 # 方式一Python 自帶靜態(tài)服務(wù)器默認(rèn)端口 8000 python -m http.server 8000 # 方式二Node 裝過(guò) npx 的話一行命令也能起 # npx serve -l 8080python -m http.server 8000的意思是用 Python 把當(dāng)前目錄作為根目錄起一個(gè)靜態(tài)文件服務(wù)監(jiān)聽(tīng) 8000 端口。啟動(dòng)后瀏覽器訪問(wèn)http://localhost:8000/index.html即可。-l 8080是 serve 命令指定端口號(hào)的寫(xiě)法。要注意終端當(dāng)前所在目錄就是站點(diǎn)的根目錄如果模板依賴../js/xxx.js這類跨目錄相對(duì)路徑建議把整個(gè)“60套”的解壓根目錄作為啟動(dòng)目錄而不是只進(jìn)到某一套里面否則兄弟目錄的資源會(huì)加載不到。啟動(dòng)后打開(kāi)頁(yè)面按 F12 打開(kāi)開(kāi)發(fā)者工具切到 Network 面板刷新頁(yè)面確認(rèn)沒(méi)有紅色的網(wǎng)絡(luò)請(qǐng)求失敗記錄再切到 Console 確認(rèn)沒(méi)有 JS 報(bào)錯(cuò)。只要這兩塊干凈大屏就活了。這里給一個(gè)最小檢查清單后續(xù)所有模板都用它來(lái)驗(yàn)證“有沒(méi)有跑通”檢查項(xiàng)期望結(jié)果常見(jiàn)失敗原因Network 面板所有請(qǐng)求狀態(tài) 200路徑帶中文或空格、絕對(duì)路徑寫(xiě)死Console 面板無(wú)紅色 ErrorECharts 未加載、容器高度塌陷頁(yè)面渲染圖表、地圖、數(shù)字滾動(dòng)條出現(xiàn)數(shù)據(jù)文件被 CORS 攔截、script 順序錯(cuò)誤2.4 目錄結(jié)構(gòu)與資源加載排查如果頁(yè)面有一部分圖表不顯示但標(biāo)題和靜態(tài)組件正常多半不是 HTML 壞了而是某個(gè) JS 或數(shù)據(jù)文件沒(méi)加載。我習(xí)慣先在終端里看一眼整體結(jié)構(gòu)這里是一個(gè)典型模板的目錄樹(shù)01-企業(yè)銷(xiāo)售數(shù)據(jù)大屏/ ├── index.html # 頁(yè)面骨架引入腳本和樣式 ├── css/ │ └── style.css # 大屏布局與字體字號(hào) ├── js/ │ ├── echarts.min.js # 圖表庫(kù)本體本地文件更可靠 │ ├── report.js # 圖表初始化邏輯 │ └── data.js # 寫(xiě)死的模擬數(shù)據(jù)或者指向 data/*.json └── data/ ├── sales.json └── map.json排查時(shí)按依賴順序來(lái)index.html里script標(biāo)簽的引包順序錯(cuò)了瀏覽器會(huì)直接白屏data.js只有在庫(kù)加載成功后才執(zhí)行如果庫(kù)沒(méi)加載圖表配置也會(huì)一并失效/data/sales.json這類路徑如果帶了/前綴在靜態(tài)服務(wù)器下會(huì)從根目錄查找一旦目錄層級(jí)不對(duì)就 404?？炊@個(gè)結(jié)構(gòu)后你就知道改哪些文件、碰哪些文件會(huì)翻車(chē)index.html基本不動(dòng)動(dòng)的是report.js和data目錄外加css/style.css。3. 從寫(xiě)死的 mock 到真實(shí)接口把模板數(shù)據(jù)換成你的業(yè)務(wù)數(shù)據(jù)3.1 大屏源碼里的數(shù)據(jù)到底存在哪模板能跑起來(lái)只是第一步你真正要做的是把里面假數(shù)據(jù)換成自己業(yè)務(wù)的真實(shí)數(shù)據(jù)。大屏源碼里的數(shù)據(jù)常見(jiàn)有三種形態(tài)。第一種是寫(xiě)死在 JS 文件里的數(shù)組和對(duì)象比如data.js里一個(gè)大大的var salesData [{...}]這種只要把數(shù)組整體替換就行最直接。第二種是獨(dú)立的 JSON 文件放在data目錄下頁(yè)面運(yùn)行時(shí)通過(guò) fetch 請(qǐng)求這種改起來(lái)最干凈不動(dòng)邏輯只動(dòng)數(shù)據(jù)。第三種是config 配置對(duì)象寫(xiě)在 HTML 頂部script標(biāo)簽里通常是一個(gè)settings { title: ..., count: 123 }的結(jié)構(gòu)負(fù)責(zé)大屏上的標(biāo)題、數(shù)字、滾動(dòng)信息也要一并改。動(dòng)手之前先用文本編輯器的全局搜索功能在當(dāng)前目錄搜一下“mock”“data”“json”這幾個(gè)關(guān)鍵詞定位數(shù)據(jù)在哪個(gè)文件了。改之前復(fù)制一份原始目錄做備份——這是這類資源包操作里最重要的后悔藥改壞了隨時(shí)還原不要問(wèn)我怎么知道的。3.2 把寫(xiě)死的數(shù)據(jù)抽成獨(dú)立 data.json 并按需加載很多模板會(huì)把數(shù)據(jù)直接寫(xiě)死在 JS 數(shù)組里這在工作流里很別扭產(chǎn)品改一個(gè)數(shù)字你就要打開(kāi) JS 去中間找。我一般會(huì)先把數(shù)據(jù)抽成獨(dú)立 JSON然后讓圖表邏輯統(tǒng)一走一個(gè)加載函數(shù)。這個(gè)函數(shù)也是后面接后端接口的同一入口一次改造兩處受益。async function loadData(url, fallbackData) { const controller new AbortController(); const timer setTimeout(() controller.abort(), 5000); try { const resp await fetch(url, { signal: controller.signal }); if (!resp.ok) { throw new Error(HTTP resp.status); } return await resp.json(); } catch (err) { // 接口超時(shí)、404、CORS 攔截都會(huì)走到這里 // 用 fallbackData 兜底大屏不至于白屏 console.warn([loadData] fallback triggered:, err.message); return fallbackData; } finally { clearTimeout(timer); } } // 用法加載本地 JSON失敗時(shí)回到寫(xiě)死的兜底數(shù)據(jù) const mockData [120, 200, 150, 80, 70, 110]; const chartData await loadData(data/sales.json, mockData); updateChart(chartData);loadData這個(gè)函數(shù)有幾個(gè)參數(shù)值得說(shuō)明。url是數(shù)據(jù)地址本地開(kāi)發(fā)時(shí)寫(xiě)相對(duì)路徑如data/sales.json聯(lián)調(diào)和生產(chǎn)時(shí)換成后端接口地址即可fallbackData是兜底數(shù)據(jù)目的是接口掛了頁(yè)面仍有東西可看避免在會(huì)議室里眼睜睜看著大屏白屏超時(shí)時(shí)間5000毫秒是按統(tǒng)計(jì)類接口的經(jīng)驗(yàn)值設(shè)置的如果你們接口本身就要 3 秒以上建議調(diào)到 10000否則每個(gè)圖表初始化都會(huì)走一次 fallback造成數(shù)據(jù)看起來(lái)“閃了一下”的錯(cuò)覺(jué)。AbortController是讓請(qǐng)求在超時(shí)后真正斷開(kāi)而不是掛在后臺(tái)繼續(xù)占資源。3.3 對(duì)接后端接口跨域與代理的常見(jiàn)做法把url換成https://api.example.com/dashboard/sales之后會(huì)遇到第二道坎跨域。瀏覽器會(huì)攔下Access-Control-Allow-Origin不對(duì)的響應(yīng)。這在大屏項(xiàng)目里是出現(xiàn)頻率最高的“接口通了但頁(yè)面拿不到數(shù)據(jù)”的原因。處理辦法有三個(gè)層次一是讓后端在響應(yīng)頭里加白名單二是開(kāi)發(fā)環(huán)境起代理三是生產(chǎn)環(huán)境直接用 Nginx 反向代理把大屏頁(yè)面和接口放在同一個(gè)域名下。我一般的做法是第三種因?yàn)榇笃烈兜酱髸?huì)議室或者指揮中心的大屏機(jī)器上那些機(jī)器的瀏覽器版本往往不新對(duì) CORS 的報(bào)錯(cuò)提示又很模糊反代是最省心的。Nginx 里加一段 location 就能解決location /api/ { # 把 /api/ 開(kāi)頭的請(qǐng)求轉(zhuǎn)發(fā)給后端服務(wù) proxy_pass http://your-backend-service:8080; # 傳遞原始 Host 和客戶端地址后端做日志和鑒權(quán)時(shí)要用 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } location / { # 大屏靜態(tài)文件直接本地服務(wù) root /var/www/bigscreen; index index.html; }配置里proxy_pass后面如果帶了路徑轉(zhuǎn)發(fā)規(guī)則會(huì)跟著變這里寫(xiě)成不帶路徑的http://your-backend-service:8080意思是請(qǐng)求原本的/api/xxx路徑會(huì)原樣轉(zhuǎn)發(fā)后端不用處理前綴問(wèn)題。改完配置記得nginx -s reload。這一步做完頁(yè)面的 fetch 路徑統(tǒng)一寫(xiě)/api/dashboard/sales就不存在跨域了。3.4 讓大屏自己動(dòng)起來(lái)輪詢與 WebSocket 的選擇運(yùn)營(yíng)類大屏通常要求數(shù)據(jù)實(shí)時(shí)更新。最簡(jiǎn)單可靠的方式是輪詢定時(shí)重新請(qǐng)求接口再把新數(shù)據(jù)塞進(jìn)圖表。這里要注意一個(gè)坑模板里可能已經(jīng)寫(xiě)了一個(gè)setInterval你再寫(xiě)一個(gè)兩者會(huì)打架。我建議把刷新定時(shí)器統(tǒng)一管理并且掛在window上方便任何腳本訪問(wèn)和清理。const REFRESH_INTERVAL_MS 30000; function scheduleRefresh(loadFn, interval REFRESH_INTERVAL_MS) { // 舊定時(shí)器先清掉防止多次初始化導(dǎo)致請(qǐng)求疊加 if (window.__refreshTimer) { clearInterval(window.__refreshTimer); } window.__refreshTimer setInterval(loadFn, interval); }參數(shù)說(shuō)明loadFn是數(shù)據(jù)加載函數(shù)要求是一個(gè)返回 Promise 的異步函數(shù)interval單位是毫秒30 秒對(duì)銷(xiāo)售數(shù)字這類更新不頻繁的場(chǎng)景足夠如果大屏展示的是告警條數(shù)或在線設(shè)備數(shù)可以調(diào)到 10 秒但低于 5 秒就要考慮后端壓力和圖表重繪開(kāi)銷(xiāo)了大數(shù)據(jù)量圖表頻繁 setOption 會(huì)造成交互卡頓。輪詢是“盡力而為”的實(shí)時(shí)若業(yè)務(wù)要求秒級(jí)刷新且強(qiáng)調(diào)低延遲比如監(jiān)控大屏的告警彈窗那就上 WebSocket。在原有函數(shù)里加一段消息訂閱邏輯即可這里給一個(gè)最小示例const ws new WebSocket(ws://your-host:8080/ws); ws.onmessage (event) { // 推送的數(shù)據(jù)直接走同一個(gè)更新函數(shù) const data JSON.parse(event.data); updateDashboard(data); };選輪詢還是 WebSocket建議按數(shù)據(jù)量和延遲要求定而不是按技術(shù)新舊定。幾十個(gè)圖表的大屏每 10 秒全量拉一次接口比維護(hù)幾十個(gè) WebSocket 通道更可靠這是我在大屏項(xiàng)目上的血淚經(jīng)驗(yàn)。4. 從 60 套里挑模板并按業(yè)務(wù)改版式選型邏輯、ECharts 參數(shù)與字體適配4.1 60 套大屏怎么選先判斷業(yè)務(wù)場(chǎng)景和施工成本資源包有 60 套不等于每套都值得打開(kāi)看。時(shí)間有限的話按照三個(gè)維度篩。第一是業(yè)務(wù)類型數(shù)據(jù)監(jiān)控類看規(guī)律經(jīng)營(yíng)匯報(bào)類看對(duì)比指揮調(diào)度類看地圖和實(shí)時(shí)鏈路不同場(chǎng)景的圖表組合完全不同。第二是實(shí)時(shí)性要求需要秒級(jí)刷新的場(chǎng)景選帶滾動(dòng)表格和告警彈窗的模板只需要每天看一次的選大數(shù)字和靜態(tài)柱線圖模板后者改造成本低太多。第三是施工成本打開(kāi)模板數(shù)一下要改多少處 mock 數(shù)據(jù)如果數(shù)字分布在 10 個(gè) JS 文件里果斷換下一套。這里給一個(gè)對(duì)照表方便你拿業(yè)務(wù)去套業(yè)務(wù)場(chǎng)景優(yōu)先選模板特征重點(diǎn)檢查項(xiàng)施工成本企業(yè)級(jí)數(shù)據(jù)可視化匯報(bào)大標(biāo)題、KPI 數(shù)字卡、柱線圖組合標(biāo)題字號(hào)是否可調(diào)、顏色是否商務(wù)低運(yùn)維監(jiān)控告警實(shí)時(shí)表格、告警彈窗、趨勢(shì)圖刷新機(jī)制是否健全、表格是否自動(dòng)滾動(dòng)高城市/園區(qū)地圖總覽地圖組件、飛線動(dòng)畫(huà)、側(cè)邊面板地圖數(shù)據(jù)格式是否和你的業(yè)務(wù)匹配中指揮調(diào)度大屏多路視頻占位、鏈路圖、狀態(tài)燈視頻窗口是否需要做 RTSP 轉(zhuǎn)流高“企業(yè)級(jí)數(shù)據(jù)可視化”這個(gè)詞聽(tīng)著高大上落到選型上就是“別選花里胡哨的”。那些動(dòng)不動(dòng)就 3D 旋轉(zhuǎn)地球的模板演示時(shí)確實(shí)提氣但如果你的數(shù)據(jù)只是幾十個(gè)節(jié)點(diǎn)的進(jìn)出流量3D 反而把信息密度拉低了。企業(yè)級(jí)大屏的核心是信息密度和可讀性不是動(dòng)效數(shù)量。4.2 改 ECharts 的 option最值錢(qián)的 8 個(gè)參數(shù)選好模板后最常改的是 ECharts 的圖表配置。模板里的配置一般寫(xiě)得比較散我習(xí)慣重新組織一個(gè)典型的 option 結(jié)構(gòu)把值得調(diào)的都放一起。下面這段是我常用的一套基礎(chǔ)配置標(biāo)注了每個(gè)參數(shù)在實(shí)際大屏里的坑const option { // 1. color整個(gè)大屏的圖表主色板改這里最去“模板味” color: [#00e5ff, #ff8a00, #36d399], // 2. tooltiptrigger 決定鼠標(biāo)懸停時(shí)怎么取數(shù) // confine: true 防止提示框超出屏幕邊緣被切掉 tooltip: { trigger: axis, confine: true }, // 3. legend圖例默認(rèn)字號(hào)在大屏上偏小textStyle 里放大 legend: { top: 12, textStyle: { color: #ccc, fontSize: 14 } }, // 4. grid大屏空間貴左右留白 4%底部留 10% 放數(shù)據(jù)縮放條 grid: { left: 4%, right: 4%, bottom: 10%, top: 18%, containLabel: true }, // 5. xAxis軸線和刻度線顏色深色大屏上用亮一點(diǎn)但不刺眼的藍(lán)灰 xAxis: { axisLine: { lineStyle: { color: #1e4d7c } } }, // 6. yAxissplitLine 是橫向網(wǎng)格線顏色用半透明太實(shí)會(huì)搶圖表主體 yAxis: { splitLine: { lineStyle: { color: rgba(0, 100, 200, 0.2) } } }, // 7. dataZoom數(shù)據(jù)多時(shí)加縮放條inside 支持滾輪縮放 dataZoom: [ { type: inside }, { type: slider, height: 18, bottom: 4 } ], // 8. series平滑曲線讓匯報(bào)大屏看起來(lái)更專業(yè)symbolSize 控制數(shù)據(jù)點(diǎn)大小 series: [{ type: line, smooth: true, symbol: circle, symbolSize: 6, areaStyle: { opacity: 0.15 } }] };這 8 個(gè)參數(shù)里tooltip.confine是最容易被忽略的。大屏分辨率高鼠標(biāo)懸停在屏幕右側(cè)圖表時(shí)默認(rèn)的 tooltip 會(huì)超出視口被裁掉加上confine: true能保證提示框始終顯示在可視區(qū)域。grid.containLabel要留意它把坐標(biāo)軸刻度標(biāo)簽的寬度也算進(jìn) grid 了不加的話左側(cè) y 軸數(shù)值多時(shí)會(huì)被擠到屏幕外。color是替換模板審美的最快路徑一套大屏 3-5 個(gè)主色足夠多了就像調(diào)色盤(pán)。4.3 大屏字體怎么設(shè)置用 vw 而不是 px這是拿到資源包后必踩的一個(gè)坑——“l(fā)argetext 大屏字體怎么設(shè)置”幾乎是所有大屏項(xiàng)目的通用痛點(diǎn)。模板默認(rèn)用 px 寫(xiě)的字體在自己 1920 的顯示器上看著正常換到 3840 的會(huì)議屏上就變成螞蟻?zhàn)帧Ｔ蚝芎?jiǎn)單px 是固定像素分辨率越高同樣 px 的物理尺寸越小。而大屏機(jī)器上千奇百怪指望開(kāi)發(fā)時(shí)一臺(tái)臺(tái)調(diào)根本不現(xiàn)實(shí)。我的做法是把整個(gè)大屏的字體基準(zhǔn)改成視口單位讓字體跟隨屏幕寬度縮放html { /* 基礎(chǔ)字號(hào)取視口寬度的 1%1920 寬度下相當(dāng)于 19.2px */ font-size: 1vw; } .dashboard-title { /* 大屏主標(biāo)題按基準(zhǔn)字號(hào)放大 2.2 倍 */ font-size: 2.2rem; } .kpi-number { /* 核心數(shù)字用更粗的字重大屏從遠(yuǎn)處才看得清 */ font-size: 1.8rem; font-weight: 700; font-family: DIN Alternate, Arial Narrow, sans-serif; }關(guān)鍵在rem和vw的組合html { font-size: 1vw }設(shè)置基準(zhǔn)字號(hào)頁(yè)面里所有字體用rem相對(duì)放大。屏幕越寬基準(zhǔn)字號(hào)越大所有文字等比縮放。數(shù)字類控件我建議額外用不加襯線的窄體字體因?yàn)榇笃辽蠑?shù)字經(jīng)常需要并列對(duì)齊等寬或窄體才不會(huì)出現(xiàn)“數(shù)字跳一下寬度變一下”的抖動(dòng)。如果模板有自己套了一層body { font-size: 14px }記得去掉它會(huì)覆蓋 rem 的基準(zhǔn)剛才的適配就全白做了。4.4 去掉模板味的三板斧最后是外觀層面的收尾。模板是別人做的設(shè)計(jì)直接拿去交付很容易被吐槽“一眼模板”。去掉模板味我不會(huì)大改結(jié)構(gòu)通常只動(dòng)三處換色板、換字體、換背景。色板在上面 option 里已經(jīng)改了字體把模板里的宋體類 font-family 全局替換成思源黑體或蘋(píng)方背景則看模板是深色科技風(fēng)還是淺色商務(wù)風(fēng)這跟你們公司展廳屏的調(diào)性是否一致直接相關(guān)。背景圖缺資源時(shí)直接用 CSS 漸變模擬深藍(lán)色底再加一層淡淡的網(wǎng)格線效果比網(wǎng)上下個(gè)模糊的星空?qǐng)D干凈得多body { background: radial-gradient(ellipse at top, #0b1a33 0%, #07111f 100%); background-image: linear-gradient(rgba(0, 200, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 200, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; }這段樣式的效果是深藍(lán)漸變打底再疊加一層 40 像素間距的細(xì)網(wǎng)格線配合科技藍(lán)的圖表主色視覺(jué)上立刻脫離“下載模板”的氣質(zhì)。注意background-size: 40px 40px決定了網(wǎng)格密度大屏分辨率越高這個(gè)值可以適當(dāng)調(diào)大否則網(wǎng)格在 4K 下會(huì)細(xì)到看不見(jiàn)。5. 拆 zip 之后最常遇到的 5 個(gè)坑現(xiàn)象、原因、解決5.1 資源路徑里的中文和空格404 等到天荒地老現(xiàn)象本地服務(wù)起來(lái)了頁(yè)面頂部 title 正常但所有圖表和背景圖都不顯示F12 里一堆 404。原因解壓出來(lái)的目錄名帶中文和空格比如“60套數(shù)據(jù)可視化大屏含源碼”。你在終端 cd 進(jìn)去沒(méi)問(wèn)題但模板內(nèi)部如果用了相對(duì)路徑拼接某些靜態(tài)服務(wù)器在編碼處理上不一致請(qǐng)求60套數(shù)據(jù)可視化大屏/01-企業(yè)銷(xiāo)售數(shù)據(jù)大屏/assets/xx.png就會(huì)各種千奇百怪的 404。更隱蔽的是模板里的src assets/logo.png這種帶空格拼接瀏覽器會(huì)把空格轉(zhuǎn)成%20但文件在磁盤(pán)上可能有兩個(gè)連續(xù)空格照樣對(duì)不上。解決解壓后第一時(shí)間把整個(gè)目錄重命名為全英文小寫(xiě)去掉括號(hào)和空格比如bigscreen-60。這一步成本極低但能省掉后面至少一小時(shí)的排查。另外檢查模板代碼里有沒(méi)有手拼的src和href有的話把空格去掉。路徑問(wèn)題的玄學(xué)九成是編碼和空格造成的。5.2 圖表容器高度塌陷div 有寬沒(méi)高現(xiàn)象頁(yè)面渲染出來(lái)了網(wǎng)格線也有但圖表只顯示一小條或者干脆只有 x 軸一條線頂在頂部。原因ECharts 初始化時(shí)讀取容器 div 的寬高如果模板里寫(xiě)了div idchart stylewidth:100%;height:80%而它的父級(jí)沒(méi)有設(shè)置高度height:80%計(jì)算結(jié)果是 0圖表渲染高度就是 0。這個(gè)坑在資源包模板里極其常見(jiàn)因?yàn)槟０遄髡咧辉谧钔鈱?body 上設(shè)置了高度內(nèi)層 div 全靠百分比繼承一改結(jié)構(gòu)就斷。解決給圖表容器一個(gè)明確高度或者讓父級(jí)鏈條從html開(kāi)始就鋪滿。三個(gè)高度一層層發(fā)散遇到這種問(wèn)題先修這里html, body { height: 100%; margin: 0; } #chart1, #chart2 { width: 100%; height: 34vh; /* vh 單位比 % 更穩(wěn)不依賴父級(jí) */ }參數(shù)說(shuō)明34vh意思是視口高度的 34%兩個(gè)圖表并排放時(shí)各占約三分之一比百分比更可控。如果你改完還是扁的在代碼里加一行console.log(document.getElementById(chart1).clientHeight)輸出是 0 就繼續(xù)往上查父級(jí)輸出正常就是 ECharts 實(shí)例初始化早于 DOM 渲染把初始化腳本放進(jìn)window.onload里再試。5.3 setInterval 輪詢失控切走再切回請(qǐng)求次數(shù)暴漲現(xiàn)象大屏頁(yè)面掛著不關(guān)每隔一段時(shí)間切到其他標(biāo)簽頁(yè)再回來(lái)Network 面板里接口請(qǐng)求突然密集甚至一分鐘幾十個(gè)。原因模板為了實(shí)時(shí)刷新寫(xiě)了setInterval(fetchData, 30000)。但你手動(dòng)重新執(zhí)行了初始化函數(shù)或者前端框架里觸發(fā)了組件重建每次重建都新開(kāi)一個(gè)定時(shí)器舊定時(shí)器沒(méi)清。定時(shí)器一只在跑多個(gè)疊加就變成幾秒一次請(qǐng)求。這個(gè)問(wèn)題在單頁(yè)大屏里非常隱蔽因?yàn)樗皇橇⒖瘫罎⒍锹兛?。解決規(guī)整刷新定時(shí)器的創(chuàng)建入口每次創(chuàng)建前先清舊定時(shí)器。代碼在第三章給過(guò)核心是if (window.__refreshTimer) clearInterval(window.__refreshTimer)。另外如果模板里有多個(gè)圖表各自獨(dú)立刷新的寫(xiě)法也統(tǒng)一收斂到一個(gè)refreshAll()函數(shù)里避免“一個(gè)圖表一個(gè)定時(shí)器”的局面。定時(shí)器泄漏不會(huì)讓你立刻翻車(chē)但會(huì)在演示半小時(shí)后讓大屏卡成幻燈片屬于必須提前處理的隱患。5.4 echarts 實(shí)例重復(fù)初始化黑屏與內(nèi)存泄漏現(xiàn)象大屏通過(guò)點(diǎn)擊按鈕切換頁(yè)面來(lái)回切幾次后某些圖表黑屏或者整個(gè)瀏覽器標(biāo)簽頁(yè)變得特別卡CPU 占用居高不下。原因每次切回頁(yè)面都執(zhí)行了echarts.init(document.getElementById(chart))創(chuàng)建新實(shí)例舊實(shí)例沒(méi)有被 dispose。一個(gè)隱藏的 canvas 或 svg 一直掛在那里占內(nèi)存幾十個(gè)圖表來(lái)回切換內(nèi)存就爆了。ECharts 對(duì)同一個(gè) dom 節(jié)點(diǎn)重復(fù) init 還會(huì)報(bào)There is a chart instance already initialized on the dom但很多時(shí)候控制臺(tái)被刷掉你根本注意不到。解決初始化前先查有沒(méi)有舊實(shí)例有就銷(xiāo)毀重建或者直接復(fù)用。推薦用 ECharts 自帶的靜態(tài)方法先取一下const chartDom document.getElementById(chart); let chart echarts.getInstanceByDom(chartDom); if (!chart) { chart echarts.init(chartDom); } else { // 實(shí)例已存在直接更新配置即可 }echarts.getInstanceByDom會(huì)返回已在 dom 上綁定的實(shí)例避免了重復(fù)創(chuàng)建。切頁(yè)面的銷(xiāo)毀邏輯里加上chart.dispose()并把變量置空。這段代碼是修復(fù)這類問(wèn)題最直接的手段不需要引入任何額外庫(kù)。遇到黑屏先點(diǎn)開(kāi) Performance 錄一段如果 memory 曲線只增不減基本就是這個(gè)原因。5.5 自動(dòng)輪播與 tooltip 打架提示框亂閃頁(yè)面像抽風(fēng)現(xiàn)象大屏設(shè)置了圖表自動(dòng)輪播高亮比如每 3 秒高亮一個(gè)柱子的效果。但當(dāng)鼠標(biāo)經(jīng)過(guò)圖表區(qū)域時(shí)高亮點(diǎn)和 tooltip 互相搶提示框閃爍不停。原因輪播是通過(guò)dispatchAction({ type: showTip, seriesIndex: 0, dataIndex: i })實(shí)現(xiàn)的它本身就是模擬鼠標(biāo)懸停來(lái)顯示提示框。用戶真實(shí)鼠標(biāo)懸停時(shí)這兩個(gè)信號(hào)源同時(shí)觸發(fā)ECharts 內(nèi)部狀態(tài)混亂就出現(xiàn)了閃爍。這不是 ECharts 的 bug而是兩個(gè)交互動(dòng)作在爭(zhēng)同一個(gè)接口。解決讓自動(dòng)輪播在鼠標(biāo)進(jìn)入圖表時(shí)暫停鼠標(biāo)移出時(shí)繼續(xù)。監(jiān)聽(tīng)兩個(gè)事件即可chart.on(mouseover, () { clearInterval(window.__carouselTimer); }); chart.on(mouseout, () { startCarousel(); // 重新開(kāi)啟輪播 });參數(shù)說(shuō)明mouseover和mouseout是 ECharts 實(shí)例上的事件鼠標(biāo)進(jìn)入圖表區(qū)域和離開(kāi)圖表區(qū)域時(shí)觸發(fā)。注意這里不要用mousemove否則鼠標(biāo)稍微動(dòng)一下就要做一輪清理重建性能很差。這個(gè)坑屬于使用姿勢(shì)問(wèn)題資源包模板本身不會(huì)告訴你只能自己加防護(hù)。真正的血淚經(jīng)驗(yàn)是做給領(lǐng)導(dǎo)匯報(bào)的大屏寧可輪播慢一點(diǎn)5 秒一換也不要讓閃爍問(wèn)題在演示現(xiàn)場(chǎng)被當(dāng)眾發(fā)現(xiàn)。6. 部署上線前要做的三件事性能、分辨率、容錯(cuò)第一件事是性能收口。大屏模板為了開(kāi)箱即用往往引入完整的 ECharts 包和一堆輪播、動(dòng)畫(huà)庫(kù)一個(gè)頁(yè)面兩三百個(gè)請(qǐng)求很常見(jiàn)。部署到展廳或指揮中心的大屏機(jī)器上這些機(jī)器配置不高開(kāi)機(jī)還要自啟瀏覽器必須把不需要的圖表組件代碼省掉。常見(jiàn)做法是開(kāi)箱后看一眼 Network哪些資源是模板實(shí)際沒(méi)用到的比如只用柱線圖卻加載了地圖模塊直接在 index.html 里刪掉對(duì)應(yīng) script。生產(chǎn)環(huán)境的服務(wù)器開(kāi)啟 gzip對(duì)靜態(tài)資源進(jìn)行壓縮圖表庫(kù)這類文本文件壓縮效果非常明顯能直接決定首屏從 10 秒降到 3 秒以內(nèi)。數(shù)字上我不給你保證但壓不壓縮、刪不刪冗余體驗(yàn)至少差一個(gè)量級(jí)。第二件事是分辨率適配驗(yàn)證。不要只在開(kāi)發(fā)者的 1920 顯示器上點(diǎn)了兩下就說(shuō)做完大屏實(shí)際要投的可能是 3840 乘 2160 的拼接屏也可能是 16:8 的異形屏。常見(jiàn)做法是在 Chrome 設(shè)備模擬器里切換幾個(gè)典型尺寸然后看兩個(gè)地方圖表容器是否被拉伸變形顯示器邊框是否出現(xiàn)大面積黑邊。如果模板使用的是固定 1920 基準(zhǔn)的設(shè)計(jì)在非 1920 寬度下更穩(wěn)的兜底方案是做等比縮放把整個(gè) app 容器按照目標(biāo)屏幕尺寸縮放而不是重新排版function scaleScreen(designWidth 1920, designHeight 1080) { const scale Math.min( window.innerWidth / designWidth, window.innerHeight / designHeight ); const app document.getElementById(app); app.style.transform scale(${scale}); app.style.transformOrigin top left; }這段腳本的思路是無(wú)論目標(biāo)屏多大都假裝它是 1920 乘 1080整體等比例放大所有原先按 1920 設(shè)計(jì)的尺寸全部貼合。transformOrigin: top left保證縮放以左上角為原點(diǎn)不然縮放后整個(gè)頁(yè)面會(huì)往右下方偏。需要注意字體若是 2.4 節(jié)改過(guò)的 vw 方案就直接按視口走了不需要再加這層縮放兜底兩套方案只能選一個(gè)都上會(huì)雙重縮放。第三件事是數(shù)據(jù)異常容錯(cuò)。會(huì)議室里的大屏最怕的不是數(shù)據(jù)錯(cuò)而是屏幕上出現(xiàn)一個(gè)巨大的“NaN”或者半屏的空白。接口超時(shí)、字段為空、后端返回格式變化這些在開(kāi)發(fā)環(huán)境很難模擬但上線第一天就會(huì)遇到。我的習(xí)慣是給每個(gè)圖表的數(shù)據(jù)加載一層默認(rèn)值甚至給核心數(shù)字寫(xiě)一個(gè)定時(shí)探活接口連續(xù)失敗三次就在頁(yè)面左下角顯示一個(gè)小紅點(diǎn)而不是讓大屏黑屏至少現(xiàn)場(chǎng)看起來(lái)“系統(tǒng)還醒著”。數(shù)字卡片這類顯示也要容忍null、undefined、空字符串統(tǒng)一顯示成--。我自己的習(xí)慣是上線前把整套頁(yè)面丟到目標(biāo)屏幕上坐在離屏幕兩米的位置看一遍標(biāo)題能不能看清數(shù)字有沒(méi)有跳動(dòng)顏色是不是刺眼。這一遍只能人工做沒(méi)有工具能替代。大屏不是給開(kāi)發(fā)者自己看的是給站在五米外的人看的你坐回座位上的那一瞬間就能發(fā)現(xiàn)問(wèn)題都在哪里。以上這三件事是我每次交付大屏項(xiàng)目必過(guò)的收尾動(dòng)作順序也建議按性能、分辨率、容錯(cuò)來(lái)每一項(xiàng)都能單獨(dú)救你一次。希望幫到你。本文還有配套的精品資源點(diǎn)擊獲取