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

g2-mini-area 迷你区域图

面积图又叫区域图。 它是在折线图的基础之上形成的, 它将折线图中折线与自变量坐标轴之间的区域使用颜色或者纹理填充，这样一个填充区域我们叫做面积，颜色的填充可以更好的突出趋势信息。

import { G2MiniAreaModule } from '@delon/chart/mini-area';

代码演示

基础

基础用法。

import { Component, OnInit } from '@angular/core';
import { G2MiniAreaClickItem, G2MiniAreaData } from '@delon/chart/mini-area';
import format from 'date-fns/format';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
  selector: 'chart-mini-area-basic',
  template: ` <g2-mini-area line color="#cceafe" height="45" [data]="visitData" (clickItem)="handleClick($event)"></g2-mini-area> `,
})
export class ChartMiniAreaBasicComponent implements OnInit {
  visitData: G2MiniAreaData[] = [];
  constructor(private msg: NzMessageService) {}
  ngOnInit(): void {
    const beginDay = new Date().getTime();
    for (let i = 0; i < 20; i += 1) {
      this.visitData.push({
        x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
        y: Math.floor(Math.random() * 100) + 10,
      });
    }
  }
  handleClick(data: G2MiniAreaClickItem): void {
    this.msg.info(`${data.item.x} - ${data.item.y}`);
  }
}

Mini tooltip

指定 tooltipType 值来表示简化tooltip，可以更好的运用于表格。

import { Component, OnInit } from '@angular/core';
import { G2MiniAreaData } from '@delon/chart/mini-area';
import format from 'date-fns/format';
@Component({
  selector: 'chart-mini-area-mini',
  template: ` <g2-mini-area line color="#cceafe" height="45" [data]="visitData" tooltipType="mini"></g2-mini-area> `,
})
export class ChartMiniAreaMiniComponent implements OnInit {
  visitData: G2MiniAreaData[] = [];
  ngOnInit(): void {
    const beginDay = new Date().getTime();
    for (let i = 0; i < 20; i += 1) {
      this.visitData.push({
        x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
        y: Math.floor(Math.random() * 100) + 10,
      });
    }
  }
}

Tooltip

指定 yTooltipSuffix 值来表示单位。

import { Component, OnInit } from '@angular/core';
import { G2MiniAreaData } from '@delon/chart/mini-area';
import format from 'date-fns/format';
@Component({
  selector: 'chart-mini-area-tooltip',
  template: ` <g2-mini-area line color="#cceafe" height="45" [data]="visitData" yTooltipSuffix="%"></g2-mini-area> `,
})
export class ChartMiniAreaTooltipComponent implements OnInit {
  visitData: G2MiniAreaData[] = [];
  ngOnInit(): void {
    const beginDay = new Date().getTime();
    for (let i = 0; i < 20; i += 1) {
      this.visitData.push({
        x: format(new Date(beginDay + 1000 * 60 * 60 * 24 * i), 'yyyy-MM-dd'),
        y: Math.floor(Math.random() * 100) + 10,
      });
    }
  }
}

API

g2-mini-area

G2MiniAreaData