import {Component, AfterViewInit} from '@angular/core';
import * as echarts from "echarts"

@Component({
  selector: 'app-page-echarts-start',
  templateUrl: './page-echarts-start.component.html',
  styleUrls: ['./page-echarts-start.component.scss']
})
export class PageEchartsStartComponent implements AfterViewInit {

  ngAfterViewInit(): void {

    this.createEcharts();
  }

  async createEcharts() {
    let chartDom = document.getElementById('chart');
    let myChart = echarts.init(chartDom);
    let option;

    option = {
      title: {
        text: 'ECharts Getting Started Example'
      },
      tooltip: {},
      legend: {
        data: ['sales']
      },
      xAxis: {
        data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
      },
      yAxis: {},
      series: [
        {
          name: 'sales',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };

    option && myChart.setOption(option);

  }
}