最近做了一个 ECharts 可视化大屏，使用chatgpt生成设计稿，整体是典型的"顶栏 + 三列布局 + 多图表面板"结构。项目代码不复杂，但把大屏常见的几个核心点都串起来了：布局、图表封装、模拟数据、动态轮播、响应式适配。
一、技术栈
- Vue 3
- Vite
- ECharts 5
- Element Plus
- SCSS
项目入口很简单，src/main.js 里完成 Vue 挂载、Element Plus 注册和路由接入；src/App.vue 负责根容器；真正的大屏页面主要集中在 src/views/Overview.vue。
二、项目结构
这套大屏的文件拆分比较清晰：
src/views/Overview.vue：主大屏页面，负责整体布局和各图表初始化src/components/ChartBox.vue：统一的面板容器，负责标题、边框和背景src/components/DashboardHeader.vue：顶部导航栏src/components/CenterSummaryGrid.vue：中间汇总卡片区src/layouts/DashboardLayout.vue：大屏整体布局壳src/utils/mockDashboard.js：所有模拟数据集中管理
这种拆法的好处是：页面逻辑集中，图表容器统一，数据和视图分离，后期换真实接口也方便。
三、核心实现思路
1. 页面布局：先搭骨架，再放图表
大屏主体使用 CSS Grid + Flex 混合布局，整体分三列：
- 左侧：核心指标、访问趋势、用户画像
- 中间：地图背景 + 汇总指标
- 右侧：销售额趋势、渠道占比、实时交易
布局上使用了 vh、vw 这类比例单位，让不同分辨率下也能保持相对一致的视觉效果。
2. 图表容器统一封装
所有图表都放在 ChartBox 里，它统一处理：
- 标题栏
- 边框
- 背景
- 内容插槽
这样每个图表只需要关心自己的 option 配置，不需要重复写外壳样式。
3. ECharts 初始化方式
在 Overview.vue 中通过 ref 拿到 DOM，再在 onMounted() 里初始化图表：
echarts.init(el)chart.setOption(option)window.resize时统一调用chart.resize()
这种方式适合大屏场景，简单直接，也便于维护。
4. 模拟数据集中管理
所有展示数据都放在 mockDashboard.js：
- 核心指标
- 访问趋势
- 用户画像雷达图
- 销售额趋势
- 渠道占比
- 实时交易记录
这样做的好处是：页面文件不会被一堆静态数据撑爆，后面接接口时也只需要替换这一层数据源。
四、几个重点图表实现
1. 访问趋势分析：折线图滚动播放
这个模块做了一个自动轮播效果，核心思路是：
- 准备更长的时间序列数据
- 使用
dataZoom控制可视窗口 - 用定时器按固定间隔往后推进窗口
- 在组件卸载时清理定时器
这样图表看起来就像在自动播放，适合大屏展示场景。
2. 渠道占比：环形图 + 右侧百分比列表
渠道占比这块没有直接套 ECharts 默认图例，而是自己拆成了两部分：
- 左侧：环形饼图
- 右侧：自定义百分比列表
这样做的好处是视觉更稳定，也更容易对齐大屏风格。环形图的标签和引导线通过 label、labelLine 调整，右侧列表则是 Vue 模板循环渲染。
3. 用户画像：雷达图 + 文本指标
用户画像模块用雷达图展示整体特征，再配合右侧指标列表，形成"图形 + 文本"的组合展示方式。这个方式比单纯雷达图更适合数据看板，信息更完整。
五、实现上的几个小经验
- 大屏项目先统一容器，再做图表，比先堆图表更省事。
- 图表样式尽量封装到一个面板组件里，减少重复代码。
- 静态演示数据集中管理，后续接接口时成本很低。
- 自动轮播图表要注意销毁定时器和 resize 监听，避免内存泄漏。
- 文字和布局尽量用相对单位，不然大屏一换分辨率就容易变形。
六、总结
这个大屏的实现并不复杂，核心就是三件事：
- 用 Vue3 搭建结构清晰的页面
- 用 ECharts 完成各种图表展示
- 用组件化和数据分层保证后续可维护性
如果你也在做大屏项目，建议先把布局和图表容器抽出来，再逐个填充图表逻辑，整体会清爽很多。
如果这篇文章或者这个项目对你有帮助，麻烦给个 Star 支持一下，这会是我继续完善项目的最大动力。