import { Component, OnInit } from '@angular/core';
import { CommomService } from 'src/app/core/services/commom.service';
import { ElementRef, ViewChild } from "@angular/core";


@Component({
  selector: 'app-sub-line-chart-new',
  templateUrl: './sub-line-chart-new.component.html',
  styleUrls: ['./sub-line-chart-new.component.scss']
})
export class SubLineChartNewComponent implements OnInit {

  constructor(
    private commonService: CommomService,
    private elementRef: ElementRef
  ) { }

  bcacChartTitle: string;

  yAxisName: string;

  yAxisNameGap: number = 0;

  tooltipUnit: string = '';
  data: any;


  ngOnInit() {

    this.bcacChartTitle = "表格标题";
    this.yAxisName = "noise level(dB)";
    this.yAxisNameGap = 30;
    this.tooltipUnit = "dB"
    // this.initEchart(this.commonService.changeFontSize());
    this.initEchart();
  }

  // 构建图
  initEchart() {
    let simulateData = this.makeData();
    // style.interval.right = "30";

    let params = {
      // customGrid: style.interval,
    
      xAxisDatas: simulateData.xAxisDatas,
      
      seriesNames: simulateData.seriesNames,
      datas: simulateData.datas,
      markLine: simulateData.markLine,
      markArea: simulateData.markArea
    };
    this.data = params;
  }

  makeData() {
    let data = {
      xAxisDatas: ["10-01", "10-02", "10-03", "10-04", "10-05", "10-06", "10-07"],
      // yNameGap: 30,
      seriesNames: ["会展中心站", "匡达制药厂", "造纸七厂", "兴谷开发区"],
      datas: [
        [58.1, 60.4, 64.2, 50.8, 51.8, 64.5, 57.4],
        [57.1, 58.4, 63.4, 51.8, 51.5, 62.5, 62.1],
        [59.5, 60.4, 57.5, 50.0, 54.2, 57.2, 51.4],
        [60.5, 61.4, 58.5, 51.0, 55.2, 58.2, 60.5]
      ],
      markLine: [
        [{ name: '最大值', type: 'max' }, { name: '最小值', type: 'min' }], false, [{ name: '平均值', type: 'average' }]
      ],
      markArea: [
        [
          [{
            name: '开始高峰',
            xAxis: '10-01'
          }, {
            xAxis: '10-03'
          }], [{
            name: '结束高峰',
            xAxis: '10-05'
          }, {
            xAxis: '10-06'
          }],
        ],
        [
          [{
            name: '开始高峰',
            xAxis: '10-03'
          }, {
            xAxis: '10-04'
          }], [{
            name: '结束高峰',
            xAxis: '10-06'
          }, {
            xAxis: '10-07'
          }],
        ]
      ]
    };
    return data;
  }

}