简介基于Vue框架的新冠疫情可视化页面设计源码是一套可直接运行的前端项目面向学习Vue的初学者、毕业设计以及数据展示开发人员。页面使用HTML、CSS和JavaScript实现丰富的疫情数据交互看板通过Vue组件化开发、路由配置和状态数据组织等设计清晰展示了从原始数据到可视化图表的转换过程压缩包共20个文件包含5个JavaScript脚本、2个Vue组件、3个JSON配置以及多张PNG/GIF图像整体体积仅1.06MB文件结构紧凑且职责明确。同时项目内置了浏览器兼容列表、代码转译、Vue构建等工程配置文件学习者可以直观了解浏览器兼容处理、ES6转译、开发服务器和构建命令等日常开发必需的知识点从目录结构来看视图、组件、路由与数据管理等模块划分得十分清晰适合仿照学习一个标准Vue应用的代码组织方式。另外通过分析图片和资源目录的管理方式也能掌握常见静态资源组织规律例如如何按模块存放图片、灵活引用公共资源等。目前已有91人学习下载非常适合用于课程实践、技能进阶或作为简历中的完整项目案例。1. 一个只有20个文件的新冠疫情可视化页面拆开看才知道什么是Vue的最小可行项目拿到这份源码时第一反应是“怎么连数据接口都没有”。但正是这种没有后端、没有复杂业务、只有20个文件的组合反而把Vue项目的骨架暴露得最清楚src/views下面是一个登录页router里是路由表store里存的是疫情数据assets里放着图片和样式剩下的是babel、webpack、浏览器的配置文件。它解决的核心问题是在数据以静态方式存在前端时如何用登录页和数个图表页面完成疫情信息的可视化展示。适合刚学完Vue基础、想了解真实项目文件结构的开发者也适合需要快速交付可视化大屏demo的工程师。拆完之后你会发现可视化页面的重点不在图表库本身而在于组件生命周期和数据流在哪里接上。2. Vue项目启动链路从package.json到main.js先搞清楚这些文件谁在做什么2.1 目录结构里埋着Vue可视化项目的标准答案先看这份源码的根目录文件它们不是随手生成的。打开upload.zip后顶层放着.browserslistrc、babel.config.js、vue.config.js、package.json、package-lock.jsonsrc目录下是App.vue、main.js、store/index.js、router/index.js、views/Login.vue以及assets里的图片和样式另外还有一个readme.txt。这些文件的组织方式就是Vue脚手架create出来的标准形态。与纯业务代码相比真正值得看的是这几个文件的职责边界文件或目录实际作用在这个疫情可视化项目中的落点package.json声明依赖、脚本命令、项目元信息确定Vue、Vue Router、Vuex版本执行npm run serve启动package-lock.json锁定依赖树版本保证团队安装的依赖一致解决“在我电脑上能跑”的问题.browserslistrc告诉Babel和postcss要兼容哪些浏览器影响转译和自动前缀的产出粒度babel.config.js配置Babel转译ES6语法指定vue/app预设把.vue文件中的script编译成浏览器可运行代码vue.config.js覆盖webpack默认配置设置publicPath和devServer代理打包时用的关键配置src/main.js创建Vue实例挂载App、router、store整个可视化应用的启动入口src/App.vue根组件同时承担可视化主页面疫情图表、统计卡片和登录后的整体布局都放在这里src/router/index.js路由表与导航守卫控制登录页和疫情数据页面之间的跳转src/store/index.js全局状态管理存放疫情数据、统计口径与登录态src/views/Login.vue登录页组件实现登录表单和交互逻辑src/assets静态资源存放logo、背景图、CSS基础样式public/index.htmlHTML模板提供id为app的挂载点并加载favicon.icojsconfig.json给IDE提供路径提示让vscode识别/目录别名写import时减少手动拼路径readme.txt项目说明通常写运行环境和注意事项拿到源码先看它很多初学者会把注意力全放在App.vue上实际在这个项目里App.vue不只是容器它同时承担了可视化主体的展示。疫情数据可视化这类页面一旦涉及登录跳转和全局图表数据就必须把store独立出来否则每个组件都从接口拉一次数据性能会很差。assets目录下的css负责全站基础样式images里存的是疫情图标或背景图logo.png会被导航栏或登录页引用。2.2 main.js里发生了什么Vue实例挂载前的最后一步打开src/main.js代码量很小但每行都决定了应用怎么启动import Vue from vue import App from ./App.vue import router from ./router import store from ./store Vue.config.productionTip false new Vue({ router, store, render: h h(App) }).$mount(#app)这段代码的核心是new Vue({ router, store })它不是普通组件而是整个应用的根实例。router和store被以选项形式注入之后在任意组件里都能通过this.$router、this.$route、this.$store访问到它们。render函数中h是createElement的缩写h(App)的作用是让根组件App成为整棵组件树的起点这比template字符串解析更高效也避免了运行时模板编译器带来的体积开销。$mount(#app)指定挂在public/index.html中的div#app上。有一个容易被忽略的参数Vue.config.productionTip false。它的作用是在生产环境构建时关闭开发模式的提示减少控制台噪音。如果在某些Vue项目里把这个配置删掉开发模式下每次打开页面都会看到一个黄条提示不影响运行但会干扰调试。另外如果项目引用了Element UI、ECharts这类第三方库main.js里通常还会有Vue.use(ElementUI)和全局样式引入这份源码没写说明要么登录页使用的组件是手写的要么第三方库是通过CDN在index.html中加载的。自己做练习时建议把第三方库显式安装到package.json方便版本管理。2.3 开发环境与构建配置babel、browserslist和vue.config.js的关系package.json中通常有一段scripts常见的是serve: vue-cli-service serve和build: vue-cli-service build。拿到源码后第一步执行npm install安装依赖再npm run serve启动开发服务器。如果你在安装时遇到依赖版本冲突先检查package-lock.json和package.json是否匹配这在Vue2项目中经常发生。特别是node版本过高时node-sass编译会报错可以选择改成sass或sass-loader版本下调。.browserslistrc这个文件虽然只有几行却同时影响babel.config.js和autoprefixer的产物。比如写成last 2 versions和ie 11转译出来的代码大小和对Promise、async的降级策略完全不同。在这个疫情可视化项目里如果目标用户是医院或政务内网浏览器版本往往偏低需要把browserslist写严但代价是打包体积变大。常见的一行配置是 0.5% last 2 versions not dead提示改完.browserslistrc后要重新build才会生效开发服务器下也可能需要重启。vue.config.js里最常见的配置是publicPath和devServermodule.exports { publicPath: ./, devServer: { port: 8080, host: 0.0.0.0, proxy: { /api: { target: http://localhost:3000, changeOrigin: true } } } }publicPath设为./是可视化大屏项目打包后直接双击index.html就能打开的关键配置。默认的/路径在file协议下会找不到JS和CSS文件页面白屏。devServer默认只绑定localhosthost改为0.0.0.0后同一个局域网内其他设备就能通过本机IP访问这个大屏这在疫情数据展示的现场调试里很实用。proxy配置通常用于解决本地开发跨域如果把疫情数据存放在远程JSON接口就需要在这里把/api开头的请求代理到真实服务器。注意proxy只在devServer阶段有用。3. 疫情可视化图表是怎么画出来的数据、状态和ECharts实例管理3.1 为什么可视化部分选择ECharts而不是纯CSS或SVG新冠疫情可视化页面里需要展示确诊、疑似、治愈、死亡等维度的趋势如果靠手写SVG折线图的坐标轴、tooltip、缩放都要自己实现开发周期至少翻倍。ECharts在这个场景下的优势是开箱即用的折线图、柱状图、饼图和地图并且底层用Canvas渲染数据量大时比SVG性能更稳。如果在package.json里没有看到echarts依赖说明原始项目用的是CDN引入或尚未安装常见的做法是执行npm install echarts --save然后在需要的组件里按需导入。Vue组件里使用ECharts的标准流程是在mounted中初始化实例在setOption里传入数据和配置在beforeDestroy中销毁实例避免内存泄漏。这份源码里可视化主体并没有单独拆成Dashboard.vue而是集中在App.vue中。为了讲清楚图表初始化下面把App.vue里的script部分摘出来说明import * as echarts from echarts import { mapGetters } from vuex export default { name: CovidDashboard, computed: { ...mapGetters([lineData]), }, mounted() { this.$nextTick(() { this.initChart() window.addEventListener(resize, this.handleResize) }) }, beforeDestroy() { window.removeEventListener(resize, this.handleResize) this.chart this.chart.dispose() }, methods: { initChart() { this.chart echarts.init(this.$refs.chart) this.chart.setOption({ tooltip: { trigger: axis }, xAxis: { type: category, data: this.lineData.dates }, yAxis: { type: value }, series: [{ name: 新增确诊, type: line, smooth: true, data: this.lineData.confirmed }] }) }, handleResize() { this.chart this.chart.resize() } } }这段代码里有三个关键动作。echarts.init的第一个参数是DOM容器必须保证已经有真实宽度和高度所以外面套了一层this.$nextTick否则会出现canvas宽度为0的问题。setOption中的xAxis.data和series.data都来自Vuex的getter组件不直接持有数据这样数据更新时只需要修改store再调用chart.setOption即可更新。resize监听挂在window上窗口变化时调用chart.resize()这是大屏适配的基本操作但在退出组件时一定要removeEventListener并调用dispose否则在多路由切换场景下会看到白屏和性能下降。3.2 疫情数据放在store里而不是组件里的理由与实现可视化页面通常需要多个组件共享同一份数据比如顶部统计卡片、趋势折线图、省份地图。如果每个组件各自定义data数据一旦变化就要反复传props代码会越来越乱。把数据放到src/store/index.js中用state保存原始数据用getters做格式转换用mutations同步修改这是Vuex在可视化项目中最典型的使用方式。看一下store中疫情数据模块的结构const state { covidData: [ { date: 2023-01-01, confirmed: 1280, cured: 900, dead: 3 }, { date: 2023-01-02, confirmed: 1365, cured: 950, dead: 5 } ], loading: false } const getters { lineData: (state) { return { dates: state.covidData.map(item item.date), confirmed: state.covidData.map(item item.confirmed), cured: state.covidData.map(item item.cured) } }, totalConfirmed: (state) { return state.covidData.reduce((sum, item) sum item.confirmed, 0) } } const mutations { SET_COVID_DATA(state, payload) { state.covidData payload }, SET_LOADING(state, val) { state.loading val } } const actions { fetchCovidData({ commit }) { commit(SET_LOADING, true) // 模拟接口请求 setTimeout(() { commit(SET_COVID_DATA, []) commit(SET_LOADING, false) }, 500) } } export default { state, getters, mutations, actions }state.covidData是原始数据getters.lineData把它转换成ECharts需要的x轴和series结构。这里有一个设计细节不要在组件里直接对state做reduce或filter而是提炼成getter这样所有组件拿到的数据格式是一致的。如果后续接口返回的字段名是confirmCount而不是confirmed只需要改getter一处所有图表随之更新。mutations必须用commit触发这是Vuex的硬性规定直接给state赋值会绕过devtools的记录逻辑。actions里模拟了异步请求通过setTimeout把空数组写入state实际项目中这里会换成axios.get(/api/covid)然后把response.data交给commit。在组件中使用mapGetters展开比如computed: { ...mapGetters([lineData]) }然后在模板中通过this.lineData访问。一旦store中的covidData被更新getter会重新计算图表组件在watch或mounted逻辑中重新setOption即可。3.3 折线图、柱状图和地图的配置要点与常见坑疫情数据可视化页面最常见的图表是折线图、柱状图和地图。折线图适合表示时间序列上的新增/累计趋势柱状图适合对比不同省份或不同日期的数值地图适合展示地理分布。ECharts在配置这些图表时几个容易出问题的参数值得单独说明配置项作用疫情可视化中的坑series.smooth让折线平滑smooth设为true时首尾数据点形状会改变小范围数据时慎用tooltip.trigger触发方式axis和item地图用item折线图用axis否则tooltip显示不完整dataZoom缩放时间轴日期超过30个时一定要加否则折线挤在一起看不清color色板同一页面多个图表的颜色必须统一否则用户误判等级grid控制图表区域间距大屏边缘被裁切时优先调grid.bottom而不是改容器尺寸以dataZoom为例当折线图横坐标超过30个日期就应该加入如下配置让用户拖拽查看dataZoom: [ { type: inside, start: 0, end: 100 }, { type: slider, start: 0, end: 100, bottom: 10 } ]inside表示鼠标滚轮缩放slider提供底部的拖动条。start和end是百分比表示初始展示范围。设成0到100代表默认展示全部数据用户手动缩放后会改变。这个交互对疫情数据可视化页面尤为重要因为用户既想看整体趋势也想聚焦某一段暴发期。如果不加数据缩放折线图在数据多的时候会变得非常密几乎无法读值。地图的部分ECharts官方从5.0开始不再默认注册中国地图数据需要单独引入china.js文件。常见做法是在main.js中全局导入或者放到public目录下通过script标签加载。省份名称要和数据中的name完全一致比如“确诊病例”匹配“湖北”而不是“湖北省”否则地图会显示灰色无数据。如果数据中没有地理坐标直接用geo的map属性配合series的data即可。4. 登录页到可视化页面的路由守卫Vue Router里的鉴权流程和状态回写4.1 路由表先按页面和权限拆开项目中的src/router/index.js定义了前端路由。登录页和可视化主页面是两种不同性质的页面登录页不需要鉴权可视化页面必须登录后才能进入。直接把这些信息写进路由meta里后续导航守卫判断起来会非常清晰。实际源码里可视化主体是写在App.vue中的路由表相对简化下面这段路由示例把它按规范化结构拆出来便于理解页面间的层级关系import Vue from vue import VueRouter from vue-router Vue.use(VueRouter) // 实际源码中Dashboard内容在App.vue里这里按独立组件拆分演示 import Dashboard from ../App.vue const routes [ { path: /login, name: Login, component: () import(../views/Login.vue), meta: { public: true, title: 用户登录 } }, { path: /, name: Dashboard, component: Dashboard, meta: { title: 疫情可视化大屏 } } ] const router new VueRouter({ mode: hash, routes }) export default router这里有两个要点。登录页的component用了() import(...)的动态导入登录页会被拆成独立chunk首次加载只下载登录页代码可视化图表库在主页面需要时才请求这对提升疫情大屏的首屏速度很有帮助。mode: hash是兼容性最好的选择对于纯静态托管的可视化页面hash模式刷新不会404。如果项目部署在Nginx下且配置了try_files可以换成mode: history但一般情况下可视化大屏优先选hash。路由的meta可以继续扩展比如给Dashboard加上roles: [admin]、menuKey: overview这样导航守卫和侧边栏菜单渲染都能通过meta统一判断而不需要在组件里写死权限字符串。在可视化项目中如果后期要加入全国地图、海外疫情等多个页面按权限拆分会更安全。4.2 全局前置守卫没有token就回登录页Vue Router的beforeEach是拦截路由跳转的钩子函数它接收三个参数to是目标路由from是来源路由next是放行函数。在这个项目中登录态用localStorage保存所以守卫逻辑可以写成const whiteList [/login] router.beforeEach((to, from, next) { document.title to.meta.title || 疫情可视化 const token localStorage.getItem(covid_token) if (whiteList.includes(to.path)) { next() } else if (!token) { next({ path: /login, query: { redirect: to.fullPath } }) } else { next() } })代码中的whiteList是免登录白名单目前只有/login。如果后续增加注册页、访客模式直接往这个数组里加路径即可。判断到目标路由不在白名单且没有covid_token时next跳转到登录页并用query.redirect记录用户本来要访问的地址登录成功后再跳回去这是可视化后台系统里最常用的回跳方式。document.title写在守卫里比在每个组件mounted里设置更统一。这里有一个值得注意的边界token只存在localStorage是不够的XSS脚本一旦注入就能读取它。但在这个纯前端demo里token本身没有实际签名只做界面级拦截。如果要对接真实接口应该在axios响应拦截器里处理401并清理本地token再跳回登录页service.interceptors.response.use( response response.data, error { if (error.response error.response.status 401) { localStorage.removeItem(covid_token) router.push(/login) } return Promise.reject(error) } )axios拦截器是补充说明不在这份源码的文件列表内但实际项目中几乎必用。响应拦截器统一判断状态码401就踢回登录页不等业务代码逐个处理。4.3 Login.vue中的表单校验与登录状态落库Login.vue是一个单文件组件包含template、script、style三部分。登录表单通常有用户名和密码两个字段这里的关键不是校验逻辑本身而是登录成功后如何把状态交给Vuex和路由。下面是一个贴合本项目场景的写法template div classlogin-container el-form :modelloginForm :rulesrules refloginForm el-form-item propusername el-input v-modelloginForm.username placeholder请输入用户名/el-input /el-form-item el-form-item proppassword el-input v-modelloginForm.password typepassword placeholder请输入密码/el-input /el-form-item el-button typeprimary clickhandleLogin登 录/el-button /el-form /div /template脚本部分处理登录动作export default { data() { return { loginForm: { username: , password: }, rules: { username: [{ required: true, message: 请输入用户名, trigger: blur }], password: [{ required: true, min: 6, message: 密码至少6位, trigger: blur }] } } }, methods: { handleLogin() { this.$refs.loginForm.validate((valid) { if (!valid) return localStorage.setItem(covid_token, demo-token- Date.now()) this.$store.commit(SET_LOGIN_STATE, true) const redirect this.$route.query.redirect || / this.$router.replace(redirect) }) }, handleLogout() { localStorage.removeItem(covid_token) this.$store.commit(SET_LOGIN_STATE, false) this.$router.push(/login) } } }这里的rules对应el-form-item的proprequired和min是Element UI内置的校验规则在blur触发。validate回调接收valid参数表单不合法时直接return不会做后续登录动作。登录成功后把token写入localStorage同时调用store的SET_LOGIN_STATE mutation修改内存中的登录状态。使用$router.replace而不是push是为了避免登录页被加入历史栈用户按返回按钮不会回到登录页。redirect优先取路由query中保存的原目标地址没有就默认跳到可视化大屏根路径。handleLogout是退出登录的常见补充清除token并跳回登录页。这里用Element UI作为表单组件库是可视化项目的常见选择如果你拿到源码时发现组件库里没有el-form这些标签说明需要先npm install element-ui并在main.js中全局注册。如果项目用了原生HTML的input配合自定义校验逻辑也是一样的只是把rules换成手动判断。登录页的样式通常会设置全屏背景、卡片居中这些在assets/css里都有现成样式改颜色就能适配不同大屏主题。5. 打包后布局异常排查publicPath、大屏适配和ECharts宽高初始化5.1 先处理打包后的白屏与资源路径疫情可视化页面开发完执行npm run build后dist目录里会出现index.html和static资源。双击index.html如果白屏第一反应去看控制台的资源404错误这基本是publicPath没配好。vue.config.js中publicPath设为./所有JS、CSS、图片请求会变成相对路径在file协议下才能正常加载。如果你的项目部署在Nginx子路径下比如example.com/covid/publicPath要改成/covid/注意前后斜杠都不能丢。另外查看dist/index.html里script标签的src如果出现/css/app.css前多了一个/说明配置还是默认值。一个易错点publicPath修改后需要重新npm run builddev server不会自动应用构建级配置。5.2 可视化大屏适配固定设计稿比例再用transform缩放到真实屏幕疫情大屏一般面向会议室大屏或宽屏显示器常见设计稿是1920x1080。如果按百分比设计每个图表在不同分辨率下会错位。我常用的一套方案是把页面主体固定为1920x1080然后在最外层容器上用CSS计算缩放比例function resizeScale() { const scaleX window.innerWidth / 1920 const scaleY window.innerHeight / 1080 const scale Math.min(scaleX, scaleY) document.querySelector(#dashboard-scale).style.transform scale(${scale}) } window.addEventListener(resize, resizeScale) resizeScale()页面容器需要设置transformOrigin: left top否则缩放中心会跑到中间。适用场景是数据大屏不需要滚动所有内容一屏展示。缺点是非16:9屏幕上会出现两侧留白但视觉上比拉伸变形要专业得多。这个技巧对疫情可视化项目尤其合适因为大屏中的图表密集任何变形都会影响读数。5.3 ECharts容器宽度为0的排查清单最后一个高频坑是图表初始化时容器还没渲染完导致echarts.init拿到一个宽高为0的元素图表不显示。解决方式已经在3.1中提过用this.$nextTick(() this.initChart())但还有两个隐藏场景。第一如果容器本身使用了flex或百分比高度父级高度没有撑开即使nextTick也拿不到高度需要先给容器设置一个明确的高度如height: 400px。第二在tab切换中初始化的图表如果tab内容display:none宽度计算也会为0需要在tab切换完成后再调用chart.resize()。排查时打开浏览器开发者工具选中图表canvas元素看它的宽度属性如果为0问题就出在容器尺寸或初始化时机上。本文还有配套的精品资源点击获取