React Suite RadarChart 组件介绍

简介

React Suite RadarChart 组件是一个基于 React 的雷达图组件，可用于分析多维度数据之间的关系，展示数据差异和趋势。

功能

• 支持自定义数据项、标题、颜色、边框样式等。
• 支持多种配色方案，可根据需求切换。
• 支持缩放、旋转等操作，方便用户查看数据细节。
• 支持响应式设计，自适应不同的屏幕尺寸。

安装

npm install @rsuite/charts --save

用法

import { RadarChart } from "@rsuite/charts";

<RadarChart
  data={[
    { name: "Data 1", A: 10, B: 20, C: 30, D: 40, E: 50 },
    { name: "Data 2", A: 30, B: 40, C: 50, D: 60, E: 70 },
    { name: "Data 3", A: 70, B: 80, C: 90, D: 100, E: 80 }
  ]}
  keys={["A", "B", "C", "D", "E"]}
  colors={[
    "#0088FE",
    "#00C49F",
    "#FFBB28",
    "#FF8042",
    "#AF19FF",
    "#FF19AF"
  ]}
/>

API

以下是 RadarChart 组件的主要 Props：

• data：数据数组，每个对象代表一个数据系列，必须包含 name 字段。示例：[{name: "Data 1", A: 10, B: 20, C: 30}, {name: "Data 2", A: 20, B: 30, C: 40}]
• keys：数据项数组，每个元素代表一个数据项的名称。示例：["A", "B", "C"]
• colors：颜色数组，每个元素代表一个数据系列的颜色。如果数据系列数量大于颜色数量，则循环使用颜色。示例：["#0088FE", "#00C49F", "#FFBB28"]
• title：标题文本，可选。
• titleColor：标题颜色，可选。
• border：边框样式对象，可选。默认：{ width: 1, color: "#fff", style: "solid" }
• maxValue：最大值，可选。
• axisLine：坐标轴轴线颜色，可选。默认：'#bbb'
• gridLine：坐标轴刻度线颜色，可选。默认：'#ccc'
• gridCount：坐标轴刻度数量，可选。默认：5
• tooltip：提示框样式对象，可选。默认：

  {
    background: "#fff",
    boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.15)",
    borderRadius: "4px",
    padding: "10px"
  }
  

• isOuterRadius：判断是否要画射线，默认false
• width：宽度值，支持百分比和像素值。默认："100%"
• height：高度值，支持百分比和像素值。默认："100%"

配色方案

组件提供了多种配色方案，可通过 colors 属性传入。以下是示例：

方案 1：五彩斑斓

colors={["#0088FE", "#00C49F", "#FFBB28", "#FF8042", "#AF19FF", "#FF19AF"]}

方案 2：灰度渐变

colors={["#EFEFEF", "#D0D0D0", "#B1B1B1", "#929292", "#727272", "#525252"]}

方案 3：单色调

colors={["#007AFF"]}

结语

React Suite RadarChart 组件提供了丰富的功能和灵活的自定义，可以轻松实现多维度数据的可视化展示，为数据分析与决策提供有力支持。感谢 React Suite 团队的出色工作！