vue-vben-admin 仪表盘 3 步搭建：从第一张 ECharts 图表到动态刷新-平芜编程栈

vue-vben-admin 仪表盘 3 步搭建：从第一张 ECharts 图表到动态刷新

【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. It's fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin

早上 9 点，业务方要一份经营数据汇报：用户量、访问量、下载量、销售占比，最好现场能点着看。你不想再导出 Excel、对着表格逐个念数字。vue-vben-admin（git clone https://link.gitcode.com/i/e61ab2102fc12c56539773f85d050910）内置了一个分析页，基于 ECharts 数据可视化能力搭成，你只需要改数据和配置，就能拿到一张能演示的经营仪表盘。

搭完是什么效果

打开apps/web-antd的分析页：顶部四张指标卡（用户量 / 访问量 / 下载量 / 使用量），中间是一个可切换选项卡的主图区（流量趋势、月访问量两个标签页），底部三张小卡片并排——访问数量、访问来源、商业占比。选项卡一点视图就切，鼠标悬停出数值提示，窗口拉大拉小图表跟着重绘。

第一步：找到动手的位置

改之前先知道东西在哪：

仪表盘主页面：apps/web-antd/src/views/dashboard/analytics/index.vue，负责布局——指标卡、选项卡容器、底部三张小卡片，都在这一个文件里组装；
各图表组件：同在apps/web-antd/src/views/dashboard/analytics/目录下，analytics-trends.vue、analytics-visits.vue、analytics-visits-sales.vue各管一张图；
ECharts 插件目录：packages/effects/plugins/src/echarts/，初始化、深浅色主题切换、窗口 resize 重绘，全收在use-echarts.ts里。

也就是说，改图只碰数据和配置，不用碰图表的生命周期。

第二步：第一个 ECharts 饼图怎么画

以"商业占比"玫瑰图为例，核心代码不长：

<script lang="ts" setup> import { onMounted, ref } from 'vue' import { EchartsUI, useEcharts } from '@vben/plugins/echarts' import type { EchartsUIType } from '@vben/plugins/echarts' const chartRef = ref<EchartsUIType>() const { renderEcharts } = useEcharts(chartRef) onMounted(() => { renderEcharts({ tooltip: { trigger: 'item' }, series: [{ type: 'pie', radius: '80%', roseType: 'radius', name: '商业占比', color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'], data: [ { name: '外包', value: 500 }, { name: '定制', value: 310 }, { name: '技术支持', value: 274 }, { name: '远程', value: 400 }, ].toSorted((a, b) => a.value - b.value), }], }) }) </script> <template> <EchartsUI ref="chartRef" /> </template>

roseType: 'radius'把饼图变成环形玫瑰图；数据先按值从小到大排序，从内到外递进，占比一眼分得清主次；color数组控制每个扇区配色，换成企业色卡就是定制主题。useEcharts是组合式 API（Vue 里管状态的函数，类似ref但更专一），它替你干了四件脏活：初始化 ECharts 实例、跟随深浅色主题、窗口缩放自动重绘、组件销毁时释放实例——你只管喂数据。

其余图表同一套路：趋势分析是折线图，月访问量是柱状图，访问来源是环形图，文件都躺在上面那个目录里，照着改数据即可。

第三步：图表数据定时刷新与选项卡切换怎么写

先说清楚"数据怎么进来、视图怎么切"：

顶部四张指标卡的数字，由主页面里的overviewItems数组驱动，换成接口返回值即可；
主图区用AnalysisChartsTabs选项卡切"流量趋势 / 月访问量"，chartTabs定义标签，每个 tab 对应一个插槽，里面放各自图表组件；
接口数据回来后，调renderEcharts或updateData就能更新图表。

刷新逻辑用伪代码说就是：

const refresh = () => { const data = await fetch('/api/analytics') // 你的接口 updateData({ series: [{ data: data.list }] }) } refresh() setInterval(refresh, 60_000) // 每分钟一次

updateData是增量更新，默认合并旧配置并保留动画；lazyUpdate: true还能把短时间内的多次调用合并成一次重绘，适合轮询这种高频场景。视图切换不用你操心，选项卡一换，各图表组件自己管生命周期。

三个容易踩的坑

首屏被图表库拖慢。ECharts 体积不小，vue-vben-admin 数据可视化的页面走的是路由懒加载，路由里写成() => import(...)，echarts 相关的 chunk 只在进仪表盘页面时才下载。别把图表库挪到main.ts全局 import，首屏白加载一大坨。
同一个图反复全量重绘。数据更新时别循环调用renderEcharts，它是"清空 + 重画"，动画会一抖一抖；用updateData做增量更新，配合lazyUpdate攒一批再重画，省掉重复计算。
自己再挂一遍 resize 监听。窗口缩放自适应（200ms 防抖的resize）use-echarts.ts里已经写了，你再window.addEventListener('resize', ...)等于一个事件触发两次重绘，白白多干一倍的活。