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

g2-pie 饼状图

用于显示跟速度相关图形再适合不过。

import { G2PieModule } from '@delon/chart/pie';

代码演示

基础

基础用法。

import { Component, OnInit } from '@angular/core';
import { G2PieClickItem, G2PieData } from '@delon/chart/pie';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'chart-pie-basic',
  template: ` <g2-pie
    [hasLegend]="true"
    title="销售额"
    subTitle="销售额"
    [total]="total"
    [valueFormat]="format"
    [data]="salesPieData"
    height="294"
    (clickItem)="handleClick($event)"
  ></g2-pie>`,
})
export class ChartPieBasicComponent implements OnInit {
  salesPieData: G2PieData[] = [
    {
      x: '家用电器',
      y: 4544,
    },
    {
      x: '食用酒水',
      y: 3321,
    },
    {
      x: '个护健康',
      y: 3113,
    },
    {
      x: '服饰箱包',
      y: 2341,
    },
    {
      x: '母婴产品',
      y: 1231,
    },
    {
      x: '其他',
      y: 1231,
    },
  ];
  total: string;
  constructor(private msg: NzMessageService) {}
  ngOnInit(): void {
    this.total = `&yen ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
  }
  format(val: number) {
    return `&yen ${val.toFixed(2)}`;
  }
  handleClick(data: G2PieClickItem): void {
    this.msg.info(`${data.item.x} - ${data.item.y}`);
  }
}

迷你型

通过简化 pie 属性的设置，可以快速的实现极简的饼状图，可配合 chart-card 组合展现更多业务场景。

import { Component } from '@angular/core';
@Component({
  selector: 'chart-pie-mini',
  template: `
    <div style="width: 200px; display: inline-block">
      <g2-pie percent="28" subTitle="中式快餐" total="28%" height="130"></g2-pie>
    </div>
  `,
})
export class ChartPieMiniComponent {}

API

g2-pie

G2PieData