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

柱状图
IMPORT MODULE

使用垂直的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度,另一个轴代表相应的数值。

代码演示

销售额趋势

基本

通过设置 xy 属性,可以快速的构建出一个漂亮的柱状图,各种纬度的关系则是通过自定义的数据展现。

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

import { G2BarClickItem, G2BarData, G2BarModule } from '@yelon/chart/bar';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'chart-bar-basic',
  template: `
    <button nz-button (click)="refresh()" nzType="primary">Refresh</button>
    <g2-bar height="200" [title]="'销售额趋势'" [data]="salesData" (clickItem)="handleClick($event)" />
  `,
  standalone: true,
  imports: [NzButtonModule, G2BarModule]
})
export class ChartBarBasicComponent {
  private readonly msg = inject(NzMessageService);

  salesData = this.genData();

  private genData(): G2BarData[] {
    return new Array(12).fill({}).map((_i, idx) => ({
      x: `${idx + 1}月`,
      y: Math.floor(Math.random() * 1000) + 200,
      color: idx > 5 ? '#f50' : undefined
    }));
  }

  refresh(): void {
    this.salesData = this.genData();
  }

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

API

g2-bar

参数说明类型默认值
[repaint]数据再次变更时是否重绘booleantrue
[delay]延迟渲染,单位:毫秒number0
[title]图表标题string,TemplateRef<void>-
[color]图表颜色stringrgba(24, 144, 255, 0.85)
[padding]图表内部间距Array<number | string> | string[32, 0, 32, 40]
[height]图表高度number-
[data]数据G2BarData[][]
[autoLabel]在宽度不足时,自动隐藏 x 轴的 labelbooleantrue
[interaction]交互类型,none 无 element-active 图形元素,active-region 图表组件,brush 框选,drag-move 移动InteractionTypenone
[theme]定制图表主题string | LooseObject-
(clickItem)点击项回调EventEmitter<G2BarClickItem>-
(ready)当G2完成初始化后调用EventEmitter<Chart>-

G2BarData

参数说明类型默认值
[x]x轴any-
[y]y轴any-
[color]轴颜色string-
Loading...