简介：面向Vue学习者与前端开发者的疫情数据可视化大屏项目源码，适合需要快速搭建数据看板或学习大屏交互方案的中级开发者。项目基于Vue生态构建，包含数据模拟、API请求封装、路由配置及多个可视化组件模块，如省级排名柱状图、数据地图、治愈与死亡趋势、当前确诊对比等，能够完整演示从数据获取到图表渲染的大屏实现流程。压缩包共34个文件，以vue组件、js逻辑、json数据三类为主，辅以HTML入口、图标及配置文件，整体仅724KB，结构紧凑便于本地运行与二次改造。目前已有475人学习下载。通过该源码可掌握大屏项目目录组织方式、常见可视化图表接入思路以及组件化拆分技巧，对独立完成数据可视化类作品或课程设计有直接参考价值。
1. 基于Vue的疫情数据可视化大屏到底解决什么问题
打开这个标题的人，大概率是两类：一类接了一个要做疫情数据可视化大屏的活儿，想找一套能改能跑的源码；另一类想把 Vue 路由、组件化、ECharts 配置和大屏适配串成一个完整项目来学。两类人真正要的一致：不是一张好看的截图，而是一套从数据到像素都讲得清的工程方案。这个标题的本质，就是用 Vue 全家桶搭一块 16:9 全屏展示的数据大屏，把累计确诊、新增趋势、地区分布这类指标变成可维护的图表，而不是静态页面。它管的是组件和路由，图表交给 ECharts，数据用 mock 先顶住，后端就绪后随时可以切真实接口。适合前端初中级开发者做作品集，也适合需要快速交付演示屏的团队。下面按技术选型、组件实现、适配性能和排错路径一步步展开，每个环节都给可直接抄的参数和代码。
2. 从零初始化一套大屏源码工程：技术选型与数据链路
打开任何一套开发中的数据大屏源码，第一件事都不是看图表怎么配的，而是确认这套技术栈能在你机器上跑起来、数据从哪来、路由怎么走。很多教程默认你已经解决了 vue 安装及环境配置，结果新手全卡在第一步的依赖报错上。这一章先把选型理由讲透，再给你一套能直接用的目录结构和数据链路设计，后面写图表才有地方放。
2.1 选型逻辑：为什么是 Vue，为什么路由要用 hash 模式
大屏本质上是一个展示型单页应用，对服务端渲染没有刚需，所以 Vue 3 + Vite 是目前最舒服的组合。Vite 的冷启动速度比 vue-cli 快一个量级，而大屏开发里改图表配置是最高频的操作，改完一秒内热更新和等三秒刷新，对开发体验的影响是决定性的。如果你接手的是团队里已有的 Vue 2 项目，也别急着折腾重构，ECharts 5 对 Vue 2 和 Vue 3 都兼容，真正要关注的是路由模式和数据响应式这两个边界。
路由建议直接用 hash 模式，这是一个很容易被忽略的坑。数据大屏经常要部署到 nginx 的子路径，或者打包成一个静态目录直接扔给客户跑，用 history 模式在这种场景下必须让后端配合做 rewrite，否则一刷新就是 404。hash 模式虽然 URL 里多个#，但在这个场景下换来的稳定性非常值。Vue Router 4 里创建路由时默认就是 hash，你只需要显式写上createWebHashHistory，团队里的新人也一眼能看懂意图。
2.2 项目初始化：一条命令跑出可运行的最小工程
一套源码能不能跑起来，往往取决于初始化步骤是否干净。我习惯用 Vite 官方脚手架创建工程，不需要额外配置一堆 loader，装完依赖直接npm run dev就能看到页面。具体命令如下：
npm create vite@latest epidemic-screen -- --template vue cd epidemic-screen npm install vue-router@4 echarts npm run dev逻辑说明：npm create vite是当前创建 Vue 3 工程最干净的方式，--template vue会生成基于组合式 API 的模板，省去手动搭 Vite 配置的步骤；vue-router@4是 Vue 3 对应的路由版本，echarts不锁版本号时默认安装最新的 5.x，兼容性没问题。跑完npm run dev后，Vite 默认开 5173 端口，浏览器能打开就说明 vue 安装及环境配置已经过了。
工程初始化完成后，还需要做两件事。第一件是把开发端口固定下来，大屏项目经常要同时联调后端接口，端口漂移会导致跨域配置反复修改，在vite.config.js里加一行server: { port: 8088 }就能固定。第二件是设置路径别名，把@指向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允许局域网内其他设备通过 IP 访问，大屏演示时经常要用另一台电脑或平板投屏，这个配置能省掉代理工具的麻烦。alias里的路径是基于node:url计算的，Windows 和 macOS 通用。
2.3 目录结构：按功能拆组件，而不是按页面拆
看过很多大屏源码，最容易翻车的结构是把所有图表堆在一个Screen.vue里，数据请求、图表初始化、定时器全混在一起。这种写法短期跑得通，但只要有一天要换数据源，或者新增一个图表，就会牵连出一堆副作用。我一般按功能把代码拆成下面这样：
src/ ├── api/ │ └── epidemic.js # 唯一的数据出口，组件只认这个目录 ├── assets/ │ ├── geo/ # 中国地图 / 省份 GeoJSON │ └── style/ # 全局主题变量、大屏背景 ├── components/ │ ├── charts/ # 图表组件，一个图表一个文件 │ ├── layout/ # 大屏框架组件，Header、SidePanel │ └── common/ # 数字滚动、边框、标题等复用组件 ├── mock/ │ └── data.js # 没有后端时先用静态数据顶住 ├── router/ │ └── index.js # 路由配置，主屏 + 下钻详情页 ├── views/ │ ├── Screen.vue # 大屏主页面 │ └── Detail.vue # 图表下钻详情页 └── App.vue逻辑说明：components/charts是这套源码里最核心的目录，每个图表独立成一个单文件组件，自己管自己的 ECharts 实例；mock目录专门放静态数据，等后端接口就绪后只改api/epidemic.js这一个文件，所有图表组件完全不动。很多项目失败在数据层和组件层强耦合，这个结构的价值就是让数据源可替换。路由上建议保留一个Detail.vue，因为大屏交互经常要“点击省份跳详情”，预留坑位比临时加路由要省事得多。
2.4 数据链路：mock、模拟接口和真实 API 怎么和平共处
数据可视化大屏的常见死法是后端还没好，前端拿一个写死的 JSON 开始开发，等接口好了再回头改所有调用的地方。正确做法是设计一个统一的数据出口，组件层永远只认 Promise 返回值，不关心数据是从 mock 来的还是 axios 来的。下面是我常用的写法：
// api/epidemic.js —— 唯一的数据出口 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 的函数，组件调用时用await等待结果。mock 阶段用动态import加载静态数据，换真实接口时只需要改函数内部的实现，对外契约不变。参数id是省份编码，overview是全局概要指标，这两个字段名在 mock 和真实接口里保持一致，后续切换零成本。这么做还有一个好处：并行开发时前端不需要等后端，自己就能把大屏全部功能跑通。
3. 核心图表实现：把疫情指标拆成可维护的 ECharts 组件
这一章进入源码的主体部分。企业级数据可视化的习惯是每个图表独立成一个组件，自己初始化、自己销毁、自己订阅数据，而不是把十几张图全堆在页面里。下面以三个最典型的疫情大屏组件为例：趋势折线图、地区分布地图、核心指标卡片，每个都给出可直接运行的代码和关键参数说明。
3.1 趋势折线图：时间序列的配置要点与数据更新策略
趋势图是疫情大屏里最常被盯着看的一块，现有确诊、新增治愈、新增死亡都适合用平滑折线表达。组件内部维护 ECharts 实例，通过setOption更新数据，重点在于销毁时释放实例，否则切路由后 Canvas 会残留。
<template> <div ref="chartRef" class="trend-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: '人数', scale: true }, series: [{ name: '现有确诊', 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')拿到的数据对象里包含dates和values两个数组，分别对应 x 轴和 y 轴。smooth: true让折线变平滑，适合展示连续日期的疫情趋势；showSymbol: false是数据点太多时防止圆点密密麻麻的关键参数。boundaryGap: false让折线从第一个点开始，贴合坐标轴左边界。
scale: true这个参数经常被人忽略，它的作用是当数据最小值离 0 很远时，y 轴自动压缩，让波动更明显；但如果想强调“从零开始”的对比，就不该开这个参数。另外，onBeforeUnmount里调用dispose是必须的，Vue 组件销毁后 DOM 也会被移除，ECharts 实例不手动释放会造成内存泄漏，这也是很多大屏越用越卡的主要原因。
3.2 地图组件：动态注册 GeoJSON 与视觉映射配置
疫情大屏几乎必有一块中国地图，按省份着色表示累计确诊量。地图组件最容易踩的坑是地图数据没有注册，ECharts 5 之后的版本不再内置地图，必须先用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静态引入，打包时会自动处理路径，避免运行时 404。mapData的数据格式要求是[{ name: '湖北', value: 67800 }, ...]，name必须和 GeoJSON 里的省名完全一致，比如“湖北”不能写成“湖北省”。获取地图背景数据不要太依赖线上 CDN；常见的做法是发布前把 GeoJSON 下载到本地assets/geo/目录，和源码一起走版本管理。
visualMap有四个关键参数：min和max决定颜色映射范围，max这里取数据最大值，保证颜色分布有区分度；calculable: true显示可拖动的滑块，方便人手工筛选区间；inRange.color是四段渐变色。roam: true允许缩放和拖拽，在大屏演示时观众经常会要求看一眼某个省份的细节，这个参数一定要开。
3.3 指标卡片：把环比计算封进组件，避免每个页面重写
大屏顶部通常是一排数字卡片：累计确诊、累计治愈、累计死亡、现有确诊，每张卡片还要显示“较昨日 +xxx”或者“较昨日 -xxx”。这个逻辑从数据上就是简单的减法，但如果不封装，每个页面都会复制粘贴一份加减法代码。把环比计算收进卡片组件里，父级只负责传当前值和昨日值。
<template> <div class="stat-card"> <div class="label">{{ label }}</div> <div class="value">{{ value.toLocaleString() }}</div> <div class="diff" :class="diffClass"> 较昨日 {{ 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>逻辑说明：卡片本身不请求数据，而是通过props接收label、value、prev三个参数。value.toLocaleString()是让数字每隔三位加一个逗号，大屏上显示67,800比67800更专业。diffText这个计算属性处理正负号的格式化，+123和-45能直接用。diffClass控制上涨和下降时的颜色样式，上涨为红色、下降为绿色，这是国内大屏约定俗成的配色习惯，除非客户明确要求别用，否则不要反着来。
这套设计的好处是，主页面里写<StatCard label="累计确诊" :value="overview.confirmed" :prev="overview.prevConfirmed" />就够了，后续换数据源、加统计口径，都只改父组件传参，卡片内部永远不动。
4. 大屏适配与性能优化：三组参数和两个高频坑
数据大屏的设计稿几乎都是 1920 × 1080，但实际投放的屏幕可能是 1366 的笔记本、2560 的显示器、甚至 4K 的会议屏。很多新手在这一步开始疯狂写媒体查询，结果越写越乱。工作里最可靠的大屏适配方案还真不是 rem，而是 transform 缩放。
4.1 为什么大屏不适合 rem，推荐 transform: scale 方案
rem 方案在普通网页里很好用，但在可视化大屏上有个致命问题：ECharts 绘制在 Canvas 里，文字和线条的尺寸在渲染时已经按像素定死了，rem 只对 DOM 元素生效。你通过媒体查询改了根字体大小，页面的标题和表格变小了，但图表的坐标轴文字、图例、折线粗细完全无感，结果是整块屏的视觉比例是乱的。
transform: scale 方案思路完全不同：页面内部永远按 1920 × 1080 布局，最外层容器固定这个宽高，然后用 JS 计算当前视口和设计稿的缩放比例，整体缩放。这样做保证图表内部和外部 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)取两个方向中较小的值，这样才能保证页面等比缩放，不会出现横向或纵向拉伸变形。transformOrigin: 'left top'是关键，它让缩放后的页面左上角对准视口左上角，否则默认的缩放中心在元素中线，页面会跑到屏幕外面去。调用useScreenScale()后，大屏外层容器会被加载；这个 hook 在Screen.vue的onMounted里调用一次并返回applyScale，这样当全屏状态变化时，可以手动再执行一次来修正比例。
4.2 三个必调参数：devicePixelRatio、notMerge、resize 时机
第一组必调参数是 ECharts 的devicePixelRatio。大屏经常跑在 2K、4K 屏上，浏览器默认把 Canvas 的分辨率按设备像素比放大，但 ECharts 默认devicePixelRatio: 1，导致高分屏上图表文字边缘发虚。解决办法是在echarts.init时显式传入：
chart = echarts.init(chartRef.value, null, { devicePixelRatio: window.devicePixelRatio || 1 })第二个必调参数是setOption的notMerge。大屏数据定时刷新时，如果新旧数据里的系列数量不一致，比如早上还是 4 条曲线，下午接口改成 3 条，默认的 merge 模式会保留旧系列，导致图表上出现幽灵数据。刷新数据时改成：
chart.setOption(option, { notMerge: true })第三个是图表 resize 的时机。window resize 事件里要同时处理外层缩放和每个图表实例的尺寸修正，如果只缩放外层、不调chart.resize()，图表内部会保持之前的像素宽高，出现内容挤压。常见做法是在 window resize 监听里遍历所有已注册的图表实例，统一调用resize()：
window.addEventListener('resize', () => { applyScale() chartRefs.value.forEach(item => item.chart && item.chart.resize()) })4.3 性能优化：按需引入 ECharts 模块和清理副作用
全套引入import * as echarts from 'echarts'开发时方便，但打包体积会多出几百 KB。大屏项目一般只用 line、bar、map、pie 这几种基础图表，完全可以用按需引入把体积压下来：
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是核心包，只包含基础架构；echarts/charts里按需要引入图表类型；echarts/components里引入组件，比如 tooltip、grid、visualMap；最后一个CanvasRenderer是渲染器。按这种方式改完，打包产物明显变小，对加载速度有直接帮助。这里有个需要注意的地方：如果用了echarts/core按需引入，registerMap依然有效，但要确保MapChart和GeoComponent都已注册，否则地图还是白屏。
性能上第二件常被忽略的事是副作用清理。大屏里的定时刷新、轮播、resize 监听，都是需要在onBeforeUnmount里释放的资源。一个靠谱的写法是把所有定时器句柄收集到一个数组，销毁时统一clearInterval；监听 window 的事件要用removeEventListener移除，并且传入的 handler 要保持引用，不能每次onMounted都新建匿名函数。
5. 疫情大屏开发避坑：五个高发问题与排查记录
可视化大屏看着炫，翻车的时候也是真的玄学。下面是做过多次这类项目后最常遇到的五个问题，每条都按现象、原因、解决三段记录，希望帮你把血泪经验直接变成排查手册。
5.1 现象一：地图区域完全空白，控制台报 Map not found
这应该是疫情大屏里最高频的问题。现象是页面其他图表正常，唯独中间的地图区域一片空白，浏览器控制台提示Map china not found.或者类似的错误。原因是 ECharts 5 之后不再内置任何地图数据，你必须先执行echarts.registerMap('china', geoJson)，并且这个动作要在setOption之前完成。很多人把地图数据用fetch去线上拉取，网络一慢或者地址失效，地图就没了。解决方式是直接把 GeoJSON 下载到src/assets/geo/下，用import chinaGeoJson from '@/assets/geo/china.json'静态引入，打包后文件跟随工程走，不依赖外网。注意registerMap只需要调用一次，放在模块顶层或者main.js里都行。
5.2 现象二：路由切换后再回来，图表出现重叠或残留
大屏主页面和详情页来回切换时，图表区域会出现两个 Canvas 叠在一起，或者图表直接花屏。根本原因是组件销毁时没有释放 ECharts 实例，旧的 Canvas 跟着 DOM 被移除了，但实例的监听和渲染状态没清干净；再回来时新实例和残留状态冲突。解决方法是把上一章的onBeforeUnmount清理逻辑当成铁律，真正执行dispose()并把局部变量置空。如果使用了<keep-alive>缓存页面，那么不能在onUnmounted销毁图表，要改用onDeactivated和onActivated配合，在onActivated里重新resize()。
5.3 现象三：窗口放大后大屏两边留白，图表被拉伸变形
大屏部署好后把浏览器窗口拖大，页面内容没有铺满，而是左右两大块空白，或者横向变宽、纵向不变，图表的圆被拉成了椭圆。原因通常是把外层缩放了，但图表容器自身还在响应式布局里跟着变宽。解决方式是明确两层职责：外层固定 1920 × 1080，专门承担 transform: scale；内层所有图表组件一律width: 100%; height: 100%，但外层缩放时内层容器的实际布局像素不参与变化，这样图表只会整体缩放、不会重新布局。
5.4 现象四：数据更新了，setOption 调了但图表纹丝不动
接口返回新数据后，控制台打印数据是新的，但图表不刷新。最常见的原因有两个：一个是setOption没有传notMerge: true，旧数据和新数据结构有差异时 ECharts 默认增量更新，导致看起来像没刷新；另一个是数据经过了 Vue 的响应式代理，ECharts 直接操作被代理的对象时，内部判断数据没有变化，默认不重绘。解决方式是先JSON.parse(JSON.stringify(data))或者用toRaw还原原始数据，然后chart.setOption(option, { notMerge: true })强制全量更新。
5.5 现象五：本地运行正常，打包部署后地图和字体 404
本地开发好好的，执行npm run build后放到服务器上，地图没了、自定义字体也变成默认字体。原因几乎都是资源引用方式不对：GeoJSON 如果用fetch('/assets/geo/china.json')这种方式写，打包后路径匹配不上部署子目录；字体文件如果用 CSS 里相对路径引用但没被 Vite 处理，也会 404。根治方式是所有静态资源统一走 import 引入或者放在public目录下。GeoJSON 用import保证被打包进产物，同时确认部署时把base配置成实际子路径，比如base: '/data-screen/'。字体文件尽量用系统字体，或者把字体文件放进assets并显式@font-face引入。
6. 让大屏活起来：轮播、主题切换和定时刷新
图表能正常显示只是第一步，落到实际演示场景，大屏要能自己动：页面每隔几秒自动轮播一屏数据，深色主题可以持久化，数据定时刷新时不能白屏或闪跳。这一章把最后这点进阶能力补齐。
自动轮播可以用一个通用 hook 实现，它接收当前页面的索引和总页数，在setInterval里递增，取模实现循环。注意大屏轮播的间隔不要太短，8 到 10 秒是大多数客户能接受的节奏，太短会让人来不及看清图表内容。轮播时最好配合图表的高亮动画，比如让折线图重新播放动画，视觉上更有“活”的感觉。
主题切换和数据刷新也要一起考虑。主题色存进localStorage，刷新页面后保持主题一致，ECharts 的主题切换则通过echarts.registerTheme注册两套主题，切换时重新init当前实例。定时刷新接口时，优先保留旧数据展示，等新数据拿到后再一次性setOption更新，而不是先把图表清空再等接口返回。这样即使接口慢了几秒，大屏上也不是空白，用户感知会好很多。
我早期做大屏时最常犯的错就是忘记清理定时器和 resize 监听，结果演示到一半浏览器变卡，图表动画也一顿一顿的。后来养成的习惯是每个图表组件里所有副作用都在同一个钩子里释放，全局只保留一个刷新入口，宁可代码看起来啰嗦一点，也要保证长时间运行不倒。做可视化大屏，炫酷是面子，稳定才是里子，希望这套思路能帮你在自己的项目里少走几段弯路。
本文还有配套的精品资源，点击获取
