This article has not been translated, hope that your can PR to translated it. Help us!

雷达图
IMPORT MODULE

雷达图是以相同点开始的轴上表示的三个或更多个定量变量的二维图形的形式显示多变量数据的图形方法。轴的相对位置和角度通常是不知情的。

代码演示

基础

基础用法。

expand code expand code
import { Component } from '@angular/core';

import { G2RadarClickItem, G2RadarData, G2RadarModule } from '@yelon/chart/radar';
import { NzButtonModule } from 'ng-zorro-antd/button';
import type { NzSafeAny } from 'ng-zorro-antd/core/types';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'chart-radar-basic',
  template: `
    <button nz-button (click)="refresh()" nzType="primary">Refresh</button>
    <g2-radar [hasLegend]="true" [data]="radarData" height="286" (clickItem)="handleClick($event)" />
  `,
  standalone: true,
  imports: [NzButtonModule, G2RadarModule]
})
export class ChartRadarBasicComponent {
  radarData: G2RadarData[] = [];

  constructor(private msg: NzMessageService) {
    this.refresh();
  }

  refresh(): void {
    const rv = (min: number = 1, max: number = 10): number => Math.floor(Math.random() * (max - min + 1) + min);
    const radarOriginData = ['个人', '团队', '部门'].map(name => ({
      name,
      ref: rv(),
      koubei: rv(),
      output: rv(),
      contribute: rv(),
      hot: rv()
    }));
    const radarTitleMap: { [key: string]: string } = {
      ref: '引用',
      koubei: '口碑',
      output: '产量',
      contribute: '贡献',
      hot: '热度'
    };
    if (Math.random() > 0.5) {
      delete radarTitleMap.hot;
    }
    const res: G2RadarData[] = [];
    radarOriginData.forEach((item: { [key: string]: NzSafeAny }) => {
      Object.keys(item).forEach(key => {
        if (key !== 'name') {
          res.push({
            name: item.name,
            label: radarTitleMap[key],
            value: item[key]
          });
        }
      });
    });
    this.radarData = res;
  }

  handleClick(data: G2RadarClickItem): void {
    this.msg.info(`${data.item.label} - ${data.item.name} - ${data.item.value}`);
  }
}

API

g2-radar

参数说明类型默认值
[repaint]数据再次变更时是否重绘booleantrue
[delay]延迟渲染,单位:毫秒number0
[title]图表标题string,TemplateRef<void>-
[height]图表高度number-
[hasLegend]是否显示 legendbooleanfalse
[padding]图表内部间距array[24, 30, 16, 30]
[colors]颜色列表string[]-
[data]数据G2RadarData[]-
[theme]定制图表主题string | LooseObject-
(clickItem)点击项回调EventEmitter<G2RadarClickItem>-
(ready)当G2完成初始化后调用EventEmitter<Chart>-

G2RadarData

参数说明类型默认值
[name]名称string-
[label]标签string-
[value]number-
Loading...