Skip to content

雷达图示例

雷达图是一种用于展示多维度数据的图表类型,适合比较不同对象在多个维度上的表现。

基本用法

tsx
import { RadarChart } from '@agions/taroviz';

const data = {
  series: [
    {
      name: '产品A',
      data: [80, 90, 70, 85, 95, 75],
    },
  ],
};

function App() {
  return (
    <RadarChart
      data={data}
      width={300}
      height={200}
      options={{
        title: {
          text: '产品性能评估',
        },
        tooltip: {
          trigger: 'item',
        },
        radar: {
          indicator: [
            { name: '性能', max: 100 },
            { name: '易用性', max: 100 },
            { name: '功能', max: 100 },
            { name: '稳定性', max: 100 },
            { name: '安全性', max: 100 },
            { name: '可扩展性', max: 100 },
          ],
        },
      }}
    />
  );
}

多系列雷达图

tsx
import { RadarChart } from '@agions/taroviz';

const data = {
  series: [
    {
      name: '产品A',
      data: [80, 90, 70, 85, 95, 75],
    },
    {
      name: '产品B',
      data: [90, 80, 85, 90, 85, 95],
    },
  ],
};

function App() {
  return (
    <RadarChart
      data={data}
      width={300}
      height={200}
      options={{
        title: {
          text: '产品性能对比',
        },
        tooltip: {
          trigger: 'item',
        },
        radar: {
          indicator: [
            { name: '性能', max: 100 },
            { name: '易用性', max: 100 },
            { name: '功能', max: 100 },
            { name: '稳定性', max: 100 },
            { name: '安全性', max: 100 },
            { name: '可扩展性', max: 100 },
          ],
        },
      }}
    />
  );
}

配置项

雷达图支持所有 ECharts 雷达图的配置项,详细请参考 ECharts 雷达图文档

注意事项

  • 雷达图适合展示多维度数据的对比
  • 建议维度数量在3-8个之间,过多会影响可读性
  • 可以通过不同颜色区分不同系列的数据

Released under the MIT License.