企业官网建设流程全解析

简介：这是一套面向前端开发者与数据可视化学习者的 Vue3 大数据大屏项目实战源码，基于 Vue3、TypeScript、DataV 与 ECharts5 搭建，适合想掌握大屏适配、组件封装与图表集成的初中级工程师参考练手。压缩包共 61 个文件，约 2.47MB，以 tsx 与 ts 承载逻辑与类型定义、vue 组织页面视图，辅以 scss/css 样式、json 配置、png 图片及字体文件，整体结构完整、层次清晰。项目采用新版动态屏幕适配方案，界面由 .vue 与 .tsx 混合实现，全局渲染组件对 ECharts 区域做了统一封装，并配套路由、状态管理与工具模块，便于读者直接拆解大屏布局、图表渲染与自适应逻辑，也可作为二次开发的脚手架。目前已有 9026 人学习下载，参考价值较高。

1. 从一份 Vue3/ECharts5 大屏源码说起：它到底解决了什么问题

拿到「Vue3/ECharts5 数据可视化大屏展示项目案例源码.zip」这类资源，多数人第一反应是解压、装依赖、跑起来看看效果，然后……就没有然后了。真正卡住人的从来不是「跑不起来」，而是跑起来之后：1920×1080 的设计稿放到 2560 宽的会议室大屏上，图表糊成一片；数据接口一断，整个页面白屏；十几个图表同时渲染，风扇狂转。这份源码的价值不在于它画了几个炫酷的图，而在于它把「大屏」这个特殊场景下的工程问题——自适应缩放、图表生命周期管理、数据轮询与降级——用一套可复用的结构固定了下来。

这篇文章面向两类人：一类是刚接触 Vue3 组合式 API、想找一个完整项目练手的开发者，另一类是被派了「做个数据大屏」任务、时间只有一周的工程师。我会顺着这份源码的技术栈，把 Vue3 + ECharts5 做大屏的选型理由、目录组织、核心封装、参数配置和踩坑记录讲清楚。你不需要先看完源码才能读懂，反过来，读完再去看源码会更顺。适合谁？适合已经会 Vue 基础语法、能看懂ref和onMounted，但没做过大屏适配和图表封装的从业者。

2. Vue3 + ECharts5 做大屏的选型账：为什么不是 Vue2 或别的图表库

2.1 组合式 API 对大屏这类「多图表页面」的天然优势

大屏页面有个显著特征：一个页面里塞十几个图表，每个图表都有自己的数据源、定时器、resize 监听和销毁逻辑。用 Vue2 的选项式 API 写，这些逻辑会被拆散在data、methods、mounted、beforeDestroy里，一个图表的相关代码散落在四五个地方，改一个图表要翻半个文件。Vue3 的组合式 API 允许你把「一个图表」封装成一个独立的 composable 函数，数据、初始化、监听、销毁全在一起。

// composables/useChart.js import { ref, onMounted, onBeforeUnmount, shallowRef } from 'vue' import * as echarts from 'echarts' export function useChart(getOption, deps = []) { const chartRef = ref(null) // 绑定 DOM 容器 const chartInstance = shallowRef(null) // 存 ECharts 实例，用 shallowRef 避免深度响应式代理 let resizeObserver = null const init = () => { if (!chartRef.value) return chartInstance.value = echarts.init(chartRef.value) chartInstance.value.setOption(getOption()) } const resize = () => chartInstance.value?.resize() onMounted(() => { init() // 用 ResizeObserver 监听容器尺寸，比 window.resize 更精准 resizeObserver = new ResizeObserver(resize) resizeObserver.observe(chartRef.value) }) onBeforeUnmount(() => { resizeObserver?.disconnect() chartInstance.value?.dispose() // 必须销毁，否则内存泄漏 chartInstance.value = null }) return { chartRef, chartInstance } }

这段代码的关键点有三个。第一，shallowRef而不是ref：ECharts 实例是一个庞大的对象，如果用ref包裹，Vue 会递归地把它的每个属性都变成响应式，性能开销极大，而且 ECharts 内部的状态变更可能触发意外的更新循环。第二，ResizeObserver替代window.onresize：大屏里图表容器的尺寸变化不一定来自窗口变化，也可能是侧边栏折叠、栅格布局调整，ResizeObserver能捕获所有这些情况。第三，onBeforeUnmount里必须dispose()，这是新手最容易漏的一步，页面切换几次后内存就上去了。

2.2 ECharts5 相比 4.x 在大屏场景下的实际收益

ECharts5 对大屏最直接的两个改进是默认主题和按需引入的 tree-shaking。4.x 时代要按需引入得手动 import 一堆模块，5.x 的echarts/core配合use()注册组件已经成熟很多。

// utils/echarts.js —— 按需引入，减小打包体积 import * as echarts from 'echarts/core' import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts' import { GridComponent, TooltipComponent, LegendComponent, TitleComponent, VisualMapComponent, GeoComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' echarts.use([ BarChart, LineChart, PieChart, MapChart, GridComponent, TooltipComponent, LegendComponent, TitleComponent, VisualMapComponent, GeoComponent, CanvasRenderer ]) export default echarts

参数说明：CanvasRenderer是默认渲染器，大屏图表数量多时 Canvas 比 SVG 性能好；如果图表数量少但要求矢量清晰度（比如要投到 4K 屏），可以换成SVGRenderer，但要注意 SVG 在超过 1000 个数据点时会明显卡顿。MapChart和GeoComponent只有做地图时才需要，不做地图就别引，能省几十 KB。

选型结论：Vue3 的组合式 API 解决的是「代码组织」问题，ECharts5 的按需引入解决的是「体积」问题，两者叠加对大屏这种「重交互、重性能」的场景是合适的。如果你的团队还在 Vue2，不必为了大屏强行迁移，但新项目没有理由再用 Vue2 起。

3. 把源码跑起来并读懂目录：从解压到第一个图表渲染

3.1 环境准备与依赖安装的版本坑

拿到源码后第一步不是npm install，而是先看package.json里的版本约束。Vue3 生态里版本不匹配导致的报错占了新手问题的一半以上。

# 查看 package.json 里的关键依赖 cat package.json | grep -E "vue|echarts|vite|element" # 典型的大屏项目依赖长这样： # "vue": "^3.4.0" # "echarts": "^5.5.0" # "vite": "^5.0.0" # "element-plus": "^2.5.0"

安装时建议锁版本，不要用^放任升级：

# 删除可能存在的 lock 文件后重新安装，保证依赖树干净 rm -rf node_modules package-lock.json npm install # 如果公司内网 npm 慢，换源（这里只写通用做法） npm config set registry https://registry.npmmirror.com npm install

启动开发服务器：

npm run dev # Vite 默认 5173 端口，如果被占用会自动 +1 # 打开浏览器访问 http://localhost:5173

这里有个血泪经验：如果启动后页面白屏但控制台没报错，八成是index.html里的挂载点 id 和main.js里的mount('#app')对不上。Vite 项目里index.html在根目录，不在public下，改的时候别找错文件。

3.2 大屏项目的典型目录结构与各目录职责

跑起来之后，先花十分钟把目录结构摸清楚，比直接改代码效率高得多。一份组织良好的大屏源码通常长这样：

重点看composables和utils这两个目录，它们是大屏项目的「骨架」。views/screen里的代码通常只是把组件拼起来，真正的逻辑在 composable 里。如果你要改一个图表的行为，先找到对应的 composable，而不是去改页面文件。

3.3 渲染第一个图表：最小可运行示例

在读懂封装之前，先用最朴素的方式渲染一个图表，建立直觉：

<!-- src/views/screen/DemoChart.vue --> <template> <div ref="containerRef" class="chart-container"></div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue' import * as echarts from '@/utils/echarts' // 用按需引入的实例 const containerRef = ref(null) let chart = null onMounted(() => { chart = echarts.init(containerRef.value) chart.setOption({ xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [120, 200, 150, 80] }] }) }) onBeforeUnmount(() => { chart?.dispose() }) </script> <style scoped> .chart-container { width: 100%; height: 300px; /* 必须有明确高度，否则 ECharts 初始化时容器高度为 0，图表不显示 */ } </style>

逻辑说明：echarts.init需要一个有实际尺寸的 DOM 容器，如果容器高度是 0 或者display: none，图表会渲染成空白。这是大屏项目里最常见的「图表不显示」原因。参数上，xAxis.type设为category表示类目轴，series.type设为bar表示柱状图，这两个是必填项。跑通这个示例后，再去看源码里的封装，就能理解每一层在做什么。

4. 大屏适配与图表封装：源码里最值得抄的两块

4.1 用 transform scale 做等比缩放适配的完整方案

大屏适配的主流方案是「设计稿等比缩放」：以 1920×1080 为基准，根据实际屏幕尺寸计算缩放比，用 CSStransform: scale()整体缩放。这个方案的好处是布局代码完全按设计稿写，不用到处写媒体查询。

// utils/useScreenScale.js import { ref, onMounted, onBeforeUnmount } from 'vue' export function useScreenScale(designWidth = 1920, designHeight = 1080) { const scale = ref(1) const screenRef = ref(null) const calcScale = () => { const w = window.innerWidth / designWidth const h = window.innerHeight / designHeight scale.value = Math.min(w, h) // 取小值，保证内容完整显示，留黑边 } onMounted(() => { calcScale() window.addEventListener('resize', calcScale) }) onBeforeUnmount(() => { window.removeEventListener('resize', calcScale) }) return { scale, screenRef } }

在页面里这样用：

<template> <div class="screen-wrapper"> <div class="screen-content" :style="{ width: '1920px', height: '1080px', transform: `scale(${scale})`, transformOrigin: 'left top' }" > <!-- 所有图表按 1920×1080 布局 --> </div> </div> </template>

参数说明：transformOrigin: 'left top'是关键，默认的center center会导致缩放后内容偏移。Math.min(w, h)保证宽高比不一致时内容不被裁切，代价是可能出现黑边；如果要求铺满不留黑边，改成Math.max但会裁掉边缘内容，看业务取舍。这个方案在 1920 到 4K 之间表现稳定，但要注意：缩放后 ECharts 的鼠标事件坐标会被浏览器自动换算，一般不用额外处理，但如果用了自定义的 tooltip 定位，可能需要手动除以 scale 值。

4.2 图表组件的 props 设计与数据更新策略

把每个图表封装成组件，通过 props 传数据和配置，是大屏项目的标准做法。核心难点在于「数据更新时如何不重建实例」。

<!-- components/chart/BaseChart.vue --> <template> <div ref="chartRef" :style="{ width: '100%', height: '100%' }"></div> </template> <script setup> import { ref, watch, onMounted, onBeforeUnmount, shallowRef } from 'vue' import * as echarts from '@/utils/echarts' const props = defineProps({ option: { type: Object, required: true }, loading: { type: Boolean, default: false } }) const chartRef = ref(null) const chart = shallowRef(null) const render = () => { if (!chart.value) return // notMerge 设为 false，允许增量更新，避免每次全量重绘 chart.value.setOption(props.option, false) } onMounted(() => { chart.value = echarts.init(chartRef.value) render() }) // 深度监听 option 变化，数据更新时只调 setOption，不重建实例 watch(() => props.option, render, { deep: true }) watch(() => props.loading, (val) => { val ? chart.value?.showLoading() : chart.value?.hideLoading() }) onBeforeUnmount(() => { chart.value?.dispose() }) </script>

逻辑说明：setOption的第二个参数notMerge设为false时，ECharts 会把新配置和旧配置合并，适合数据更新场景；设为true则完全替换，适合图表类型切换。大屏里数据轮询频繁，用合并模式性能更好。deep: true的深度监听有性能成本，如果 option 结构很深，可以考虑用watch监听具体的数据字段而不是整个 option 对象。showLoading是 ECharts 内置的加载动画，比自己在外面套一个 loading 组件更省事，样式也能通过loadingOption定制。

5. 避坑与排查：大屏项目里最容易翻车的五个地方

5.1 图表容器高度为 0 导致白屏

现象：组件挂载了，echarts.init也没报错，但页面上什么都没有，控制台打印实例的getWidth()返回 0。

原因：ECharts 初始化时读取容器尺寸，如果此时容器因为父级display: none、height: 0或者 flex 布局尚未计算完成而尺寸为 0，图表就画不出来。常见于 tab 切换、弹窗内嵌图表、异步渲染的场景。

解决：确保容器有明确高度，或者在容器可见后再初始化。如果必须在隐藏状态下初始化，可以先给容器一个固定尺寸，显示后再调chart.resize()。更稳妥的做法是用nextTick或ResizeObserver等容器有尺寸后再 init。

5.2 定时器未清理导致内存泄漏和接口风暴

现象：页面切换几次后，浏览器内存持续上涨；或者离开页面后，控制台还在打印接口请求日志。

原因：setInterval轮询数据时，组件销毁没有clearInterval，定时器还在跑，回调里又引用了已经销毁的组件实例。

解决：在onBeforeUnmount里清理所有定时器。更好的做法是把轮询逻辑封装成 composable，用onUnmounted自动清理：

export function usePolling(fn, interval = 5000) { let timer = null const start = () => { stop() timer = setInterval(fn, interval) } const stop = () => { if (timer) { clearInterval(timer); timer = null } } onMounted(start) onBeforeUnmount(stop) return { start, stop } }

5.3 地图 GeoJSON 加载失败或区域不显示

现象：地图图表只显示一个空白坐标系，或者报Map xxx not exists。

原因：ECharts5 不再内置地图数据，必须手动registerMap。如果 GeoJSON 文件路径不对、格式不是标准 GeoJSON、或者注册的名字和series.map里的名字不一致，都会导致地图不显示。

解决：确认 GeoJSON 文件能通过fetch拿到，注册时名字要对应：

import * as echarts from '@/utils/echarts' import chinaJson from '@/assets/map/china.json' echarts.registerMap('china', chinaJson) // series 里写 map: 'china'，名字必须一致

注意 GeoJSON 文件较大时（全国地图约 1MB），建议放到public目录异步加载，不要打包进 bundle。

5.4 数据更新时图表闪烁或动画重复播放

现象：每次轮询数据回来，图表从头播放一遍动画，视觉上很跳。

原因：setOption默认会重新触发动画，尤其是数据全量替换时。

解决：在 option 里设置animation: false关闭动画，或者用setOption(option, false)的合并模式，只更新变化的数据。如果必须保留动画，可以用series.data的增量更新，配合animationDurationUpdate控制更新动画时长。

5.5 打包后图表样式错乱或字体丢失

现象：开发环境正常，npm run build后部署，图表颜色变了、字体变成默认宋体。

原因：ECharts 主题文件没有被打包，或者自定义字体没有正确引入。另外，如果用了 CDN 引入 ECharts 而打包时又 npm 安装了一份，会出现两个实例冲突。

解决：统一用 npm 引入，主题文件通过echarts.registerTheme注册后在init时指定。自定义字体用@font-face引入并确保字体文件在assets里被 Vite 处理。打包后本地起个静态服务器验证，别直接双击index.html打开，file://协议下很多资源加载不了。

6. 让大屏从「能看」到「耐看」：三个进阶技巧

第一个技巧是数据降级与骨架屏。大屏通常挂在会议室或展厅，网络不一定稳定。接口超时或返回空数据时，不要让图表空白，而是展示上一次的缓存数据加一个「数据更新中」的角标。实现上可以在 composable 里维护一个lastData，请求失败时回退。骨架屏用 ECharts 的showLoading就够，不用额外做组件。

第二个技巧是图表联动。大屏上经常需要点一个柱状图的柱子，下面的折线图跟着变。ECharts 的dispatchAction和on('click')配合就能做到，关键是事件解绑要干净：

chart.on('click', (params) => { // params.name 是被点击的类目名 emit('chartClick', params.name) }) // 销毁时 chart.dispose() 会自动解绑，不用手动 off

第三个技巧是性能监控。在setOption前后打时间戳，超过 200ms 的图表要警惕。大屏上超过 8 个图表同时渲染时，考虑用requestIdleCallback分批初始化，或者把不首屏可见的图表延迟到滚动/切换时再 init。

我自己做大屏项目养成的习惯是：每加一个图表，先在onBeforeUnmount里把dispose写上，再写别的。这个顺序反过来，十有八九会忘。另外，源码里的封装不一定适合你的业务，但useChart和useScreenScale这两个 composable 的思路值得直接搬。希望帮到你。

本文还有配套的精品资源，点击获取