summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/components/charts/pie/pie.component.ts
blob: 8a5e2100f7df6cd7031bc2b088dfe353e9bf2df1 (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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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 = {
      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: 5,
              avoidLabelOverlap: false,
              label: this.initData.option.series[0].label,
              data:[
                  {value:1, name:'11'}
              ],
              itemStyle: {
                  emphasis: {
                      shadowBlur: 5,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
    }
  }

  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
    })
  }


}