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
80
|
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,
dataZoom: this.initData.option.dataZoom,
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;
}
}
|
