import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  chartTitle: string;

  loading: boolean = false;

  tooltipUnit: string = '辆';

  position: string;
  data;
  ngOnInit() {

    this.initChart();
  }


  initChart() {
    this.chartTitle = "各功能区车流量";

    this.position = 'right';

    this.data = {
      seriesName: ['大型车', '大型车', '中小型车', '中小型车',],
      stack: ['昼间', '夜间', '昼间', '夜间'],
      xData: ['0类', '1类', '2类', '3类', '4a类', '4b类'],
      yData: [[0, 12, 240, 404, 580, 640], [12, 20, 210, 774, 864, 856], [200, 564, 300, 646, 560, 604], [365, 416, 445, 506, 564, 654]],
      tooltipFormatter: (params) => {
        let another;
        if (params.seriesIndex % 2 == 0) {
          another = this.data.yData[2 - params.seriesIndex][params.dataIndex]
        } else {
          another = this.data.yData[4 - params.seriesIndex][params.dataIndex]
        }
        let total = params.value + another;
        let str = '';

        str += params.name + '-' + this.data.stack[params.seriesIndex] + '<br>';
        str += '<span style="color:' + params.color + '">' + params.seriesName + '：</span> <b>' + params.value + this.tooltipUnit + '</b><br/>'
        str += '<span style="color:' + params.color + '"> 总量: </span> <b>' + total + this.tooltipUnit + '</b><br/>'
        return str;
      }
    }

  }
}