---
title: "雷达图(带网格)"
language: "zh"
canonical: "https://g2.antv.antgroup.com/zh/examples/general/radar/grid-radial/"
version: "5.4.8"
---

# 雷达图(带网格)

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

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

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

## 源码

```ts
import { Chart } from '@antv/g2';

const data = [
  { item: 'Design', type: 'a', score: 70 },
  { item: 'Design', type: 'b', score: 30 },
  { item: 'Development', type: 'a', score: 60 },
  { item: 'Development', type: 'b', score: 70 },
  { item: 'Marketing', type: 'a', score: 50 },
  { item: 'Marketing', type: 'b', score: 60 },
  { item: 'Users', type: 'a', score: 40 },
  { item: 'Users', type: 'b', score: 50 },
  { item: 'Test', type: 'a', score: 60 },
  { item: 'Test', type: 'b', score: 70 },
  { item: 'Language', type: 'a', score: 70 },
  { item: 'Language', type: 'b', score: 50 },
  { item: 'Technology', type: 'a', score: 50 },
  { item: 'Technology', type: 'b', score: 40 },
  { item: 'Support', type: 'a', score: 30 },
  { item: 'Support', type: 'b', score: 40 },
  { item: 'Sales', type: 'a', score: 60 },
  { item: 'Sales', type: 'b', score: 40 },
  { item: 'UX', type: 'a', score: 50 },
  { item: 'UX', type: 'b', score: 60 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.options({
  type: 'view',
  coordinate: { type: 'polar' },
  data: data,
  scale: { x: { padding: 0.5, align: 0 }, y: { tickCount: 5, domainMax: 80 } },
  axis: {
    x: {
      grid: true,
      gridLineWidth: 1,
      tick: false,
      gridLineDash: [0, 0],
    },
    y: {
      zIndex: 1,
      title: false,
      gridConnect: 'line',
      gridLineWidth: 1,
      gridLineDash: [0, 0],
    },
  },
  interaction: { tooltip: { crosshairsLineDash: [4, 4] } },
  children: [
    {
      type: 'area',
      encode: { x: 'item', y: 'score', color: 'type' },
      style: { fillOpacity: 0.5 },
    },
    {
      type: 'line',
      encode: { x: 'item', y: 'score', color: 'type' },
      style: { lineWidth: 2 },
    },
    {
      type: 'point',
      encode: { x: 'item', y: 'score', color: 'type', shape: 'point', size: 3 },
      tooltip: null,
    },
  ],
});

chart.render();
```