---
title: "方形雷达图"
language: "zh"
canonical: "https://g2.antv.antgroup.com/zh/examples/general/radar/square-radar/"
version: "5.4.8"
---

# 方形雷达图

[运行示例](https://g2.antv.antgroup.com/zh/examples/general/radar/square-radar/)

[资料索引](/llms.txt)

页面需要一个 `id="container"` 的 DOM 元素。以下为原始示例源码。

## 源码

```ts
import { Chart } from '@antv/g2';
const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'line',
  coordinate: {
    type: 'polar',
    startAngle: (-Math.PI * 3) / 4,
    endAngle: (Math.PI * 5) / 4,
  },
  data: [
    { item: 'Design', type: 'a', score: 70 },
    { item: 'Development', type: 'a', score: 60 },
    { item: 'Marketing', type: 'a', score: 50 },
    { item: 'Users', type: 'a', score: 40 },
  ],
  encode: { x: 'item', y: 'score' },
  scale: {
    x: {
      padding: 0.5,
      align: 0,
    },
    y: {
      domainMin: 0,
      domainMax: 80,
    },
  },
  style: {
    zIndex: 0,
    lineWidth: 5,
    lineJoin: 'round',
  },
  axis: {
    x: {
      grid: true,
      zIndex: 1,
      title: false,
      gridLineWidth: 1,
      gridLineDash: null,
    },
    y: {
      titleOpacity: '0',
      gridConnect: 'line',
      gridLineWidth: 1,
      gridLineDash: [0, 0],
      gridAreaFill: 'rgba(0, 0, 0, 0.04)',
    },
  },
});

chart.render();
```