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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import { Component, OnInit, Input } from '@angular/core';
import { SimpleChanges } from '@angular/core/src/metadata/lifecycle_hooks';
@Component({
selector: 'app-pie',
templateUrl: './pie.component.html',
styleUrls: ['./pie.component.less']
})
export class PieComponent implements OnInit {
// 图形数据
@Input() chartData;
// 初始化数据
@Input() initData;
constructor() { }
ngOnInit() {
this.initOpts = {
renderer: 'canvas',
height: this.initData.height
};
this.pieOption = {
backgroundColor:this.initData.option.backgroundColor,
legend: this.initData.option.legend,
color:this.initData.option.color,
series : [
{
name: this.initData.option.series[0].name,
type: 'pie',
radius : this.initData.option.series[0].radius,
center: ['50%', '45%'],
legendHoverLink: false,
hoverOffset: 3,
avoidLabelOverlap: false,
label: this.initData.option.series[0].label,
data:[
{value:1, name:'11'}
],
itemStyle: this.initData.option.series[0].itemStyle
}
]
}
}
ngOnChanges(changes:SimpleChanges){
// 当有实例的时候再执行，相当于第一次不执行下面方法
if(this.chartIntance){
this.chartDataChange()
}
}
// 初始化图形高度
initOpts:any;
// alarm饼图
pieOption:any;
// 实例对象
chartIntance:any;
// 数据变化
updateOption:any;
chartDataChange(){
this.updateOption = this.chartData;
// 要等到updateOption渲染完再执行
this.chartIntance.on('finished',()=>{
this.chartIntance.dispatchAction({
type:'highlight',
seriesIndex: 0,
dataIndex:0
})
// 由于所有视图变化渲染都会执行，更新完注销此事件
this.chartIntance.off('finished')
})
}
chartInit(chart){
this.chartIntance = chart;
}
pieMouseOver(e){
this.chartIntance.dispatchAction({
type:'downplay'
})
this.chartIntance.dispatchAction({
type:'highlight',
seriesIndex: 0,
dataIndex:e.dataIndex
})
}
pieMouseOut(e){
this.chartIntance.dispatchAction({
type:'highlight',
seriesIndex: 0,
dataIndex:e.dataIndex
})
}
}
|
