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

饼状图
IMPORT MODULE

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

Examples

销售额

¥ 12177.00
Basic

基础用法。默认情况下丝滑更新数据的判断标准是以只更新 data 为准,这里利用 repaint 进行手动调用 changeData 改变数据达到丝滑更新的效果。

expand codeexpand code
import { Component, ViewChild } from '@angular/core';
import { G2PieClickItem, G2PieComponent, G2PieData } from '@delon/chart/pie';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'chart-pie-basic',
  template: `
    <button nz-button (click)="refresh()" nzType="primary">Refresh</button>
    <g2-pie
      #pie
      [hasLegend]="true"
      title="销售额"
      subTitle="销售额"
      [total]="total"
      [valueFormat]="format"
      [data]="salesPieData"
      height="294"
      repaint="false"
      (clickItem)="handleClick($event)"
    ></g2-pie>
  `,
})
export class ChartPieBasicComponent {
  @ViewChild('pie', { static: false }) readonly pie!: G2PieComponent;
  salesPieData: G2PieData[] = [];
  total = '';

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

  refresh(): void {
    const rv = (min: number = 0, max: number = 5000) => Math.floor(Math.random() * (max - min + 1) + min);
    this.salesPieData = [
      {
        x: '家用电器',
        y: rv(),
      },
      {
        x: '食用酒水',
        y: rv(),
      },
      {
        x: '个护健康',
        y: rv(),
      },
      {
        x: '服饰箱包',
        y: rv(),
      },
      {
        x: '母婴产品',
        y: rv(),
      },
    ];
    if (Math.random() > 0.5) {
      this.salesPieData.push({
        x: '其他',
        y: rv(),
      });
    }
    this.total = `&yen ${this.salesPieData.reduce((pre, now) => now.y + pre, 0).toFixed(2)}`;
    if (this.pie) {
      // 等待组件渲染
      setTimeout(() => this.pie.changeData());
    }
  }

  format(val: number): string {
    return `&yen ${val.toFixed(2)}`;
  }

  handleClick(data: G2PieClickItem): void {
    this.msg.info(`${data.item.x} - ${data.item.y}`);
  }
}

中式快餐

28%
Mini

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

expand codeexpand code
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

参数说明类型默认值
[repaint]数据再次变更时是否重绘booleantrue
[delay]延迟渲染,单位:毫秒number0
[animate]是否显示动画booleantrue
[color]图表颜色stringrgba(24, 144, 255, 0.85)
[height]图表高度number-
[hasLegend]是否显示 legendbooleanfalse
[padding]图表内部间距number[][12, 0, 12, 0]
[percent]占比number-
[lineWidth]边框粗细number0
[inner]内部极坐标系的半径number0.75
[blockMaxWidth]多少宽度为块显示number380
[tooltip]是否显示 tooltipbooleantrue
[subTitle]图表子标题string,TemplateRef<void>-
[total]总量string,number,TemplateRef<void>-
[valueFormat]y轴格式化(y: number) => string-
[data]数据G2PieData[]-
[colors]颜色列表string[]-
[interaction]交互类型,none 无 element-active 图形元素,active-region 图表组件,brush 框选,drag-move 移动InteractionTypenone
[ratio]百分比配置项G2PieRatio{ text: '占比', inverse: '反比', color: '', inverseColor: '#F0F2F5' }
[theme]定制图表主题string | LooseObject-
(clickItem)点击项回调EventEmitter<G2PieClickItem>-
(ready)当G2完成初始化后调用EventEmitter<Chart>-

G2PieData

参数说明类型默认值
[x]x轴any-
[y]y轴number-