bbq/src/app/routes/datatable/components/busitable/busiindex/curve/curve.component.ts

import { Component, ElementRef, Input, NgZone, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core';
import { Chart } from '@antv/g2';
import { DataService } from 'src/app/routes/datatable/services/data.service';
@Component({
  selector: 'app-busitable-curve',
  templateUrl: './curve.component.html',
  styleUrls: ['./curve.component.less']
})
export class BusitableCurveComponent implements OnInit, OnChanges {
  el: any;
  @Input() chartData: any;
  chart: any;
  constructor(private service: DataService, private ngZone: NgZone) {

  }
  ngOnChanges(changes: SimpleChanges): void {
    if (this.chartData) {
      setTimeout(()=>{
        this.chart.render(true)
      }, 1000)

    }
  }

  ngOnInit(): void {

  }
  reRender() {
      this.chart.data(this.chartData);
      this.chart.render();
  }
  render(el: ElementRef<HTMLDivElement>): void {
    this.el = el.nativeElement
    setTimeout(() => {
      this.ngZone.runOutsideAngular(() => this.init(this.el));
      }, 500)
  }

  private init(el: HTMLElement): void {
    this.chart = new Chart({
      container: el,
      autoFit: true,
      height: 500,
    });

    this.chart.data(this.chartData);
    this.chart.scale({
      year: {
        range: [0, 1],
      },
      number: {
        min: -9999,
        nice: true,
      },
    });
    const itemTpl = `
        <div style="padding: 15px; color: red">
            环比:&nbsp;&nbsp;{value}%
        </div>
`
    this.chart.tooltip({
      showCrosshairs: true, // 展示 Tooltip 辅助线
      shared: true,
      itemTpl: itemTpl
  });
    this.chart.line().position('time*number').label('number');
    this.chart.point().position('time*number');

    this.chart.render();
  }

}