AntV G2 绘制雷达图 React

### 实现雷达图要在 React 应用中使用 AntV G2 绘制雷达图，需先安装 `@antv/g2` 和 `@antv/g2plot` 包。通过 npm 或 yarn 安装这些依赖项可以方便地集成到现有的 React 项目中[^1]。 ```bash npm install @antv/g2 @antv/g2plot ``` 创建一个新的组件来封装雷达图逻辑。此组件将在挂载时初始化图表并根据状态更新数据： ```jsx import { useEffect, useRef } from 'react'; import { Radar } from '@antv/g2plot'; const RadarChart = ({ data }) => { const chartRef = useRef(null); useEffect(() => { if (chartRef.current) { const radarPlot = new Radar(chartRef.current, { title: { visible: true, text: 'Radar Chart Example', }, forceFit: true, data, xField: 'item', // 数据中的字段名对应于类别轴上的标签 yField: 'score', // 数值轴对应的字段名称 seriesField: 'type' // 不同系列区分的颜色维度 }); radarPlot.render(); return () => { radarPlot.destroy(); }; } }, [data]); return <div ref={chartRef} style={{ width: '100%', height: '400px' }} />; }; ``` 上述代码定义了一个名为 `RadarChart` 的函数式组件，它接收一个 prop 属性 `data` 来传递给图表实例化配置对象。当组件首次渲染或接收到新的 props 更新时会触发副作用钩子重新绘制图表。为了使该组件正常工作，在父级容器中调用时应提供适当的数据结构作为参数传入。例如: ```json [ {"item": "销售", "A": 87, "B": 56}, {"item": "管理", "A": 34, "B": 90}, ... ] ``` 这种格式允许每个条目代表一类指标，并且可以通过不同键（如 A、B）表示多个样本之间的对比关系。

阅读全文