企业官网建设流程全解析

雷达图这个图，说实话在业务里用得不少，但又经常被当成“鸡肋”——因为它不像折线图、柱状图那样直白，也不像饼图那样直观。但你只要做过一次多维度的能力评估、性能对比或者用户画像分析，就会明白雷达图的价值所在：它能把多个维度的数据压缩到一张图里，一眼看出“哪边强、哪边弱、整体是否均衡”。尤其是Vue项目里集成ECharts做雷达图，真的是性价比极高的方案。

我写这篇东西的目的很直接：给你一套可以复制粘贴就能跑的Vue雷达图代码，同时把雷达图背后的配置项逻辑拆明白，省得你网上东拼西凑还弄不清楚为什么有些配置写了没效果。内容覆盖Vue 2和Vue 3的写法差异、完整引入和按需引入的取舍、常见坑的排查思路，以及几个能让雷达图更好用的扩展技巧。不管你是刚接触ECharts的新手，还是被雷达图折腾过几次的老手，应该都能在这篇文章里找到点有用的东西。

1. 为什么选择ECharts做雷达图

1.1 雷达图适合什么样的业务场景

先说场景。雷达图的核心适用条件有两个：一是多维度，二是对比或评估。单维度数据根本用不着雷达图，一条进度条就够了；两个维度也勉强，散点图更合适。但当你面对五六个甚至更多维度，且这些维度之间存在此消彼长的关系时，雷达图就是最直观的呈现方式。

举几个我实际接触过的例子：

第一个是团队能力评估。一个项目组有代码质量、交付效率、协作沟通、技术深度、业务理解五个评估项，每个项目打一个分值。如果用表格堆数字，管理者很难一眼看出团队短板在哪里；如果用五个柱状图并列，又显得很零散。雷达图把五个维度铺开成一个多边形，哪个维度凹陷下去，一目了然。

第二个是产品性能对比，比如两款同类竞品在响应速度、稳定性、功能覆盖、易用性、安全性五个维度的得分对比。雷达图天然支持多个数据系列叠加，两组多边形套在一起，重合度越高说明差异越小，偏移方向就能快速定位到具体差异维度。

第三个是个人能力画像。招聘、绩效考核、培训需求分析这类场景里，六个维度以上的评分雷达图几乎成了标配。候选人、员工、学员的能力结构是否均衡，是否有明显短板，直接看图就清楚。

所以，当你手里已经有一组多维数据，需要表达“结构”和“均衡度”，或者需要多组数据拉平对比时，雷达图值得优先考虑。

1.2 Vue项目中图表方案怎么选

在Vue项目里做雷达图，方案其实有好几条路可走。我自己都用过一遍，说下真实感受。

第一类是使用一些轻量级的React/Vue图表库，比如vue-echarts、v-charts这类封装好的组件。优点是真的上手快，一个组件标签往里一放就行。但问题是包装层往往滞后于ECharts主版本更新，有些高级配置项在封装组件里透传不够干净，一旦遇到自定义需求，还是要回到底层ECharts去处理。另一个问题是引入了额外抽象层，出问题时排查链路变长。

第二类是完全自己画，用SVG或者Canvas手写一个雷达图。如果只是简单画个多边形，不算难，但要做到坐标轴刻度、分割线、分割区域、悬浮提示、图例联动、动画这些细节，工作量就直线上升。而且雷达图有一个比较绕的点：它是一个极坐标系下的图形，涉及角度换算和半径映射，手写容易在边缘case上翻车，比如数据全是0、单维度特别大时，多边形会缩成一个点或撑出边界。

第三类就是直接用ECharts。ECharts对雷达图的支持非常成熟，radar坐标系、polygon/shape切换、多series对比、tooltip格式化、数据区域面积渐变等功能都有原生支持。你只需要把配置项写好，绘图细节完全不用操心。坏处是ECharts的体积不算小，但通过按需引入，体积能控制得比较好，这个我在后面专门讲。

综合下来，我的建议很明确：Vue项目里做雷达图，直接引ECharts是性价比最高的路径。既不用赘余的封装层，也不需要自己从头画。

1.3 在Vue中使用ECharts的整体思路

整体思路其实就四步：安装依赖、创建图表容器、初始化实例并配置参数、在合适的生命周期里销毁实例。

核心逻辑是这样：图表本身是命令式的，也就是说你需要告诉ECharts“你的容器是谁、你要画什么、数据是什么”，它会自己去绘制。而Vue是响应式的，两者的结合点在于：把ECharts实例挂到Vue组件的实例上或者用一个变量引用，在组件挂载完成之后初始化图表，在数据更新时调用setOption方法，在组件卸载前调用dispose释放实例。

理解了这句话，你基本就理解了Vue引入ECharts的全部要点。剩下的都是细节。

2. ECharts引入方式与项目准备

2.1 安装ECharts依赖

这一步没什么花活，在项目根目录执行：

npm install echarts --save

如果你的项目用的是yarn或者pnpm，对应替换成：

yarn add echarts # pnpm pnpm add echarts

装完之后，在package.json里能看到依赖已经加进去了。我建议你用固定版本，而不是latest，避免ECharts大版本升级后配置项行为变化带来连锁问题。比如我在某项目的pakcage.json里固定的是5.x系列版本，用着就很稳。

2.2 完整引入方式

完整引入非常直白，一行代码导入整个ECharts库：

import * as echarts from 'echarts'

这种方式的优点是完全不用考虑模块依赖问题，什么图表类型、什么组件都能用，不管是雷达图、地图、3D图表，还是tooltip、legend、dataZoom等组件，全都可用。

缺点也明显：包体偏大。ECharts完整版体积在1MB左右（压缩后300多KB），对于单页应用来说，如果只是为了一个雷达图，这个体积有点亏。而且现在的构建工具在打包时会把这部分代码打进产物里，首屏加载会有影响。

完整引入适合什么情况呢？比如你的项目里本身图表类型很杂，柱状图、折线图、饼图、雷达图全都有，那完整引入反而省心，因为一次引入到处使用。或者项目没那么在意首屏性能，图个省事也行。

2.3 按需引入方式

按需引入是ECharts 5开始主推的使用方式，核心逻辑是通过echarts/core这个入口，按需注册图表类型和组件。代码长这样：

import * as echarts from 'echarts/core' import { RadarChart } from 'echarts/charts' import { TooltipComponent, LegendComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' // 注册需要用到的模块 echarts.use([RadarChart, TooltipComponent, LegendComponent, CanvasRenderer])

这里需要特别说明一下，按需引入不仅仅是注册了RadarChart就行了，因为ECharts里图表和组件是两个维度的东西。图表的坐标系、渲染器、交互组件都需要单独注册。雷达图如果要正常显示，至少需要这三类模块：

• 图表类：RadarChart
• 组件类：TooltipComponent（悬浮提示）、LegendComponent（图例，如果不显示图例也可以不注册）
• 渲染器：CanvasRenderer，这是SVGRenderer之外的另一个选择，默认推荐Canvas

如果漏掉其中一个，雷达图不会报错，但表现会异常，比如tooltip不出现、图例不显示，或者直接渲染不出来。这个问题排查起来比较隐蔽，我第一次按需引入时就因为没注册LegendComponent，折腾了半天才发现是漏了注册。

生产环境里我通常会在项目的一个公共模块里统一管理ECharts的按需注册，比如新建一个echartsSetup.js：

// src/utils/echartsSetup.js import * as echarts from 'echarts/core' import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts' import { TooltipComponent, LegendComponent, GridComponent, TitleComponent } from 'echarts/components' import { CanvasRenderer } from 'echarts/renderers' echarts.use([ BarChart, LineChart, PieChart, RadarChart, TooltipComponent, LegendComponent, GridComponent, TitleComponent, CanvasRenderer ]) export default echarts

这样全项目统一从echartsSetup.js里导出echarts，既做到了按需加载，又避免了每个组件各自注册的重复操作。

2.4 两种方式的体积与取舍对比

为了让你心里更有数，我整理了一个简单的对比表：

如果雷达图是你项目里唯一的图表，按需引入和完整引入的体积差距可以达到5倍以上，首屏性能差别很大。如果项目里图表很多，两种方式的体积差距会被稀释，这时完整引用的便利性就更值钱了。

不过有一点我想提醒：按需引入在开发环境下偶尔会因为动态导入方式不同，遇到构建工具的tree-shaking优化不彻底的问题。多数时候没事，但如果发现打包产物明显偏大，可以去构建配置里检查一下sideEffects设置。

3. 雷达图配置项逐一拆解

3.1 indicator：定义雷达图的坐标系

雷达图跟直角坐标系图不同，它用的是极坐标系逻辑，每个维度都是一条从中心向外的轴线。这条轴线怎么定义，就是indicator配置项干的事。

看一个最基础的indicator结构：

radar: { indicator: [ { name: '代码质量', max: 100 }, { name: '交付效率', max: 100 }, { name: '协作沟通', max: 100 }, { name: '技术深度', max: 100 }, { name: '业务理解', max: 100 } ] }

indicator是一个数组，数组里每一项代表一个维度。每个维度对象里常用三个属性：

• name：维度名称，会显示在雷达图的坐标轴末端
• max：这个维度的最大值，决定坐标轴的刻度范围
• min：最小值，默认是0，一般不需要改

这里有一个关键点：name数组的顺序就是坐标轴依次排列的顺序，默认从正上方开始顺时针排列。如果你想调整维度的起始位置，可以使用radar.startAngle和radar.clockwise两个属性来控制。

startAngle默认是90，也就是从正上方开始；顺时针排列是默认的clockwise: true。如果你想让轴线从左侧开始，或者逆时针排布，修改这两个参数即可。

另外，radar.shape可以设置成polygon或circle。默认是polygon，也就是多边形，雷达图长得有棱有角那种；如果设置成circle，坐标轴和网格都变成圆形，视觉效果更柔和。这个纯粹看审美偏好，我用polygon多一些，因为分割线看得清楚。

3.2 series与data：把你的数据映射上去

坐标系定义好了，数据怎么往里填，核心在series数组里。

series: [{ type: 'radar', data: [ { name: '当前团队', value: [82, 70, 75, 88, 65] }, { name: '目标水平', value: [90, 85, 80, 90, 75] } ] }]

series.data是一个数组，数组里的每一项是一个数据系列。每个系列里有一个value数组，这个数组的顺序必须和indicator里的维度顺序严格一致。比如indicator有五个维度，value里就必须有五个数字，第一个数字对应第一个维度，第二个对应第二个，不能错位。

这里是最容易出错的地方：数据维度数量和indicator维度数量对不上时，ECharts不会报错，但图形会异常，比如少画一条轴线，或者某条数据线直接落到中心点。我后面在问题排查章节会展开说。

series里还有一些可选的样式配置：

series: [{ type: 'radar', areaStyle: { opacity: 0.2 }, // 系列整体面积透明度 lineStyle: { width: 2 }, // 系列线条样式 itemStyle: { color: '#5470c6' }, // 数据点颜色 data: [...] }]

如果你有多组数据要对比，每个数据项里也可以单独覆盖样式，方式是在data数组对应的项里写lineStyle、itemStyle、areaStyle，优先级比series级别的高。这样同一个图里可以同时呈现多个对象，且每个对象有自己的颜色风格。

3.3 视觉细节：图例、提示框与分割区域

雷达图好不好看、信息传达清不清楚，很大程度上取决于这些辅助配置：

legend图例：多数据系列时必须有图例，否则用户分不清哪条线代表谁。图例配置一般放在最外层：

legend: { data: ['当前团队', '目标水平'], bottom: 10 }

注意legend.data里的名称要和series.data里每个数据项的name一致，这样图例才能正确关联。点击图例可以控制对应系列的显示/隐藏，这个交互是ECharts自带的，不需要额外写逻辑。

tooltip提示框：鼠标悬浮到数据多边形边角时，显示该维度对应的数值。雷达图的tooltip触发方式建议用trigger: 'item'，默认格式是“系列名 : 维度名\n数值”。如果你觉得这个格式太简陋，可以用formatter自定义，我后面进阶部分单独讲。

splitNumber与splitArea：分割段数和分割区域。splitNumber决定了从中心到最外圈有几条等分线，比如4就表示分成4个环带。splitArea控制环带区域的填充颜色：

radar: { splitNumber: 4, splitArea: { areaStyle: { color: ['rgba(80, 140, 255, 0.05)', 'rgba(80, 140, 255, 0.1)'] } } }

splitArea.areaStyle.color是一个数组，ECharts会自动在数组里的颜色之间循环切换，从而让相邻环带颜色不同，视觉上更有层次感。

axisLine与splitLine：坐标轴刻度和分割线的样式。比如让轴线颜色浅一点、分割线用虚线，都能增强阅读性。

axisLine: { lineStyle: { color: '#ccc' } }, splitLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.1)' } }

如果你做完基本配置后发现雷达图边缘太硬、或者坐标轴文字挤在一起，优先调整axisName的fontSize和雷达图区域的大小。

3.4 一份可直接复制的通用配置模板

综合上面这些配置，我整理一份可以直接套用的雷达图配置模板：

const radarOption = { tooltip: { trigger: 'item' }, legend: { data: ['对象A', '对象B'], bottom: 10, textStyle: { color: '#555' } }, radar: { indicator: [ { name: '维度一', max: 100 }, { name: '维度二', max: 100 }, { name: '维度三', max: 100 }, { name: '维度四', max: 100 }, { name: '维度五', max: 100 }, { name: '维度六', max: 100 } ], radius: '65%', center: ['50%', '50%'], shape: 'polygon', splitNumber: 4, axisName: { color: '#333', fontSize: 14 }, splitArea: { areaStyle: { color: ['rgba(90, 140, 220, 0.03)', 'rgba(90, 140, 220, 0.08)'] } } }, series: [{ type: 'radar', data: [ { name: '对象A', value: [80, 70, 85, 90, 60, 75], lineStyle: { color: '#5470c6', width: 2 }, itemStyle: { color: '#5470c6' }, areaStyle: { color: 'rgba(84, 112, 198, 0.3)' } }, { name: '对象B', value: [75, 88, 72, 68, 95, 80], lineStyle: { color: '#91cc75', width: 2, type: 'dashed' }, itemStyle: { color: '#91cc75' }, areaStyle: { color: 'rgba(145, 204, 117, 0.2)' } } ] }] }

把这套配置放到chartInstance.setOption(radarOption)里，雷达图就能正常画出来。这里的radius: '65%'、center: ['50%', '50%']是为了控制雷达图在整个canvas里的位置和大小，可视化区域不要占满全屏，四周留白给坐标轴文字和图例。

4. 完整Vue组件实现（复制粘贴可用）

4.1 Vue 3组合式API完整代码

导航栏项目大多数用的是Vue 3 + 组合式API，所以我优先给这份代码。整个组件不到一百行，核心逻辑清晰，直接可以放到你的项目里用：

<template> <div ref="chartRef" class="radar-chart"></div> </template> <script setup> import { ref, onMounted, onBeforeUnmount } from 'vue' import * as echarts from 'echarts' const chartRef = ref(null) let chartInstance = null // 雷达图配置:以团队能力评估为例 function getRadarOption() { return { tooltip: { trigger: 'item' }, legend: { data: ['当前团队', '目标水平'], bottom: 10 }, radar: { indicator: [ { name: '代码质量', max: 100 }, { name: '交付效率', max: 100 }, { name: '协作沟通', max: 100 }, { name: '技术深度', max: 100 }, { name: '业务理解', max: 100 } ], radius: '65%', shape: 'polygon', splitNumber: 4, axisName: { color: '#333', fontSize: 13 }, splitArea: { areaStyle: { color: ['rgba(84, 112, 198, 0.03)', 'rgba(84, 112, 198, 0.08)'] } } }, series: [{ type: 'radar', data: [ { name: '当前团队', value: [82, 70, 75, 88, 65], lineStyle: { color: '#5470c6', width: 2 }, areaStyle: { color: 'rgba(84, 112, 198, 0.3)' } }, { name: '目标水平', value: [90, 85, 80, 90, 75], lineStyle: { color: '#91cc75', width: 2, type: 'dashed' }, areaStyle: { color: 'rgba(145, 204, 117, 0.2)' } } ] }] } } function initChart() { if (!chartRef.value) return chartInstance = echarts.init(chartRef.value) chartInstance.setOption(getRadarOption()) // 监听窗口尺寸变化,自适应缩放 window.addEventListener('resize', handleResize) } function handleResize() { chartInstance && chartInstance.resize() } function updateChartData(newDataArray) { if (!chartInstance) { return } chartInstance.setOption({ series: [{ data: newDataArray }] }) } onMounted(() => { initChart() }) onBeforeUnmount(() => { window.removeEventListener('resize', handleResize) if (chartInstance) { chartInstance.dispose() chartInstance = null } }) </script> <style scoped> .radar-chart { width: 100%; height: 420px; } </style>

这份代码跑起来后，页面里会显示两个多边形，一个是当前团队的实际得分，另一个是目标水平，分别为实线和虚线样式。注意updateChartData这个函数：当你从接口拿到新数据后，调用它并传入新数组即可，不需要重新初始化实例。ECharts的setOption会对新旧配置做merge合并，性能很好。

还要注意样式：.radar-chart的高度我写死为420px，这种字符必须给。ECharts初始化时要求容器有明确的宽高，如果高度为0或依赖内容撑开但为空，图表是出不来的。高度具体用多少，取决于你页面布局，只要能保证容器在init时有实际尺寸即可。

4.2 Vue 2选项式API的写法差异

Vue 2项目里写法和Vue 3略有不同，主要区别在生命周期钩子和实例引用方式上。完整代码大概长这样：

<template> <div ref="chartRef" class="radar-chart"></div> </template> <script> import * as echarts from 'echarts' export default { name: 'RadarChart', data() { return { chartInstance: null } }, mounted() { this.chartInstance = echarts.init(this.$refs.chartRef) this.chartInstance.setOption(this.getRadarOption()) window.addEventListener('resize', this.handleResize) }, beforeDestroy() { window.removeEventListener('resize', this.handleResize) if (this.chartInstance) { this.chartInstance.dispose() this.chartInstance = null } }, methods: { handleResize() { this.chartInstance && this.chartInstance.resize() }, getRadarOption() { // 这里和Vue 3版本的配置完全一样 return { // ... } }, updateChartData(newDataArray) { this.chartInstance.setOption({ series: [{ data: newDataArray }] }) } } } </script> <style scoped> .radar-chart { width: 100%; height: 420px; } </style>

关键差异有三个：第一，容器DOM通过this.$refs.chartRef获取，而不是ref变量；第二，生命周期钩子名是mounted和beforeDestroy，Vue 3里叫onMounted和onBeforeUnmount；第三，数据更新方法通过methods定义，外部调用时用this.$refs.xxx或组件实例的暴露方法。

如果你是从Vue 2老项目迁移到Vue 3，这部分差异几乎就是你重写组件时需要改动的大部分内容。

4.3 数据动态更新与销毁流程的细节

前面提过，ECharts的数据更新用setOption，不重建实例。这一点在高频刷新场景下尤其重要。比如你做一个实时监控面板，每5秒拉一次数据，如果每次拉完都重新echarts.init，不仅会闪烁，还会造成内存泄漏和性能浪费。

正确的做法是：

async function fetchAndUpdate() { const res = await fetch('/api/team-radar-data') const seriesData = res.data chartInstance.setOption({ series: [{ data: seriesData }] }) }

因为setOption时会自动merge新旧数据，图表只会更新变化的部分。动画效果也会触发，视觉上很流畅。

销毁流程也不能省。组件卸载时如果不调用dispose，图表实例会一直占用canvas资源和内存。如果你的页面里频繁切换包含图表的组件，时间长了会出现卡顿。所以onBeforeUnmount或beforeDestroy钩子里一定要写成这样：

if (chartInstance) { chartInstance.dispose() chartInstance = null }

这里有两个模拟细节值得说：第一，dispose()之后不要忘记把实例引用置为null；第二，如果容器DOM本身被Vue移除了，再调用dispose可能反过来抛出异常，所以用if判断一下是稳妥的。

5. 雷达图高频踩坑与排查建议

5.1 容器宽高为0导致图表不显示

这是ECharts全系列图表里最常见的翻车现场：图表配置一点问题没有，但页面里就是一片空白。打开控制台，通常会看到类似“Can't get DOM width or height”的报错。

原因很简单：echarts.init(dom)执行时，DOM元素的宽度或高度为0。常见发生时机是在onMounted里立即init，而这时容器所在的v-if还没有渲染完成，或者容器高度依赖的异步数据还没加载完。

排查思路：

• 检查容器元素是否有明确的width和height样式
• 检查init时容器是否已经在DOM树里
• 如果容器在v-if、v-show条件块中，确保条件成立后再init

解决方式无非两种：一是用nextTick或延时后再init；二是将容器固定为常驻元素，内部再用v-show切换内容。我实际项目中更推荐第二种，因为v-show只是控制display，容器本身始终存在，init和resize都不会受Vue渲染时机影响。

5.2 图表实例重复创建与内存泄漏

组件被重复渲染时，如果没有在销毁阶段dispose旧实例，每次渲染都会新建一个ECharts实例，旧实例占用的canvas和事件监听资源不会被自动释放。短期看不出问题，但页面长时间运行后，内存占用会显著上升。

另外一个相关坑是：切换路由再返回时，如果初始化逻辑在onMounted里执行，而组件实例是缓存复用的，图表会初始化两次或执行多次。解决方案是初始化前先判断实例是否已经存在：

function initChart() { if (chartInstance) { chartInstance.dispose() } chartInstance = echarts.init(chartRef.value) chartInstance.setOption(getRadarOption()) }

每次初始化前先销毁旧的，再做新的，虽然简单粗暴，但能有效避免重复实例的问题。

5.3 indicator与value维度不匹配

雷达图比较特殊的一点是，如果value数组的个数比indicator多，ECharts会截断多余数据；如果比indicator少，则不足的维度上数值会被当成0处理，图形直接凹进中心。这两种情况都很难察觉，因为控制台不会报错。

举个例子，indicator定义了6个维度，但接口返回的数据只有5个值，画出来的雷达图会有一根轴延伸到坐标原点，看起来像某个维度得分是0分，很容易误导业务判断。

排查办法很简单：在数据更新时加一行防御性校验：

if (newDataArray.some(item => item.value.length !== indicator.length)) { console.warn('雷达图数据维度与indicator维度数量不一致') }

只要维度数量异常，立刻输出警告，问题定位就快得多。

5.4 数据全为0或单维突出时的显示异常

验证雷达图边界情况是很容易被忽略的环节。当所有维度数值都是0时，图形缩成一个点，视觉上就像没画一样。单维数值特别大而其他维度很小时，多边形会有一条边极度向外凸出，挤压其他维度的可读空间。

应对方案有两种思路。第一种是调整indicator的max值，让它接近实际数据上限。比如数据最大可能是120，但实际值普遍在80-95之间，把max设置成100就比120更合适，图形占比更大、更清楚。第二种是给极小值设置一个min阈值：

indicator: [ { name: '代码质量', min: 20, max: 100 }, { name: '交付效率', min: 20, max: 100 } ]

min不为0时，雷达图的多边形会从20这条刻度线开始画，相当于把图形整体外扩，视觉上更能体现低分维度之间的细微差异。

这也是我做雷达图配置时一定会考虑的边界情况。真正的生产数据往往不会完美均匀分布，提前处理这些场景，能少挨不少业务方文案。

5.5 常见问题速查表

把上面这些坑做成速查表，方便你以后遇到问题时快速定位：

这张表是我自己踩坑后的总结，不一定覆盖所有边界情况，但已经覆盖了雷达图开发里八成以上的高频问题。

6. 进阶技巧：让雷达图更好用

6.1 自定义tooltip格式化

默认的tooltip显示内容只有系列名和维度名加数值，稍微有点干。业务上往往需要附加信息，比如默认值对比、同维度目标值、同比变化率等。

用formatter自定义显示内容，代码示范：

tooltip: { trigger: 'item', formatter: function (params) { const { name, value, marker } = params let html = `${marker}${name}<br/>` value.forEach((val, index) => { // 每个维度显示一行:维度名 + 值 const axisName = getRadarOption().radar.indicator[index].name html += `${axisName}: ${val}<br/>` }) return html } }

要注意formatter里的params和普通图表有所不同。雷达图里，当tooltip的trigger是item时，params.value是一个数组，而不是单个数值。遍历这个数组，结合indicator里的维度名，就能拼出结构化信息。

还有一种做法是把额外的业务信息（比如备注、时间戳）塞到原始数据里：

data: [{ name: '当前团队', value: [82, 70, 75, 88, 65], extraInfo: { updateTime: '2025-01-15 10:00', note: '季度评估' } }]

然后在formatter里通过params.data.extraInfo取出来渲染。这样tooltip的展示空间就很大了。

6.2 同一图中对比多个对象

雷达图天生支持多数据系列叠加，对比两个对象是基本操作，三个及以上时信息密度会显著上升，图表可读性开始下降。建议最多控制在6个系列以内，超过6个就考虑拆图。

多个系列时，颜色管理是关键。ECharts有默认配色板，但如果所有系列都用默认色，区分度上会有问题。从第二个系列开始，建议手动指定颜色：

series: [{ type: 'radar', data: [ { name: '对象A', value: [82, 70, 75, 88, 65], lineStyle: { color: '#5470c6' }, areaStyle: { opacity: 0.15 } }, { name: '对象B', value: [75, 88, 72, 68, 95], lineStyle: { color: '#91cc75' }, areaStyle: { opacity: 0.15 } }, { name: '对象C', value: [60, 78, 90, 72, 80], lineStyle: { color: '#ee6666' }, areaStyle: { opacity: 0.15 } } ] }]

为了区分层次，我习惯把第一个对象作为“参照基线”，使用实线加较浅的面积色；其他对象再用实线或虚线搭配各自的颜色。图例放置到底部，用户点击图例可以关闭或开启对应系列的显示，对比时非常灵活。

6.3 响应式自适应：窗口变化自动调整

ECharts实例本身尺寸是固定的，窗口尺寸变化时需要手动调用resize()方法。前面完整代码里已经写了基本版本：

window.addEventListener('resize', handleResize)

这个方案相对简单，但有一个常见问题：如果页面布局在resize过程中导致容器宽度变化，而你其他页面的交互（比如侧边栏折叠）也改变了容器尺寸，单纯监听window resize是不够的。这种情况下建议用ResizeObserver配合自定义事件回调：

import { ref, onMounted, onBeforeUnmount } from 'vue' const chartRef = ref(null) let chartInstance = null let resizeObserver = null function initChart() { chartInstance = echarts.init(chartRef.value) chartInstance.setOption(getRadarOption()) // 使用 ResizeObserver 监听容器尺寸变化 resizeObserver = new ResizeObserver(() => { chartInstance && chartInstance.resize() }) resizeObserver.observe(chartRef.value) } function destroyChart() { if (resizeObserver) { resizeObserver.disconnect() resizeObserver = null } if (chartInstance) { chartInstance.dispose() chartInstance = null } } onMounted(() => { initChart() }) onBeforeUnmount(() => { destroyChart() })

ResizeObserver的兼容性在现代浏览器里已经比较好了，如果你的项目里还有其他图表，初始化逻辑可以统一封装，配合公共的echartsSetup模块使用。

6.4 数据动态刷新时的过渡动画

雷达图在数据更新时默认会有动画过渡，但如果数据值变化幅度跨度很大，动画过程可能会显得生硬。可以通过series里的animationDuration和animationEasing控制过渡效果：

series: [{ type: 'radar', animationDuration: 800, animationEasing: 'quinticInOut', data: [...] }]

如果希望数据更新时不做动画，直接变成新图形，可以设置animationDurationUpdate: 0。

实际在线实时监控的数据刷新面板上，我一般保留动画，但会把动画时间压到300ms以内，既让数据变化有感知，又不拖泥带水。

7. 结语：雷达图只是起点，配置哲学才是关键

做雷达图做到最后，我的体会是：图表本身不难，难点全在于把业务信息转成配置项的过程中会不会漏维度、错数据、丢状态。ECharts的配置项体系很庞杂，但雷达图这一小块其实非常收敛，搞懂了indicator、series、data、tooltip、legend这几个维度，你就能应付绝大部分需求。

最后再分享一个小技巧：如果雷达图的坐标轴名称太多、字体太小挤在一起，优先调整axisName的formatter或者fontSize；如果图例挡住图形，就调整legend的top或bottom偏移；如果整体配色不协调，去ECharts官网主题编辑器里挑一套深色或者浅色主题，通过echarts.init(dom, themeName)直接使用，能让整个图表质感提升不少。

雷达图就是这样，配好一套配置、想清楚数据结构、处理掉异步和销毁流程，剩下的交给ECharts去发挥就行。这套路通，其他图表也大差不差。