AntV G2 绘制雷达图由于项目使用雷达图比较多，故使用G2 和 DataSet 封装雷达图组件。如果需要展示不同的字

前言介绍：

由于项目使用雷达图比较多，故使用G2 和 DataSet 封装雷达图组件。如果需要展示不同的字段信息，可以通过父子组件传参展示，也可以请求数据时，把数据处理好，但还是建议父子传需要的key去展示。

效果图：

不善于言表，直接上🐎

注意事项：

确保你的项目已经安装了 G2 和 DataSet 依赖。如果没有，你可以通过以下命令来安装：

npm install @antv/g2 @antv/data-set

1. 模板（Template）部分

<template>
  <div class="radar-chart-container">
    <h3 class="chart-title">雷达积分图</h3>
    <div id="integral" class="chart"></div>
  </div>
</template>

这个部分是展示图表的容器。<div id="integral" class="chart"> 是图表渲染的区域，其他部分只是容器和标题。

2. 脚本（Script）部分

这里稍微拆分代入：

1. 数据处理

首先，我们通过DataSet中的DataView类进行数据的预处理。DataView类允许我们对原始数据进行转换，并通过fold类型的转换将数据展开。在此过程中，我们将原始数据中的score字段转换为新的积分字段，并以user作为标识每个数据点的关键字段。这样做不仅确保数据结构的清晰，也为后续的雷达图展示做好了准备。

// 可以添加更多配置信息 ，可以自定义传颜色，需展示的key值等，耐心看完整个代码，应该很容易上手 
 props: {
    data: { // 数据（作为dome 就简单写死）
      type: Array,
      default: () => [
        {"score": 80,"name": "服务器安全","id": "FuWuQiAnQuan"},
        {"score": 60,"name": "数据库安全","id": "ShuJuKuAnQuan"},
        {"score": 50,"name": "网络防护","id": "WangLuoFangHu" },
        {"score": 40, "name": "应用防护","id": "YingYongFangHu"},
        {"score": 70, "name": "数据加密","id": "ShuJuJiaMi"},
        // 其他更多数据
      ]
    },
  },

integralStatistics(data) {
  const { DataView } = DataSet;  // 从 DataSet 中解构出 DataView 类
  const dv = new DataView().source(data);  // 使用 DataView 处理数据源
  dv.transform({
    type: 'fold',  // 转换数据类型为“折叠”
    fields: 'score',  // 要展开的字段是‘score’
    key: 'user',  // 每个数据点的标识符是‘user’
    value: '积分',  // 展开的值字段命名为‘积分’
  });
  return dv;
}

2. 初始化 G2 图表

在数据准备好之后，我们需要使用 G2 创建并渲染一个雷达图。雷达图使用极坐标系来显示多维度数据，因此我们需要在 G2 中配置极坐标系（polar）和雷达图的相关属性

const chart = new G2.Chart({
  container: 'integral', // 指定图表容器的 id
  forceFit: true,  // 自动适应容器大小
  height: 400,  // 设置图表高度
  padding: [0, 0, 0, 0], // 设置内边距为 0
});
 
// 使用转化后的数据来设置图表的数据源
chart.source(dv, {
  积分: {
    min: 0, // 设置积分最小值为 0
  },
});

3. 配置雷达图的坐标轴

雷达图的坐标轴与普通的直角坐标系有所不同。在 G2 中，配置雷达图坐标轴时，需要特别注意如何调整轴的样式，确保标签、网格和刻度线都能够美观地展示。

// 配置 name 轴（即雷达图的分段标识）
chart.axis('name', {
  line: null,  // 不显示轴线
  tickLine: null,  // 不显示刻度线
  label: {
    autoRotate: false,  // 不自动旋转标签
    autoHide: false,  // 不自动隐藏标签
    formatter(text) {
      return text.length > 6 ? `${text.slice(0, 6)}...` : text;  // 标签字符过长时加省略号
    },
    textStyle: {
      fill: '#000',  // 标签文字颜色设置为黑色
    },
  },
  grid: {
    lineStyle: {
      lineDash: null,  // 网格线样式设置为实线
      stroke: '#D5DCE8',  // 设置网格线颜色
    },
    hideFirstLine: false,  // 保留网格第一条线
  },
});

4. 配置数据轴（积分轴）

除了 name 轴外，雷达图的积分轴也是必须配置的内容之一。我们可以通过设置积分轴的网格样式、标签样式等来提高图表的可读性和美观度。

// 配置 积分 轴
chart.axis('积分', {
  line: null,  // 不显示轴线
  tickLine: null,  // 不显示刻度线
  grid: {
    type: 'polygon',  // 网格类型为多边形
    lineStyle: {
      lineDash: null,  // 设置网格线为实线
      stroke: '#D5DCE8',  // 设置网格线颜色
    },
  },
  label: {
    textStyle: {
      fill: 'skyblue',  // 设置刻度字体颜色为天蓝色
    },
  },
});

5. 配置图表的交互和样式

为了增强用户体验，G2 提供了丰富的交互功能。例如，启用鼠标滚轮缩放（zoom）和鼠标拖动平移（drag）功能，允许用户更灵活地浏览图表。

// 启用图表的交互功能
chart.interaction('zoom');  // 启用鼠标滚轮缩放
chart.interaction('drag');  // 启用鼠标拖动平移

同时，配置图例、数据点、线条和区域的样式，使图表更具美感和可读性。

// 配置图例
chart.legend('user', {
  marker: 'circle',  // 图例的标记为圆形
  offset: 30,  // 图例的偏移量
});
 
// 配置线条样式
chart.line().position('name*积分').color('user', ['#9DB7FF']).size(1);  // 设置线条颜色为蓝色，宽度为 1
 
// 配置数据点样式
chart.point().position('name*积分').color('user', ['#9DB7FF']).shape('circle').size(3).style({
  stroke: '#fff',  // 设置边框颜色为白色
  lineWidth: 1,  // 边框宽度为 1
  fillOpacity: 1,  // 填充不透明度为 1
});
 
// 配置区域样式
chart.area().position('name*积分').color('user', ['rgba(40,114,223,0.12)']);  // 设置区域颜色并调整透明度

6. 渲染图表

最后，调用 chart.render() 方法来渲染图表，并确保图表容器中没有任何重复内容。

// 渲染图表
chart.render();
 
// 清空旧的图表内容
const integral = document.getElementById('integral');
if (integral) {
  integral.innerHTML = '';
}

7. 响应式设计与动态调整

为了使图表适应不同的屏幕大小，我们可以在 onResize 方法中处理图表的自适应。当页面尺寸发生变化时，我们需要重新计算并渲染图表。

onResize() {
  this.data && this.integralStatistics(this.data);  // 重新计算和渲染图表
}

3. 样式（Style）部分

<style scoped>
.radar-chart-container {
  width: 100%;
  height: 500px;
  padding: 20px;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.chart-title {
  font-size: 20px;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>

解释：

.radar-chart-container 类用来设置图表容器的样式，包括宽高、背景色、居中对齐等。
.chart-title 用来设置标题的样式。
.chart 是实际的图表区域，设置其宽度和高度为父容器的 100%

整体代码 download.csdn.net/download/zh…

关键点解析：

data属性：
- data 是传递给组件的一个数组，其中每个元素包含了 score（得分）、name（指标名称）和 id（唯一标识符）等数据。
watch监听：
- 监听 data 数组的变化，当数据变化时，会调用 integralStatistics 方法来重新绘制图表。
mounted生命周期钩子：
- 在组件挂载后，integralStatistics 方法会被调用，并且设置了窗口大小变化时重新渲染图表。
integralStatistics方法：
- 这是用于绘制雷达图的核心方法，主要通过 DataSet 转换数据，并使用 G2 绘制雷达图。
onResize方法：
- 用于监听浏览器窗口的大小变化，并且根据新的窗口大小重新调整图表的大小。
响应式布局：

使用 CSS Flexbox 布局，使得雷达图和标题居中对齐，并且图表大小随容器变化而调整。

这样，雷达图组件不仅能够响应外部数据的更新，还能在窗口尺寸变化时自动适应调整。