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

单一柱状图
IMPORT MODULE

单一柱状图更适合在列表中展示简单的区间数据,简洁的表现方式可以很好的减少大数据量的视觉展现压力。

代码演示

序号服务调用次数数据有负值
1
2
3
4
5
基础

基础用法。

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

@Component({
  selector: 'chart-single-bar-basic',
  template: `
    <button nz-button (click)="refresh()" nzType="primary">Refresh</button>
    <nz-table [nzData]="list" [nzShowPagination]="false">
      <thead>
        <tr>
          <th>序号</th>
          <th nzWidth="350px">服务调用次数</th>
          <th nzWidth="350px">数据有负值</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let i of list; let idx = index">
          <td>{{ idx + 1 }}</td>
          <td>
            <g2-single-bar height="24" [value]="i.value"></g2-single-bar>
          </td>
          <td>
            <g2-single-bar height="60" [value]="i.other" min="-100" line></g2-single-bar>
          </td>
        </tr>
      </tbody>
    </nz-table>
  `,
  styles: [
    `
      :host ::ng-deep .ant-table tbody > tr > td {
        padding: 0;
      }
    `,
  ],
  encapsulation: ViewEncapsulation.Emulated,
})
export class ChartSingleBarBasicComponent {
  list: Array<{ id: number; value: number; other: number }> = new Array(5).fill({}).map(() => ({
    id: Math.floor(Math.random() * 10000),
    value: Math.floor(Math.random() * 100),
    other: Math.floor(Math.random() * 100) > 50 ? Math.floor(Math.random() * 100) : -Math.floor(Math.random() * 100),
  }));

  refresh(): void {
    this.list.forEach(v => {
      v.value = Math.floor(Math.random() * 100);
      v.other = Math.floor(Math.random() * 100) > 50 ? Math.floor(Math.random() * 100) : -Math.floor(Math.random() * 100);
    });
  }
}

API

g2-single-bar

参数说明类型默认值
[repaint]数据再次变更时是否重绘booleantrue
[delay]延迟渲染,单位:毫秒number0
[plusColor]图表颜色string#40a9ff
[minusColor]负值图表颜色string#ff4d4f
[height]图表高度number60
[barSize]柱状高度number30
[min]最小值number0
[max]最大值,若小于0表示显示负值number100
[padding]图表内部间距any0
[value]number0
[format]显示值格式(value: number) => string-
[textStyle]显示值样式any{ fontSize: 12, color: '#595959' }
[theme]定制图表主题string | LooseObject-
(ready)当G2完成初始化后调用EventEmitter<Chart>-