开发预览更新于 2026-05-10

RadarChart 雷达图

多维度对比的多边形图，支持多 series。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

背景视口

A 方案
B 方案

src/App.vue

<script setup lang="ts">
import { CfRadarChart } from '@chufix-design/vue';
const axes = ['速度', '稳定性', '兼容', '生态', '文档', '社区'];
const series = [
  { name: 'A 方案', values: [85, 70, 92, 78, 65, 80] },
  { name: 'B 方案', values: [70, 88, 75, 90, 82, 75] },
];
</script>
<template>
  <CfRadarChart :axes="axes" :series="series" />
</template>

<script setup>
import { CfRadarChart } from '@chufix-design/vue';
const axes = ['速度', '稳定性', '兼容', '生态', '文档', '社区'];
const series = [
  { name: 'A 方案', values: [85, 70, 92, 78, 65, 80] },
  { name: 'B 方案', values: [70, 88, 75, 90, 82, 75] },
];
</script>
<template>
  <CfRadarChart :axes="axes" :series="series" />
</template>

import { CfRadarChart } from '@chufix-design/react';

export default function Demo() {
  const axes = ['速度', '稳定性', '兼容', '生态', '文档', '社区'];
  const series = [
    { name: 'A 方案', values: [85, 70, 92, 78, 65, 80] },
    { name: 'B 方案', values: [70, 88, 75, 90, 82, 75] },
  ];
  return (
    <>
      <CfRadarChart axes={axes} series={series} />
    </>
  );
}

import { CfRadarChart } from '@chufix-design/react';

export default function Demo() {
  const axes = ['速度', '稳定性', '兼容', '生态', '文档', '社区'];
  const series = [
    { name: 'A 方案', values: [85, 70, 92, 78, 65, 80] },
    { name: 'B 方案', values: [70, 88, 75, 90, 82, 75] },
  ];
  return (
    <>
      <CfRadarChart axes={axes} series={series} />
    </>
  );
}

多 series 对比

3 套方案在 6 维度上的对比，颜色循环 --viz-*。

背景视口

当前架构
提议方案
保守方案

src/App.vue

<script setup lang="ts">
import { CfRadarChart } from '@chufix-design/vue';
const axes = ['性能', '安全', '可维护', '可扩展', '兼容性', '生态'];
const series = [
  { name: '当前架构', values: [70, 80, 65, 75, 60, 55], colorIndex: 0 },
  { name: '提议方案', values: [88, 78, 90, 92, 70, 80], colorIndex: 2 },
  { name: '保守方案', values: [60, 90, 75, 50, 95, 85], colorIndex: 1 },
];
</script>
<template>
  <CfRadarChart :axes="axes" :series="series" :size="280" />
</template>

<script setup>
import { CfRadarChart } from '@chufix-design/vue';
const axes = ['性能', '安全', '可维护', '可扩展', '兼容性', '生态'];
const series = [
  { name: '当前架构', values: [70, 80, 65, 75, 60, 55], colorIndex: 0 },
  { name: '提议方案', values: [88, 78, 90, 92, 70, 80], colorIndex: 2 },
  { name: '保守方案', values: [60, 90, 75, 50, 95, 85], colorIndex: 1 },
];
</script>
<template>
  <CfRadarChart :axes="axes" :series="series" :size="280" />
</template>

import { CfRadarChart } from '@chufix-design/react';

export default function Demo() {
  const axes = ['性能', '安全', '可维护', '可扩展', '兼容性', '生态'];
  const series = [
    { name: '当前架构', values: [70, 80, 65, 75, 60, 55], colorIndex: 0 },
    { name: '提议方案', values: [88, 78, 90, 92, 70, 80], colorIndex: 2 },
    { name: '保守方案', values: [60, 90, 75, 50, 95, 85], colorIndex: 1 },
  ];
  return (
    <>
      <CfRadarChart axes={axes} series={series} size={280} />
    </>
  );
}

import { CfRadarChart } from '@chufix-design/react';

export default function Demo() {
  const axes = ['性能', '安全', '可维护', '可扩展', '兼容性', '生态'];
  const series = [
    { name: '当前架构', values: [70, 80, 65, 75, 60, 55], colorIndex: 0 },
    { name: '提议方案', values: [88, 78, 90, 92, 70, 80], colorIndex: 2 },
    { name: '保守方案', values: [60, 90, 75, 50, 95, 85], colorIndex: 1 },
  ];
  return (
    <>
      <CfRadarChart axes={axes} series={series} size={280} />
    </>
  );
}

API

属性	类型	默认值	说明
`axes`	`string[]`	`—`	维度名
`series`	`RadarSeries[]`	`—`	{ name, values: number[], colorIndex? }[]
`size`	`number`	`240`
`max`	`number`	数据最大值	标准化基准
`showLegend`	`boolean`	`true`	显示图例
`showPoints`	`boolean`	`true`	顶点处画 3px dot；触发 `vertex-*` 事件
`ariaLabel`	`string`	`—`	透传给根 `<svg>` 的 `aria-label`

Events

雷达图有三个层级的交互：整条 series（多边形） / 单顶点（series × axis 的交叉点） / 轴本身。

Vue 事件	React 回调	载荷类型	说明
`item-enter`	`onItemEnter`	`RadarChartInteractionPayload`	鼠标进入某 series 多边形
`item-leave`	`onItemLeave`	`RadarChartInteractionPayload`	鼠标离开 series
`vertex-enter`	`onVertexEnter`	`RadarVertexInteractionPayload`	鼠标进入某顶点 dot（精确到 series × axis）
`vertex-leave`	`onVertexLeave`	`RadarVertexInteractionPayload`	鼠标离开顶点
`axis-enter`	`onAxisEnter`	`RadarAxisInteractionPayload`	鼠标进入轴线或轴标签
`axis-leave`	`onAxisLeave`	`RadarAxisInteractionPayload`	鼠标离开轴线/轴标签

类型

interface RadarChartInteractionPayload {
  series: RadarSeries;
  seriesIndex: number;
  nativeEvent?: PointerEvent;
}

interface RadarVertexInteractionPayload {
  series: RadarSeries;
  seriesIndex: number;
  /** 0..axes.length-1 */
  axisIndex: number;
  axisLabel: string;
  value: number;
  nativeEvent?: PointerEvent;
}

interface RadarAxisInteractionPayload {
  axisIndex: number;
  axisLabel: string;
  /** 各 series 在该轴上的值，按 seriesIndex 排列。 */
  values: number[];
  nativeEvent?: PointerEvent;
}