简介这是一套 Vue 大屏可视化项目实例集合同时覆盖 Vue2 与 Vue3 工程形态面向需要完成课程设计、毕业设计、大作业、工程实训或希望快速搭建数据可视化大屏的开发者。压缩包内共 187 个文件整体约 31MB核心源码集中在 49 个 js、37 个 vue 与 37 个 css 文件中另配有多张 png/jpg/gif 图片、HTML 入口、map 映射、字体和项目配置等辅助内容。不同大屏实例按目录组织便于直接定位和对照查看。这些工程并非只包含静态页面还涉及数据请求、图表展板、样式适配、组件拆分等常见落地细节。所有源码经过严格测试确认功能正常后才上传可直接运行也可直接修改复刻目前已有 2005 人学习下载。对初学者可从项目搭建、页面布局、样式适配逐步模仿对进阶学习者则可基于图表组件、数据模块和代码结构继续扩展用于新的大屏项目或真实业务数据接入。1. 一套能直接跑的 Vue 大屏实例集合远比自己搭脚手架省事做数据可视化大屏这件事最花时间的往往不是图表的配置而是从零搭一套完整的 Vue2/Vue3 工程、配好自适应布局、写好公共边框和滚动表格。这套 Vue 大屏实例集合解决的正是这个问题它把若干个可运行的大屏项目打包在一起覆盖了后台监控、政务数据、运营分析等常见可视化场景每个实例都包含完整的页面、组件、图表、mock 数据和适配方案。你不需要从空目录开始敲脚手架解压后装依赖就能看到效果。适合正在做可视化项目、需要快速出效果给业务方看或者想研究别人大屏工程结构的前端开发者。2. 实例集合的内在结构Vue2 / Vue3 两套并存选型逻辑要先看懂2.1 解压后的目录长什么样先别急着跑npm install花几分钟把压缩包解开看一下整体结构。这类实例集合通常不是单个项目而是按“大屏场景”拆分的子项目或者一个大工程里按路由分多个页面。我见过的是后一种居多一个主工程下挂多个 view每个大屏一个目录互相独立共用组件和工具函数。典型结构如下project-X/ ├─ package.json ├─ vue.config.js # 老一批 vue-cli 项目的配置文件 ├─ vite.config.js # 新一批 vite 项目的配置文件两套并存 ├─ public/ │ └─ static/images/ # 大屏背景图、logo └─ src/ ├─ main.js ├─ App.vue ├─ router/ │ └─ index.js # 每个大屏对应一条路由 ├─ views/ │ ├─ energy-dashboard/ # 园区能耗大屏 │ ├─ monitor-screen/ # 运维监控大屏 │ └─ market-board/ # 运营数据看板 ├─ components/ │ ├─ BorderBox/ # 各种科技感边框 │ ├─ ScrollTable/ # 滚动列表 │ └─ NumberFlip/ # 数字翻牌 ├─ mock/ │ ├─ energy.json │ └─ monitor.json └─ utils/ ├─ flexible.js # rem 适配 ├─ resize.js # scale 缩放适配 └─ request.js # axios 封装先看懂views/和components/的关系很有用。每个大屏页面的逻辑都在views/xxx/index.vue里公共的边框、图表容器、滚动表格被抽到了components/。你改数据看mock/改布局看views/改通用样式看components/。如果某个实例的目录结构不是这样而是每个大屏单独一个完整工程那就要注意了公共能力可能没有下沉改造时每个大屏要分别维护成本高不少。2.2 Vue2 与 Vue3 实例的依赖差异这套集合最值得注意的一点是 Vue2 和 Vue3 的实例同时存在。老项目大多基于 vue-cli 4 webpack新项目基于 Vite。依赖版本差异直接决定你启动时会不会翻车对比项Vue2 老实例Vue3 新实例脚手架vue-cli 4 / webpackVite 4 或 5语言JavaScript Options APIJavaScript Composition APIECharts4.x按需引入5.x按需引入适配方案flexible.js remtransform: scale样式scss 全局变量scss css variables数据mock 文件 定时器axios 轮询 mock为什么两套并存因为历史项目里有一批大屏是 2020 年前后做的当时 Vue2 是绝对主力而且配套的地图组件、旧版 ECharts 插件只兼容 Vue2。后加的实例用 Vue3 是为了更好维护和上新技术栈。你在选实例时不用盲目追求 Vue3——如果你的部署环境是老旧浏览器Vue2 那批反而更稳如果是新项目且对后续扩展有要求选 Vue3 实例。2.3 按场景拆解实例改起来才快集合里的大屏实例不是简单换个标题而是场景化设计过的。看几个典型场景就明白它们的差异园区能耗大屏左侧是设备列表和告警信息中间是能耗趋势折线图右侧是电水气占比的环形图。这类屏偏后台监控强调的是“状态实时变化”轮询数据是核心。运维监控大屏主体是一个大图机柜分布、链路拓扑四周是 KPI 卡片和小图表颜色偏暗色科技风。这类屏对图表交互要求不高但对地图和拓扑图的渲染性能有要求。运营数据看板以柱状图、饼图、排名列表为主视觉偏亮色系强调“给领导演示”所以动画效果做得比较多。理解场景差异后再去改代码就快了后台监控类重点改接口轮询和告警逻辑演示类重点改动画时长和视觉配色。不要一上来就把一个亮色演示屏改成暗色监控屏因为主题变量、背景图、组件配色是整套联动的硬改会改出一堆视觉死角。3. 从跑通到改造一条可复现的大屏落地流程3.1 装依赖与启动先让页面起来拿到集合后第一件事是安装依赖。直接用默认源装容易在网络波动时卡住我一般习惯用国内镜像源命令如下# 在工程根目录执行指定镜像源减少超时风险 npm install --registryhttps://registry.npmmirror.com # 如果遇到 peerDependencies 冲突加 --legacy-peer-deps 重试 npm install --legacy-peer-deps装完依赖后启动开发服务如果是 Vite 工程执行npm run dev如果是 vue-cli 工程执行npm run serve。这里有个很实用的参数Vite 启动时加上--host可以暴露局域网地址方便你用手机或另一台电脑访问大屏效果。命令是npm run dev -- --host。启动成功后先逐个打开路由列表里的大屏确认哪些页面能跑、哪些页面报错。集合类资源经常出现个别页面依赖了未安装的额外包比如地图组件库缺失会导致地图区域空白。这一步是为了提前摸清哪些实例是完整的不要等改到一半才发现页面起不来。3.2 定位可改点先找数据文件再找图表配置大屏页面改起来最需要区分的是“数据来源”和“图表配置”两层。常见做法是页面组件从 mock 文件取数图表配置写死在组件的option里。先打开一个实例的index.vue你会看到类似下面的结构// views/energy-dashboard/index.vue简化示例 import { ref, onMounted } from vue import energyMock from /mock/energy.json // 静态数据入口 import * as echarts from echarts const chartRef ref(null) const chart ref(null) onMounted(() { chart.value echarts.init(chartRef.value) renderChart(energyMock.data) }) function renderChart(data) { chart.value.setOption({ series: [{ type: line, data: data.trend, // 改数据源只动这里 smooth: true, lineStyle: { width: 2 } }] }) }数据入口和渲染逻辑是分离的。改 mock 数据里的data.trend数组图表就会跟着变不需要动任何图表配置。参数说明smooth控制折线是否平滑改成false就是直角折线lineStyle.width控制线宽大屏一般在 23 之间太粗会显得不够精致。初次改造时建议先只替换数据和标题不要动setOption里的配置项否则可能因为坐标轴、tooltip 联动关系没理清而把图表改花。3.3 第一次实际改造标题、主题色和默认数据跑通之后可以做一次最小化改造来验证自己对结构理解对不对。改三个地方大屏顶部标题一般在index.vue模板里找到固定文案直接替换。主题色多数实例用 SCSS 变量统一管理全局搜$primary-color这类变量名改成你自己的品牌色。默认数据打开mock/xxx.json把数组里的数值随机替换几个刷新页面看图表是否随之变化。// src/styles/variables.scss // 实例集合里统一维护的主题变量 $primary-color: #00e4ff; // 改成你的主色注意同时看饱和度和亮度 $panel-bg: rgba(6, 30, 50, 0.8); // 面板背景 $font-color: #e0e6f0; // 主文字色提示改主题色时不要只看色值还要看透明度rgba的最后一个参数。大屏背景是深色的透明度低于 0.6 时文字可读性会显著下降。这一步做完你已经可以自信地说这个实例在你的环境里跑通了。接下来再深入做真实接口对接和自适应调整那才是在生产环境里真正会被追着问的部分。4. 数据对接与自适应改造从写死 JSON 到真实可交付4.1 把 mock 数据换成 axios 请求集合里的实例默认走本地 mock 数据真实项目里不可能让业务方去改 JSON 文件。标准做法是封装一个 request 实例把数据获取从静态导入改成异步请求// src/utils/request.js import axios from axios const request axios.create({ baseURL: /api, // 走 vite/webpack 代理避免跨域 timeout: 10000, // 大屏接口一般 10s 超时足够 headers: { Content-Type: application/json } }) // 请求拦截器统一带 token 或设备标识 request.interceptors.request.use(config { const token localStorage.getItem(screen_token) if (token) config.headers.Authorization Bearer ${token} return config }) export default request页面里原来import energyMock from /mock/energy.json的地方改成在onMounted里请求数据import request from /utils/request async function fetchData() { const res await request.get(/screen/energy, { params: { area: east, period: last24h } }) chart.setOption(buildOption(res.data)) }这里baseURL设为/api是常用的规避跨域手段通过开发服务器的代理转发到后端。timeout: 10000的含义是接口十秒没响应就放弃大屏项目里这很重要——如果后端服务宕机轮询接口会一直堆积10 秒超时能及时断掉避免浏览器被阻塞。生产环境里baseURL会改成网关地址但用相对路径/api仍是兼容性最稳的做法。4.2 定时轮询必须绑定生命周期清理大屏多数场景需要自动刷新数据。很多人在onMounted里塞一个setInterval然后组件销毁时忘记清理。在单页应用里路由切换后定时器还在跑接口请求会打到不存在的页面上下文里图表实例也可能已经销毁随后报错把控制台刷屏。正确写法是import { onMounted, onUnmounted, ref } from vue const timer ref(null) function startPolling() { timer.value setInterval(async () { const res await request.get(/screen/energy) updateCharts(res.data) }, 30000) // 刷新间隔30 秒 } function updateCharts(data) { // 逐个更新图表实例的 series 数据 chart.setOption({ series: [{ data: data.trend }] }) } onMounted(() { fetchData() // 进来先拉一次不要等 30 秒后才出数据 startPolling() }) onUnmounted(() { clearInterval(timer.value) // 离开大屏页面时清掉定时器 })轮询间隔选 30 秒是有讲究的。大屏是给上级查看的展示型界面不是交易系统不需要秒级实时间隔太短会让服务器承受无谓压力间隔太长又显得数据不新鲜。一般常规监控类数据 3060 秒一次告警类数据才考虑 5 秒一次。另外页面第一次进入时一定要先手动fetchData()再启动定时器否则用户看到的前几秒是空数据。4.3 两套自适应方案怎么选集合里老实例大多用 flexible.js 做 rem 适配新实例用transform: scale。这两个方案各有利弊先看对比适配方案原理优点缺点flexible rem根字号随屏幕宽度缩放所有 rem 单位自动变化文字、边距整体等比缩放代码透明依赖设计稿基准宽图表 canvas 不会自动缩放transform: scale整个容器按宽高比缩放图表和 dom 一起缩放效果最“整”周围留白或放大裁切坐标定位固定如果实例用的是 flexible.js它的核心逻辑是这样的// utils/flexible.js基于 1920 设计宽计算根字号 function resize() { const baseWidth 1920 // 设计稿基准宽度 const clientWidth document.documentElement.clientWidth const fontSize (clientWidth / baseWidth) * 100 document.documentElement.style.fontSize fontSize px } window.addEventListener(resize, resize) resize()这段代码的效果是把屏幕宽度除以设计稿宽度得到一个比例系数再乘以 100 作为根字号。页面里所有用rem写的尺寸都会跟着这个值等比缩放。注意两个参数baseWidth必须和你 UI 设计稿一致不是随便写的根字号放大到 100px 是为了让 1rem 100px开发时好换算比如设计稿 16px 就写0.16rem。用 rem 方案时最容易踩的坑是 ECharts 的 canvas 不认 rem。图表宽度通常从容器获取容器尺寸变了图表不会自动跟着变需要在resize事件里手动调用chart.resize()function onWindowResize() { chart.resize() // 通知 echarts 重新计算大小 } window.addEventListener(resize, onWindowResize)如果你的实例是transform: scale方案则不需要管 ECharts 的 resize整个大屏容器被 CSS 缩放图表会跟随视觉大小同步变化。这套方案更适合分辨率固定的大屏投放场景但要注意缩放后鼠标坐标和点击区域会偏移需要做坐标换算。5. 避坑与常见问题大屏实例复现中的五个翻车点5.1 npm install 报 ELIFECYCLEnode-sass 编译失败老一批 Vue2 实例依赖 node-sass而 node-sass 对 Node 版本非常敏感。现象是npm install执行到一半报错显示gyp ERR! ELIFECYCLE或node-sass编译失败。原因是本机 Node 版本太高比如 18 以上而项目里 node-sass 版本太旧找不到对应版本的二进制文件。解决思路是不要硬刚 node-sass。优先看package.json里有没有sass替代依赖没有的话安装sass并替换先删掉node_modules和package-lock.json再把node-sass模块改成sass。如果项目必须用 node-sass就安装低版本 Node比如用 nvm 切到 14 或 16再重新安装依赖。5.2 ECharts 图表区域空白容器高度为 0启动成功后页面出来了但所有图表是中空的控制台没有报错。最常见的根因是图表容器父级使用了百分比高度而父级没有明确高度导致容器实际高度为 0。ECharts 初始化时拿到的宽高是 0渲染出来自然空白。解决方式是给图表容器一个明确的高度。我们在大屏中经常把图表放在flex布局的卡片里需要在卡片内部给图表区域height: 300px或flex: 1同时约束 min-height。另外实例集合里有些大屏在v-if控制的布局下渲染图表等 DOM 挂载后再init才能拿到正确高度必要时加一句nextTick再初始化。5.3 build 后部署在子路径下所有图片和接口 404本地开发正常执行npm run build后部署到服务器二级目录页面打开了但图片全裂、接口地址少了一截路径。原因是构建资源路径写死了绝对路径/部署环境实际在/screen/子目录下。Vite 工程在vite.config.js里设置base: ./vue-cli 工程在vue.config.js里设置publicPath: ./。这里我一般会确认一下部署路径层级如果静态资源嵌套更深要手动改成完整相对路径。接口地址也要注意baseURL如果写成绝对路径部署后同样会找不到建议把接口请求也改成相对路径走代理。5.4 路由切换后控制台刷屏图表实例没有销毁大屏页面切到其他路由再切回来控制台开始刷Get ctx of undefined之类的报错。原因是echarts.init创建的实例没有在组件销毁时调用dispose实例残留还在监听着窗口事件或者组件重新渲染时对同一个 DOM 节点重复初始化。解决方式是在组件销毁生命周期里手动释放实例。之前 4.2 节讲过onUnmounted清理定时器这里同样要加一行onUnmounted(() { if (chart.value) { chart.value.dispose() chart.value null } clearInterval(timer.value) })dispose的作用是释放 ECharts 实例占用的浏览器内存和事件绑定不调用它的话长时间在大屏间切换页面会明显变卡。这也是大屏项目最容易被忽略的内存泄漏来源。5.5 rem 适配下ECharts 字体越变越大用 flexible.js 的方案页面里用 rem 写的文字缩放正常但 ECharts 内部的axisLabel文字尺寸不会自适应。更麻烦的是如果你给 ECharts 的fontSize也写了 rem屏幕变宽时根字号变大图表文字会跟着膨胀导致图表标题溢出画布。解决方式是把 ECharts 的字体、间距全部锁定为 px 值不要让它们走 rem 体系。大屏设计稿基准如果是 1920就直接在配置里统一写 12px、14px搭配chart.resize()保证画布大小变化文字尺寸保持稳定。这也是为什么新一批 Vue3 实例改用transform: scale的原因整块缩放彻底避开了 ECharts 字体 rem 化的问题。如果你被迫维护 rem 老项目遇到图表字体缩放异常时不要怀疑是计算问题直接锁 px 是最快的后悔药。6. 进阶用法把多个实例抽成自己的大屏组件骨架6.1 只留骨架去掉业务当你同时打开集合里三四个大屏页面会发现重复度极高顶部是标题和时间左右两侧是面板卡片底部或中央是主图表。与其每次从不同实例里复制粘贴不如把它们的公共骨架抽出来做一个通用的大屏容器组件。我建议的抽取方式是提炼一个ScreenLayout组件接收插槽和配置项把页面的公共逻辑集中管理// components/ScreenLayout/index.vue思路简化版 template div classscreen-layout header classlayout-header span classtitle{{ title }}/span span classtime-display{{ currentTime }}/span /header main classlayout-body slot nameleft-panel / slot namecenter-panel / slot nameright-panel / /main /div /template script setup import { ref, onMounted, onUnmounted } from vue const props defineProps({ title: { type: String, default: 数据可视化大屏 }, refreshInterval: { type: Number, default: 30000 } }) const currentTime ref() function updateTime() { const now new Date() currentTime.value ${now.toLocaleDateString()} ${now.toLocaleTimeString()} } const timer setInterval(updateTime, 1000) onMounted(updateTime) onUnmounted(() clearInterval(timer)) /script这个组件的价值在于把标题、时钟、整体三栏布局这些所有大屏都有的东西收进一个黑匣子业务页面只关心自己左侧、中间、右侧要放什么图表。refreshInterval参数可以控制整个大屏的刷新节奏子图表自己监听这个值做轮询就不用每个页面都写一遍定时器。6.2 数据入口统一收敛再进一步我给所有大屏页面强制了一个约定页面组件内不允许出现setInterval和echarts.init只允许调用一个useScreenData的 composable它负责请求、轮询、异常处理。这样拆过三四个实例后大屏开发变成搭积木——选布局、填图表、配数据源。从那以后我每次接到大屏需求都会先花一两个小时把这套集合里对口的组件和样式抽一遍而不是从零写边框和标题栏。这种“先抽骨架再填内容”的方式帮我避开了很多重复改样式的体力活也让我在遇到新需求时能快速判断出工作量。希望这套思路和这份实例集合在使用中也能帮到你。本文还有配套的精品资源点击获取