summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/components/charts/line/line.component.ts
blob: 8bc8ebd8c4a948380c4adb4cd4c9db3225bc9506 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
import { Component, OnInit, Input } from '@angular/core';
import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';

@Component({
  selector: 'app-line',
  templateUrl: './line.component.html',
  styleUrls: ['./line.component.less']
})
export class LineComponent implements OnInit {
  // 图形数据
  @Input() chartData;
  // 初始化数据
  @Input() initData;

  constructor() { }

  ngOnInit() {
    this.initOpts = {
      renderer: 'canvas',
      height: this.initData.height,
      width: this.initData.width
    };
    this.lineOption ={
      tooltip : this.initData.option.tooltip,
      icon:'circle',
      legend: this.initData.option.legend,
      grid: {
          left: '1%',
          right: '3%',
          top: '10%',
          bottom: '10%',
          containLabel: true
      },
      xAxis: {
        axisTick: {
          show: false,
        },
        axisLine:{
          show: false
        },
          data: ['01','02','04','06','08','10','12','14','16','18','20','22','24']
      },
      yAxis: {
        axisTick: {
          show: false,
        },
        axisLine:{
          show: false
        }
      },
      series : this.initData.option.series
    }
  }

  ngOnChanges(changes:SimpleChanges){

    // 当有实例的时候再执行,相当于第一次不执行下面方法
    if(this.chartIntance){
      this.chartDataChange()
    }
  }
  // 初始化图形高度
  initOpts:any;
  // 折线图配置
  lineOption:any;
  // 实例对象
  chartIntance:any;
  // 数据变化
  updateOption:any;
  chartDataChange(){
    this.updateOption = this.chartData;
  }
  chartInit(chart){
    this.chartIntance = chart;
  }



}