import { Component, Input, AfterViewInit } from '@angular/core';
// 引入Angular的DOM操作装饰器ViewChiild
import { ViewChild, ElementRef } from '@angular/core';
// 引入echarts第三方库
import * as echarts from "echarts"

@Component({
  selector: 'app-echars',
  templateUrl: './echars.component.html',
  styleUrls: ['./echars.component.scss']
})

export class EcharsComponent implements AfterViewInit {
  // 编写Echart图表的配置项与数据 
  @Input() options: any = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }
    ]
  };
  // 通过ViewChild获取页面中#chartDiv标记的DOM元素
  @ViewChild("chartDiv", { static: false }) chartDiv!: ElementRef;

  constructor() {

  }

  // 生命周期:视图DOM加载完成后再执行创建图表操作
  ngAfterViewInit(): void {
    this.createEcharts();
  }
  async createEcharts() {
    // 从ViewChild元素中获取dom节点
    let chartDom = this.chartDiv.nativeElement;
    // 向指定节点渲染初始化echarts
    let myChart = echarts.init(chartDom);
    // 当配置项存在时
    // 根据配置渲染图表内容
    this.options && myChart.setOption(this.options);
  }
}