vue-vben-admin 仪表盘实战：4 个任务搞定 ECharts 数据可视化-编程实验室

vue-vben-admin 仪表盘实战：4 个任务搞定 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

先看图：在 vue-vben-admin 里登录后，分析页直接呈现一个完整的数据面板——顶部四张数字卡，中间选项卡可在「流量趋势」与「月访问量」之间切换，底部三列并排放着环形图与占比图 📊。整个页面就是一个 Vue 文件拼出来的，背后只依赖一套仓库自带的 ECharts 插件。

这篇文章按任务拆解它：怎么接入单张图表、怎么拼出整块仪表盘、图表的生命周期如何被自动托管。全部基于现有代码，不需要额外安装东西。

任务 1：5 分钟接入第一张图表

最小步骤只有三步：

从@vben/plugins/echarts引入EchartsUI（一个图表容器）和useEcharts（一个组合式函数，负责初始化、尺寸监听、主题切换与销毁这些脏活）；
用一个ref指向容器，把ref交给useEcharts；
在挂载时调用renderEcharts，把标准 ECharts 配置传进去。

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

完成标准：页面上出现一张带入场动画的环形玫瑰图。改动data与color就能得到新图表。这张图在仓库里的完整实现见 analytics-visits-sales.vue。

任务 2：把单图拼成完整仪表盘页面

单图只是起点，真正的仪表盘还需要数字卡、选项卡这些骨架。它们都来自@vben/common-ui，主文件 analytics/index.vue 把整页拼起来：

顶部AnalysisOverview展示四组指标，每项包含图标、标题、当前值与累计值；
中间AnalysisChartsTabs用chartTabs数组定义标签，每个标签对应一个 slot，slot 里放各自的图表组件（如analytics-trends.vue、analytics-visits.vue）；
底部三列用响应式网格并排，每张图各自包进一张AnalysisChartCard。

<AnalysisChartsTabs :tabs="chartTabs" class="mt-5"> <template #trends> <AnalyticsTrends /> </template> <template #visits> <AnalyticsVisits /> </template> </AnalysisChartsTabs>

完成标准：打开页面能切换两个标签，底部三张图同时可见、互不挤占。

任务 3：让图表数据实时刷新

图表不是画一次就结束：数据会刷新、窗口会缩放、主题会切换。后两件事useEcharts已经替你做了——窗口尺寸变化时带 300ms 动画防抖重绘，暗色模式切换时自动重建实例并按缓存配置重新渲染，业务代码不用写任何事件监听。🔁

真正要写代码的只有数据更新。useEcharts返回的updateData支持合并模式，默认保留入场动画，配合定时器就是最常见的轮询场景：

const { updateData } = useEcharts(chartRef); setInterval(() => { fetchVisits().then((data) => { // notMerge 默认 false：合并更新，动画与既有配置都保留 updateData({ series: [{ data }] }); }); }, 60_000);

完成标准：定时轮询后曲线平滑变化；切到暗色模式，图表随主题无缝切换。