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

运营同学每天上午要跨五个系统抄数字，再把库存、销量手工拼进一张 Excel 报表，看一眼趋势就得等半天。vue-vben-admin 内置的 ECharts 图表插件，让这套流程压缩到十几行组合式代码。这篇完整指南带你快速搭出第一个数据可视化仪表盘：从引入插件到动态刷新，全部照着做即可。

为什么值得先做一张库存监控看板

先看一个具体场景：仓库管理员每天早上要回答三个问题——哪个 SKU 快断货、哪个渠道卖得最猛、昨天的整体趋势往上还是往下。

痛点很直接：数字散落、格式易错、无法联动。解法是借助 vue-vben-admin 现成的图表能力，把三张卡片（趋势线、渠道占比、库存柱状）拼到同一屏。它不是让你从零封装 ECharts，而是把初始化、自适应、主题这些脏活都提前做掉了，你只填配置。

开工前的 3 分钟准备

环境只要求 Vue3 + Vite + pnpm 的 monorepo 基座。仓库拉到本地后执行pnpm install，再用pnpm dev:antd起 apps/web-antd/，浏览器打开就能看到你马上要改的仪表盘。

你只需要记住三个位置，别去翻文件清单：

1. 图表插件本体，通过@vben/plugins/echarts引用，源码在 packages/effects/plugins/src/echarts/，导出了EchartsUI、useEcharts和ECOption类型。
2. 现成的组合式页面，apps/web-antd/src/views/dashboard/ 里 analytics 与 workspace 两个目录就是可抄的模板。
3. 卡片与选项卡容器，AnalysisChartCard、AnalysisChartsTabs来自 packages/effects/common-ui/。

理解到这一层就够动手了，下面的代码都会落在这三处。

三步搭出第一块看板

第 1 步：如何引入图表插件

一行导入，容器组件和组合式函数一起进来：

import { EchartsUI, useEcharts } from '@vben/plugins/echarts'; import type { EchartsUIType } from '@vben/plugins/echarts';

第 2 步：如何配置第一个占比饼图

这里用一个"各渠道销量占比"的场景，比玫瑰图更贴近日常。chartRef指向容器，onMounted里调用renderEcharts填配置：

<script setup lang="ts"> const chartRef = ref<EchartsUIType>(); const { renderEcharts } = useEcharts(chartRef); onMounted(() => renderEcharts({ series: [{ type: 'pie', radius: ['40%', '70%'], data: [ { name: '自营', value: 620 }, { name: '分销', value: 280 }, ] }], tooltip: { trigger: 'item' }, }), ); </script> <template><EchartsUI ref="chartRef" height="280px" /></template>

EchartsUI默认高 300px、宽 100%，用height、width两个属性就能控尺寸。

第 3 步：如何组合成整页仪表盘

单图不够看，就用卡片容器把几张图并排放，一行一个AnalysisChartCard：

<div class="mt-5 md:flex"> <AnalysisChartCard class="md:w-1/3" title="渠道占比"> <ChannelPie /> </AnalysisChartCard> <AnalysisChartCard class="md:w-1/3" title="库存水位"> <StockBars /> </AnalysisChartCard> </div>

三个子组件各占三分之一宽，窄屏时自动换行。整页看下来就是一张能直接交付的库存看板。

让数据跑起来

如何配置动态刷新

别重新renderEcharts，用useEcharts返回的updateData只替换数据，还能保留过渡动画：

const { updateData } = useEcharts(chartRef); const timer = setInterval(async () => { const { list } = await fetchStock(); // 你的数据接口 await updateData({ series: [{ data: list }] }); }, 60_000);

第二个参数notMerge传true是完全替换，lazyUpdate适合短时间多次调用。记得在onUnmounted里clearInterval，否则切页后定时器还在跑。

如何做选项卡切换

想让用户在"趋势 / 占比 / 排名"之间切，AnalysisChartsTabs接收一个 tab 数组，每个 key 对应一个具名插槽：

<AnalysisChartsTabs :tabs="[{ value: 'trend', label: '趋势' }, { value: 'share', label: '占比' }]"> <template #trend><TrendLine /></template> <template #share><ChannelPie /></template> </AnalysisChartsTabs>

如何做到窗口自适应

这一步基本不用你写：useEcharts内部挂了useResizeObserver和窗口尺寸监听，侧边栏收起或浏览器拉伸时，会自动以 300ms 缓动resize。你要做的只是别用裸的echarts.init自己建实例，那样才需要手动监听。

避坑清单与个性化

新手最常栽的三处，先看结论再照改：

最快换主题方法

暗色模式是全自动跟随的，切到深色图表会自动重建。要改品牌色，最快的方式不是动全局主题，而是直接在 series 上给color或itemStyle.color：

series: [{ type: 'pie', color: ['#2b6cb0', '#38a169', '#d69e2e'] }]

需要整站统一的配色，再去 packages/effects/plugins/src/echarts/echarts.ts 里调整注册项即可。

如何扩展新图表类型

预置了Line、Bar、Pie、Radar四类。要加散点或热力图，在同一个echarts.ts的use([...])里补上ScatterChart，再到types.ts的ECOption联合类型里加上对应 SeriesOption，类型提示就齐了——全程保持按需加载，别图省事全量引入。

一句话回顾：引入useEcharts→ 填renderEcharts配置 → 用updateData让数据活起来，三步就是一个能上线的 ECharts 仪表盘。

下一步建议翻翻 apps/web-antd/src/views/dashboard/analytics/ 里四个现成图表的完整写法，再回来看就一目了然。

【免费下载链接】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