简介这是一套面向前端开发者与数据可视化学习者的 Vue3 大数据大屏项目实战源码基于 Vue3、TypeScript、DataV 与 ECharts5 搭建适合想掌握大屏适配、组件封装与图表集成的初中级工程师参考练手。压缩包共 61 个文件约 2.47MB以 tsx 与 ts 承载逻辑与类型定义vue 文件组织页面视图辅以 scss、css 样式、json 配置、png 图片及字体文件整体结构清晰、模块划分明确。项目采用新版动态屏幕适配方案界面由 .vue 与 .tsx 混合实现全局渲染组件对 ECharts 区域做了统一封装并附有路由、状态管理与工具函数等目录便于理解工程化组织方式。目前已有 9026 人学习下载读者可从中获取完整的大屏页面布局、图表封装思路与屏幕适配实现对照源码快速搭建自己的可视化大屏并在此基础上按需改造引入方式以优化体积。1. 拿到一份 Vue3/ECharts5 大屏源码先别急着 npm run dev很多人拿到「Vue3/ECharts5 数据可视化大屏展示项目案例源码.zip」这类压缩包第一反应是解压、装依赖、跑起来看效果。跑通了截图发群里跑不通就丢进收藏夹吃灰。但真正决定这份源码值不值得研究的不是它跑起来好不好看而是它怎么组织大屏的布局、怎么把 ECharts5 实例和 Vue3 的响应式系统接在一起、怎么处理定时刷新和数据更新时的内存问题。大屏项目和普通后台管理系统是两种东西。后台管理系统追求表单、表格、权限、路由的完整闭环大屏追求的是固定分辨率下的视觉冲击、多图表联动、实时数据推送和长时间运行不崩。这份源码的价值在于它提供了一个可复用的骨架Vue3 的 Composition API 怎么管理多个图表实例ECharts5 的按需引入怎么配大屏适配用 scale 还是 rem数据更新时 setOption 该用哪种合并策略。适合已经会 Vue3 基础、想往企业级数据可视化方向走的开发者也适合需要快速交付一个演示大屏但不想从零搭架子的人。接下来按「拆结构 → 跑起来 → 改配置 → 避坑 → 进阶」的顺序把这份源码里真正能抄走的东西讲清楚。2. 拆开压缩包Vue3 大屏工程的目录结构与依赖选型2.1 先看 package.json判断这份源码的依赖水位拿到源码第一步不是看 src而是看根目录的 package.json。大屏项目的依赖水位直接决定了你后续能不能顺利集成到现有工程里。重点看四个东西Vue 的版本号、ECharts 的版本号、构建工具是 Vite 还是 Vue CLI、有没有引入 UI 组件库。{ name: vue3-echarts-big-screen, version: 1.0.0, scripts: { dev: vite, build: vite build, preview: vite preview }, dependencies: { vue: ^3.4.0, echarts: ^5.5.0, axios: ^1.6.0, pinia: ^2.1.0 }, devDependencies: { vite: ^5.0.0, vitejs/plugin-vue: ^5.0.0, sass: ^1.70.0 } }这段依赖清单透露了几个关键信息。Vue 3.4 配合 Vite 5说明项目用的是现代构建链路冷启动和热更新都很快。ECharts 5.5 是 5.x 系列里比较成熟的版本支持按需引入和 tree-shaking。Pinia 出现说明大屏里有跨组件共享的状态通常是全局筛选条件或者 WebSocket 推送的数据。没有看到 Element Plus 或 Ant Design Vue说明大屏的 UI 是手写的这对大屏来说反而是好事因为组件库的样式会干扰大屏的视觉统一性。如果你的现有工程是 Vue CLI 搭的把这份源码的 src 目录整体迁移过去也能跑但要注意 Vite 的环境变量前缀是VITE_Vue CLI 是VUE_APP_接口地址的读取方式需要改。2.2 src 目录的四个关键文件夹大屏工程的 src 目录通常比后台管理系统扁平因为页面少、组件复用度高。这份源码的结构大概率是下面这样src/ ├── api/ # 接口请求封装 ├── assets/ # 图片、字体、全局样式 ├── components/ # 图表组件、边框组件、数字翻牌器 ├── composables/ # 组合式函数如 useEcharts、useResize ├── router/ # 路由大屏通常只有一个页面 ├── stores/ # Pinia 状态 ├── utils/ # 工具函数如适配、格式化 ├── views/ │ └── screen/ # 大屏主页面 └── main.jscomposables文件夹是 Vue3 大屏项目的灵魂。一个成熟的useEcharts组合式函数会把图表实例的创建、setOption、resize、销毁全部封装进去组件里只需要传 DOM 引用和 option 配置。如果你拿到的源码没有这个文件夹图表逻辑全写在组件的 onMounted 里那这份源码的复用价值会打折扣但你可以自己抽一层出来。utils里通常有一个适配文件可能是flexible.js或者scale.js。大屏适配方案决定了你在不同分辨率显示器上看到的效果这个后面单独讲。2.3 图表组件怎么和 Vue3 响应式配合ECharts 实例是一个非响应式的对象把它放进ref或reactive里会导致性能问题因为 Vue3 的 Proxy 会深度代理整个实例。正确做法是用shallowRef或者普通变量存实例。import { shallowRef, onMounted, onBeforeUnmount } from vue import * as echarts from echarts export function useEcharts(domRef) { const chartInstance shallowRef(null) const initChart (option) { if (!domRef.value) return // 如果已经存在实例先销毁再创建避免重复初始化 if (chartInstance.value) { chartInstance.value.dispose() } chartInstance.value echarts.init(domRef.value) chartInstance.value.setOption(option) } const updateChart (option) { if (!chartInstance.value) return // notMerge 设为 false让新配置和旧配置合并 chartInstance.value.setOption(option, false) } const resizeChart () { chartInstance.value?.resize() } onBeforeUnmount(() { chartInstance.value?.dispose() chartInstance.value null }) return { chartInstance, initChart, updateChart, resizeChart } }这里用shallowRef而不是ref是因为 ECharts 实例内部有大量循环引用和 DOM 引用深度响应式代理会拖慢 setOption 的执行速度严重时会导致图表渲染卡顿。dispose在组件卸载前调用是防止内存泄漏的关键一步大屏页面长时间不关泄漏的实例会越积越多。setOption的第二个参数notMerge默认是 false意思是新配置和旧配置合并。如果你要完全替换图表配置比如从柱状图切成折线图需要传 true。很多大屏数据刷新时图表出现残影或者旧数据不消失就是这里没处理好。3. 本地跑通从 npm install 到浏览器出图的完整命令链3.1 环境准备与依赖安装先确认 Node 版本。Vite 5 要求 Node 18 以上Node 16 会在安装依赖时报错。用node -v看一眼低于 18 就先升级。# 查看当前 Node 版本 node -v # 进入解压后的项目根目录 cd vue3-echarts-big-screen # 安装依赖推荐用 npm如果项目里有 pnpm-lock.yaml 就用 pnpm npm install # 启动开发服务器 npm run devnpm install过程中如果卡在某个包不动大概率是网络问题可以换淘宝镜像源。安装完成后npm run dev会在终端输出一个本地地址通常是http://localhost:5173。浏览器打开后如果页面白屏按 F12 看 Console 报错最常见的是某个图表组件的 DOM 还没挂载就调用了echarts.init。3.2 大屏适配方案scale 缩放 vs rem 换算大屏项目绕不开适配问题。设计稿通常是 1920×1080但实际投屏可能是 2560×1440 或者拼接屏。两种主流方案方案原理优点缺点scale 缩放整个大屏容器按比例 transform: scale实现简单视觉还原度高字体和边框会模糊交互坐标需换算rem 换算根据屏幕宽度动态设置 html 的 font-size字体清晰布局灵活需要所有尺寸用 rem开发习惯要改这份源码大概率用的是 scale 方案因为大屏项目追求视觉还原而且图表本身是 canvas 渲染缩放后模糊程度可以接受。适配代码通常长这样// utils/scale.js export function useScreenScale(designWidth 1920, designHeight 1080) { const screenRef document.getElementById(screen) const setScale () { const clientWidth window.innerWidth const clientHeight window.innerHeight // 分别计算宽高缩放比取较小值保证完整显示 const scaleX clientWidth / designWidth const scaleY clientHeight / designHeight const scale Math.min(scaleX, scaleY) screenRef.style.transform scale(${scale}) // 缩放后居中显示 screenRef.style.left ${(clientWidth - designWidth * scale) / 2}px screenRef.style.top ${(clientHeight - designHeight * scale) / 2}px } window.addEventListener(resize, setScale) setScale() return () window.removeEventListener(resize, setScale) }Math.min(scaleX, scaleY)保证大屏在超宽屏上不会溢出两侧留黑边比裁切内容好。transform-origin要设成left top否则缩放基准点不对大屏会跑偏。这个函数在onMounted里调用返回的清理函数在onBeforeUnmount里执行。3.3 ECharts5 按需引入的配置写法ECharts5 默认全量引入会让打包体积增加 1MB 左右。大屏项目图表类型固定按需引入能砍掉一半以上体积。// utils/echarts.js import * as echarts from echarts/core import { BarChart, LineChart, PieChart, MapChart } from echarts/charts import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, VisualMapComponent } from echarts/components import { CanvasRenderer } from echarts/renderers // 注册用到的图表类型和组件 echarts.use([ BarChart, LineChart, PieChart, MapChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent, VisualMapComponent, CanvasRenderer ]) export default echarts组件里从/utils/echarts引入而不是直接从echarts包引入。如果用了地图图表还需要额外引入地图 JSON 数据ECharts5 不再内置地图数据需要自己注册import chinaMap from /assets/china.json echarts.registerMap(china, chinaMap)registerMap只需执行一次放在 main.js 或者地图组件的初始化之前。如果控制台报Map china not exists就是这步漏了。4. 改配置与接数据让大屏跑你自己的业务指标4.1 图表 option 的抽取与动态更新源码里的图表 option 通常直接写在组件里要接自己的数据需要把 option 抽成函数接收数据返回配置对象。// components/BarChart.vue import { ref, onMounted, watch } from vue import { useEcharts } from /composables/useEcharts const props defineProps({ chartData: { type: Array, default: () [] } }) const chartRef ref(null) const { initChart, updateChart } useEcharts(chartRef) const getOption (data) ({ tooltip: { trigger: axis }, xAxis: { type: category, data: data.map(item item.name) }, yAxis: { type: value }, series: [{ type: bar, data: data.map(item item.value), itemStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: #00d4ff }, { offset: 1, color: #0055ff } ] } } }] }) onMounted(() { initChart(getOption(props.chartData)) }) // 监听数据变化只更新 series 和 xAxis不重建实例 watch(() props.chartData, (newData) { updateChart({ xAxis: { data: newData.map(item item.name) }, series: [{ data: newData.map(item item.value) }] }) }, { deep: true })watch里只传变化的部分ECharts 会自动合并。如果每次刷新都传完整 option 并且notMerge为 true图表会闪一下重新渲染体验很差。deep: true在数据层级深的时候有性能开销如果只是替换整个数组可以去掉 deep直接监听数组引用变化。4.2 定时刷新与 WebSocket 推送的取舍大屏数据来源两种定时轮询和 WebSocket 推送。轮询实现简单但实时性差、请求多WebSocket 实时性好但要处理断线重连。// composables/usePolling.js import { onMounted, onBeforeUnmount, ref } from vue export function usePolling(fetchFn, interval 5000) { const timer ref(null) const data ref(null) const start async () { const res await fetchFn() data.value res // 用 setTimeout 递归而不是 setInterval避免请求堆积 timer.value setTimeout(start, interval) } onMounted(() { start() }) onBeforeUnmount(() { if (timer.value) { clearTimeout(timer.value) timer.value null } }) return { data } }用setTimeout递归而不是setInterval是因为如果接口响应时间超过轮询间隔setInterval会导致请求堆积而递归setTimeout保证上一次请求完成后再计时。WebSocket 方案需要额外处理onclose重连和心跳包如果项目工期紧轮询足够用。4.3 主题色与视觉规范的统一大屏的视觉一致性靠 CSS 变量和 ECharts 主题。源码里通常会有一个theme.json或者全局 scss 变量文件。// assets/styles/variables.scss $primary-color: #00d4ff; $secondary-color: #0055ff; $text-color: #ffffff; $bg-color: #0a1a2f; $border-color: rgba(0, 212, 255, 0.3);ECharts 的 option 里颜色值直接引用这些变量改主题时只改一处。如果源码里颜色是硬编码的十六进制建议先抽成变量再改否则十几个图表挨个改容易漏。5. 避坑与排查大屏项目里最容易翻车的五个地方5.1 图表容器宽高为 0 导致初始化失败现象页面白屏Console 报Cant get DOM width or height。原因ECharts 初始化时需要读取容器宽高如果容器父级用了display: none或者v-if控制显示初始化时容器尺寸为 0。解决用v-show代替v-if或者在nextTick之后再初始化。如果必须用v-if在显示后的nextTick里调用initChart。5.2 窗口 resize 时图表不跟随现象浏览器窗口大小变化后大屏容器缩放了但图表还是原来的尺寸出现空白或溢出。原因scale 方案只缩放了外层容器ECharts 实例内部的 canvas 尺寸没有重新计算。解决在 resize 事件里同时调用chartInstance.resize()。如果图表多可以在useEcharts里统一监听 resize或者用ResizeObserver监听容器尺寸变化。const observer new ResizeObserver(() { chartInstance.value?.resize() }) observer.observe(domRef.value)5.3 内存泄漏页面切走后实例未销毁现象大屏页面反复进入退出后浏览器内存占用持续上升最终卡死。原因ECharts 实例、定时器、事件监听在组件卸载时没有清理。解决onBeforeUnmount里依次执行clearTimeout、removeEventListener、chartInstance.dispose()。用ResizeObserver的还要observer.disconnect()。5.4 地图图表报 Map not exists现象地图组件不显示Console 报Map china not exists。原因ECharts5 移除了内置地图数据需要手动注册。解决引入地图 JSON 文件并调用echarts.registerMap(china, chinaJson)。注意注册名称要和 option 里series.map的值一致。5.5 打包后白屏本地却正常现象npm run build后部署到服务器页面白屏Console 报资源 404。原因Vite 默认的base是/如果部署在子路径下资源路径不对。解决在vite.config.js里设置base: ./或者具体的子路径。同时检查路由模式大屏通常用 hash 模式避免服务器配置问题。6. 进阶把这份源码改造成可复用的企业级大屏脚手架6.1 抽离图表配置层让大屏支持远程配置源码里的图表 option 写死在组件里每次改指标都要重新打包。进阶做法是把 option 抽成 JSON 配置从接口拉取前端只负责渲染。这样运营人员改图表类型、颜色、数据源都不用发版。// 远程配置结构示例 { charts: [ { id: chart-1, type: bar, position: { x: 0, y: 0, w: 600, h: 400 }, api: /api/sales/trend, option: { xAxis: { type: category, field: name }, series: [{ type: bar, field: value }] } } ] }前端写一个通用的DynamicChart组件根据type动态引入对应的图表模块根据api拉数据根据option里的字段映射把数据填进去。这套方案的工作量在前期但后续每接一个新大屏只需要写配置 JSON不用动组件代码。6.2 用 ResizeObserver 替代 window.resizewindow.resize在拖拽窗口时触发频率极高而且无法感知容器内部尺寸变化。ResizeObserver是浏览器原生 API监听的是元素本身更精准。// composables/useResize.js import { onMounted, onBeforeUnmount, ref } from vue export function useResize(domRef, callback) { let observer null onMounted(() { if (!domRef.value) return observer new ResizeObserver((entries) { for (const entry of entries) { callback(entry.contentRect) } }) observer.observe(domRef.value) }) onBeforeUnmount(() { observer?.disconnect() observer null }) }这个组合式函数可以同时用于大屏适配和图表 resize比全局监听 window 事件干净得多。注意ResizeObserver在组件卸载时必须disconnect否则会持续持有 DOM 引用。6.3 大屏性能优化的三个具体手段第一个手段是图表懒加载。首屏只渲染可视区域内的图表滚动或切换 tab 时再初始化其他图表。ECharts 实例的创建有开销十个图表同时初始化会卡顿。第二个手段是数据降采样。如果折线图有上万个数据点渲染会非常慢。用sampling: lttb让 ECharts 自动降采样视觉上几乎无差别性能提升明显。series: [{ type: line, sampling: lttb, data: largeDataArray }]第三个手段是关闭动画。大屏数据刷新频繁时动画会拖慢渲染。在 option 里设animation: false或者只对首次渲染开动画后续更新关掉。const option { animation: true, animationDuration: 1000, animationEasing: cubicOut } // 更新时 chartInstance.setOption({ animation: false })这三个手段叠加使用能让大屏在中低端设备上也能流畅运行。我自己做大屏项目时习惯在开发阶段就打开 Chrome Performance 面板录一段看 setOption 的耗时和内存曲线如果发现某个图表每次更新都重新创建实例那就是代码写错了。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/28 16:11:35 · 阅读 1.2k Vue3+ECharts5大屏源码解析：从目录结构到企业级脚手架
简介这是一套面向前端开发者与数据可视化学习者的 Vue3 大数据大屏项目实战源码基于 Vue3、TypeScript、DataV 与 ECharts5 搭建适合想掌握大屏适配、组件封装与图表集成的初中级工程师参考练手。压缩包共 61 个文件约 2.47MB以 tsx 与 ts 承载逻辑与类型定义vue 文件组织页面视图辅以 scss、css 样式、json 配置、png 图片及字体文件整体结构清晰、模块划分明确。项目采用新版动态屏幕适配方案界面由 .vue 与 .tsx 混合实现全局渲染组件对 ECharts 区域做了统一封装并附有路由、状态管理与工具函数等目录便于理解工程化组织方式。目前已有 9026 人学习下载读者可从中获取完整的大屏页面布局、图表封装思路与屏幕适配实现对照源码快速搭建自己的可视化大屏并在此基础上按需改造引入方式以优化体积。1. 拿到一份 Vue3/ECharts5 大屏源码先别急着 npm run dev很多人拿到「Vue3/ECharts5 数据可视化大屏展示项目案例源码.zip」这类压缩包第一反应是解压、装依赖、跑起来看效果。跑通了截图发群里跑不通就丢进收藏夹吃灰。但真正决定这份源码值不值得研究的不是它跑起来好不好看而是它怎么组织大屏的布局、怎么把 ECharts5 实例和 Vue3 的响应式系统接在一起、怎么处理定时刷新和数据更新时的内存问题。大屏项目和普通后台管理系统是两种东西。后台管理系统追求表单、表格、权限、路由的完整闭环大屏追求的是固定分辨率下的视觉冲击、多图表联动、实时数据推送和长时间运行不崩。这份源码的价值在于它提供了一个可复用的骨架Vue3 的 Composition API 怎么管理多个图表实例ECharts5 的按需引入怎么配大屏适配用 scale 还是 rem数据更新时 setOption 该用哪种合并策略。适合已经会 Vue3 基础、想往企业级数据可视化方向走的开发者也适合需要快速交付一个演示大屏但不想从零搭架子的人。接下来按「拆结构 → 跑起来 → 改配置 → 避坑 → 进阶」的顺序把这份源码里真正能抄走的东西讲清楚。2. 拆开压缩包Vue3 大屏工程的目录结构与依赖选型2.1 先看 package.json判断这份源码的依赖水位拿到源码第一步不是看 src而是看根目录的 package.json。大屏项目的依赖水位直接决定了你后续能不能顺利集成到现有工程里。重点看四个东西Vue 的版本号、ECharts 的版本号、构建工具是 Vite 还是 Vue CLI、有没有引入 UI 组件库。{ name: vue3-echarts-big-screen, version: 1.0.0, scripts: { dev: vite, build: vite build, preview: vite preview }, dependencies: { vue: ^3.4.0, echarts: ^5.5.0, axios: ^1.6.0, pinia: ^2.1.0 }, devDependencies: { vite: ^5.0.0, vitejs/plugin-vue: ^5.0.0, sass: ^1.70.0 } }这段依赖清单透露了几个关键信息。Vue 3.4 配合 Vite 5说明项目用的是现代构建链路冷启动和热更新都很快。ECharts 5.5 是 5.x 系列里比较成熟的版本支持按需引入和 tree-shaking。Pinia 出现说明大屏里有跨组件共享的状态通常是全局筛选条件或者 WebSocket 推送的数据。没有看到 Element Plus 或 Ant Design Vue说明大屏的 UI 是手写的这对大屏来说反而是好事因为组件库的样式会干扰大屏的视觉统一性。如果你的现有工程是 Vue CLI 搭的把这份源码的 src 目录整体迁移过去也能跑但要注意 Vite 的环境变量前缀是VITE_Vue CLI 是VUE_APP_接口地址的读取方式需要改。2.2 src 目录的四个关键文件夹大屏工程的 src 目录通常比后台管理系统扁平因为页面少、组件复用度高。这份源码的结构大概率是下面这样src/ ├── api/ # 接口请求封装 ├── assets/ # 图片、字体、全局样式 ├── components/ # 图表组件、边框组件、数字翻牌器 ├── composables/ # 组合式函数如 useEcharts、useResize ├── router/ # 路由大屏通常只有一个页面 ├── stores/ # Pinia 状态 ├── utils/ # 工具函数如适配、格式化 ├── views/ │ └── screen/ # 大屏主页面 └── main.jscomposables文件夹是 Vue3 大屏项目的灵魂。一个成熟的useEcharts组合式函数会把图表实例的创建、setOption、resize、销毁全部封装进去组件里只需要传 DOM 引用和 option 配置。如果你拿到的源码没有这个文件夹图表逻辑全写在组件的 onMounted 里那这份源码的复用价值会打折扣但你可以自己抽一层出来。utils里通常有一个适配文件可能是flexible.js或者scale.js。大屏适配方案决定了你在不同分辨率显示器上看到的效果这个后面单独讲。2.3 图表组件怎么和 Vue3 响应式配合ECharts 实例是一个非响应式的对象把它放进ref或reactive里会导致性能问题因为 Vue3 的 Proxy 会深度代理整个实例。正确做法是用shallowRef或者普通变量存实例。import { shallowRef, onMounted, onBeforeUnmount } from vue import * as echarts from echarts export function useEcharts(domRef) { const chartInstance shallowRef(null) const initChart (option) { if (!domRef.value) return // 如果已经存在实例先销毁再创建避免重复初始化 if (chartInstance.value) { chartInstance.value.dispose() } chartInstance.value echarts.init(domRef.value) chartInstance.value.setOption(option) } const updateChart (option) { if (!chartInstance.value) return // notMerge 设为 false让新配置和旧配置合并 chartInstance.value.setOption(option, false) } const resizeChart () { chartInstance.value?.resize() } onBeforeUnmount(() { chartInstance.value?.dispose() chartInstance.value null }) return { chartInstance, initChart, updateChart, resizeChart } }这里用shallowRef而不是ref是因为 ECharts 实例内部有大量循环引用和 DOM 引用深度响应式代理会拖慢 setOption 的执行速度严重时会导致图表渲染卡顿。dispose在组件卸载前调用是防止内存泄漏的关键一步大屏页面长时间不关泄漏的实例会越积越多。setOption的第二个参数notMerge默认是 false意思是新配置和旧配置合并。如果你要完全替换图表配置比如从柱状图切成折线图需要传 true。很多大屏数据刷新时图表出现残影或者旧数据不消失就是这里没处理好。3. 本地跑通从 npm install 到浏览器出图的完整命令链3.1 环境准备与依赖安装先确认 Node 版本。Vite 5 要求 Node 18 以上Node 16 会在安装依赖时报错。用node -v看一眼低于 18 就先升级。# 查看当前 Node 版本 node -v # 进入解压后的项目根目录 cd vue3-echarts-big-screen # 安装依赖推荐用 npm如果项目里有 pnpm-lock.yaml 就用 pnpm npm install # 启动开发服务器 npm run devnpm install过程中如果卡在某个包不动大概率是网络问题可以换淘宝镜像源。安装完成后npm run dev会在终端输出一个本地地址通常是http://localhost:5173。浏览器打开后如果页面白屏按 F12 看 Console 报错最常见的是某个图表组件的 DOM 还没挂载就调用了echarts.init。3.2 大屏适配方案scale 缩放 vs rem 换算大屏项目绕不开适配问题。设计稿通常是 1920×1080但实际投屏可能是 2560×1440 或者拼接屏。两种主流方案方案原理优点缺点scale 缩放整个大屏容器按比例 transform: scale实现简单视觉还原度高字体和边框会模糊交互坐标需换算rem 换算根据屏幕宽度动态设置 html 的 font-size字体清晰布局灵活需要所有尺寸用 rem开发习惯要改这份源码大概率用的是 scale 方案因为大屏项目追求视觉还原而且图表本身是 canvas 渲染缩放后模糊程度可以接受。适配代码通常长这样// utils/scale.js export function useScreenScale(designWidth 1920, designHeight 1080) { const screenRef document.getElementById(screen) const setScale () { const clientWidth window.innerWidth const clientHeight window.innerHeight // 分别计算宽高缩放比取较小值保证完整显示 const scaleX clientWidth / designWidth const scaleY clientHeight / designHeight const scale Math.min(scaleX, scaleY) screenRef.style.transform scale(${scale}) // 缩放后居中显示 screenRef.style.left ${(clientWidth - designWidth * scale) / 2}px screenRef.style.top ${(clientHeight - designHeight * scale) / 2}px } window.addEventListener(resize, setScale) setScale() return () window.removeEventListener(resize, setScale) }Math.min(scaleX, scaleY)保证大屏在超宽屏上不会溢出两侧留黑边比裁切内容好。transform-origin要设成left top否则缩放基准点不对大屏会跑偏。这个函数在onMounted里调用返回的清理函数在onBeforeUnmount里执行。3.3 ECharts5 按需引入的配置写法ECharts5 默认全量引入会让打包体积增加 1MB 左右。大屏项目图表类型固定按需引入能砍掉一半以上体积。// utils/echarts.js import * as echarts from echarts/core import { BarChart, LineChart, PieChart, MapChart } from echarts/charts import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, VisualMapComponent } from echarts/components import { CanvasRenderer } from echarts/renderers // 注册用到的图表类型和组件 echarts.use([ BarChart, LineChart, PieChart, MapChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent, VisualMapComponent, CanvasRenderer ]) export default echarts组件里从/utils/echarts引入而不是直接从echarts包引入。如果用了地图图表还需要额外引入地图 JSON 数据ECharts5 不再内置地图数据需要自己注册import chinaMap from /assets/china.json echarts.registerMap(china, chinaMap)registerMap只需执行一次放在 main.js 或者地图组件的初始化之前。如果控制台报Map china not exists就是这步漏了。4. 改配置与接数据让大屏跑你自己的业务指标4.1 图表 option 的抽取与动态更新源码里的图表 option 通常直接写在组件里要接自己的数据需要把 option 抽成函数接收数据返回配置对象。// components/BarChart.vue import { ref, onMounted, watch } from vue import { useEcharts } from /composables/useEcharts const props defineProps({ chartData: { type: Array, default: () [] } }) const chartRef ref(null) const { initChart, updateChart } useEcharts(chartRef) const getOption (data) ({ tooltip: { trigger: axis }, xAxis: { type: category, data: data.map(item item.name) }, yAxis: { type: value }, series: [{ type: bar, data: data.map(item item.value), itemStyle: { color: { type: linear, x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: #00d4ff }, { offset: 1, color: #0055ff } ] } } }] }) onMounted(() { initChart(getOption(props.chartData)) }) // 监听数据变化只更新 series 和 xAxis不重建实例 watch(() props.chartData, (newData) { updateChart({ xAxis: { data: newData.map(item item.name) }, series: [{ data: newData.map(item item.value) }] }) }, { deep: true })watch里只传变化的部分ECharts 会自动合并。如果每次刷新都传完整 option 并且notMerge为 true图表会闪一下重新渲染体验很差。deep: true在数据层级深的时候有性能开销如果只是替换整个数组可以去掉 deep直接监听数组引用变化。4.2 定时刷新与 WebSocket 推送的取舍大屏数据来源两种定时轮询和 WebSocket 推送。轮询实现简单但实时性差、请求多WebSocket 实时性好但要处理断线重连。// composables/usePolling.js import { onMounted, onBeforeUnmount, ref } from vue export function usePolling(fetchFn, interval 5000) { const timer ref(null) const data ref(null) const start async () { const res await fetchFn() data.value res // 用 setTimeout 递归而不是 setInterval避免请求堆积 timer.value setTimeout(start, interval) } onMounted(() { start() }) onBeforeUnmount(() { if (timer.value) { clearTimeout(timer.value) timer.value null } }) return { data } }用setTimeout递归而不是setInterval是因为如果接口响应时间超过轮询间隔setInterval会导致请求堆积而递归setTimeout保证上一次请求完成后再计时。WebSocket 方案需要额外处理onclose重连和心跳包如果项目工期紧轮询足够用。4.3 主题色与视觉规范的统一大屏的视觉一致性靠 CSS 变量和 ECharts 主题。源码里通常会有一个theme.json或者全局 scss 变量文件。// assets/styles/variables.scss $primary-color: #00d4ff; $secondary-color: #0055ff; $text-color: #ffffff; $bg-color: #0a1a2f; $border-color: rgba(0, 212, 255, 0.3);ECharts 的 option 里颜色值直接引用这些变量改主题时只改一处。如果源码里颜色是硬编码的十六进制建议先抽成变量再改否则十几个图表挨个改容易漏。5. 避坑与排查大屏项目里最容易翻车的五个地方5.1 图表容器宽高为 0 导致初始化失败现象页面白屏Console 报Cant get DOM width or height。原因ECharts 初始化时需要读取容器宽高如果容器父级用了display: none或者v-if控制显示初始化时容器尺寸为 0。解决用v-show代替v-if或者在nextTick之后再初始化。如果必须用v-if在显示后的nextTick里调用initChart。5.2 窗口 resize 时图表不跟随现象浏览器窗口大小变化后大屏容器缩放了但图表还是原来的尺寸出现空白或溢出。原因scale 方案只缩放了外层容器ECharts 实例内部的 canvas 尺寸没有重新计算。解决在 resize 事件里同时调用chartInstance.resize()。如果图表多可以在useEcharts里统一监听 resize或者用ResizeObserver监听容器尺寸变化。const observer new ResizeObserver(() { chartInstance.value?.resize() }) observer.observe(domRef.value)5.3 内存泄漏页面切走后实例未销毁现象大屏页面反复进入退出后浏览器内存占用持续上升最终卡死。原因ECharts 实例、定时器、事件监听在组件卸载时没有清理。解决onBeforeUnmount里依次执行clearTimeout、removeEventListener、chartInstance.dispose()。用ResizeObserver的还要observer.disconnect()。5.4 地图图表报 Map not exists现象地图组件不显示Console 报Map china not exists。原因ECharts5 移除了内置地图数据需要手动注册。解决引入地图 JSON 文件并调用echarts.registerMap(china, chinaJson)。注意注册名称要和 option 里series.map的值一致。5.5 打包后白屏本地却正常现象npm run build后部署到服务器页面白屏Console 报资源 404。原因Vite 默认的base是/如果部署在子路径下资源路径不对。解决在vite.config.js里设置base: ./或者具体的子路径。同时检查路由模式大屏通常用 hash 模式避免服务器配置问题。6. 进阶把这份源码改造成可复用的企业级大屏脚手架6.1 抽离图表配置层让大屏支持远程配置源码里的图表 option 写死在组件里每次改指标都要重新打包。进阶做法是把 option 抽成 JSON 配置从接口拉取前端只负责渲染。这样运营人员改图表类型、颜色、数据源都不用发版。// 远程配置结构示例 { charts: [ { id: chart-1, type: bar, position: { x: 0, y: 0, w: 600, h: 400 }, api: /api/sales/trend, option: { xAxis: { type: category, field: name }, series: [{ type: bar, field: value }] } } ] }前端写一个通用的DynamicChart组件根据type动态引入对应的图表模块根据api拉数据根据option里的字段映射把数据填进去。这套方案的工作量在前期但后续每接一个新大屏只需要写配置 JSON不用动组件代码。6.2 用 ResizeObserver 替代 window.resizewindow.resize在拖拽窗口时触发频率极高而且无法感知容器内部尺寸变化。ResizeObserver是浏览器原生 API监听的是元素本身更精准。// composables/useResize.js import { onMounted, onBeforeUnmount, ref } from vue export function useResize(domRef, callback) { let observer null onMounted(() { if (!domRef.value) return observer new ResizeObserver((entries) { for (const entry of entries) { callback(entry.contentRect) } }) observer.observe(domRef.value) }) onBeforeUnmount(() { observer?.disconnect() observer null }) }这个组合式函数可以同时用于大屏适配和图表 resize比全局监听 window 事件干净得多。注意ResizeObserver在组件卸载时必须disconnect否则会持续持有 DOM 引用。6.3 大屏性能优化的三个具体手段第一个手段是图表懒加载。首屏只渲染可视区域内的图表滚动或切换 tab 时再初始化其他图表。ECharts 实例的创建有开销十个图表同时初始化会卡顿。第二个手段是数据降采样。如果折线图有上万个数据点渲染会非常慢。用sampling: lttb让 ECharts 自动降采样视觉上几乎无差别性能提升明显。series: [{ type: line, sampling: lttb, data: largeDataArray }]第三个手段是关闭动画。大屏数据刷新频繁时动画会拖慢渲染。在 option 里设animation: false或者只对首次渲染开动画后续更新关掉。const option { animation: true, animationDuration: 1000, animationEasing: cubicOut } // 更新时 chartInstance.setOption({ animation: false })这三个手段叠加使用能让大屏在中低端设备上也能流畅运行。我自己做大屏项目时习惯在开发阶段就打开 Chrome Performance 面板录一段看 setOption 的耗时和内存曲线如果发现某个图表每次更新都重新创建实例那就是代码写错了。希望帮到你。本文还有配套的精品资源点击获取