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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
| <template>
| <div :id="domId"></div>
| </template>
| <script>
| export default {
| name: "pie",
| props: {
| seriesName:{
| type:String,
| default:'预警事件'
| },
| radiusType:{
| type:[String,Array],
| default:()=>{
| return "50%"
| }
| },
| seriesData:{
| type:Array,
| default:()=>{
| return []
| }
| },
| domId:{
| type:String,
| default:"myChartPie"
| }
| },
| watch: {
| seriesData:{
| handler:function(val,oldVal){
| this.init()
| // if(val !== oldVal){
| // this.init()
| // }
| },
| deep:true
| },
| "TreeDataPool.showTreeBox":{
| handler:function(val,oldVal){
| if(val !== oldVal){
| this.handleResize()
| }
| }
| }
| },
| computed: {
| options() {
| return {
| tooltip: {
| trigger: "item",
| formatter: "{a} <br/>{b}: {c} ({d}%)"
| },
| legend: {
| //show: false,
| type:"scroll",
| orient: "horizontal",
| left: '10px',
| right: '10px',
| top: '35px',
| align: 'auto',
| textStyle: {
| color: 'rgba(136,136,136,.6)'
| },
| pageTextStyle:{
| color: 'rgba(136,136,136,.6)'
| }
| },
| series: [
| {
| name: this.seriesName,
| fontSize: 14,
| type: "pie",
| radius: this.radiusType,
| top: 40,
| height: "90%",
| // labelLine: {
| // length: 15
| // },
| //center: ["50%", "95%"],
| avoidLabelOverlap: false,
| itemStyle: {
| emphasis: {
| shadowBlur: 10,
| shadowOffsetX: 0,
| shadowColor: 'rgba(0, 0, 0, 0.5)'
| },
| color: (parrams)=>{
| let colorList = [
| '#9C05FC','#0B8CFC', '#43F0EB', '#FACB62', '#FF0000', '#FE8463'
| ]
| return colorList[parrams.dataIndex]
| }
| },
| labelLine: {
| normal: {
| show: true
| }
| },
| minShowLabelAngle:20,
| data: this.seriesData
| }
| ]
| };
| }
| },
| data() {
| return {
| myChart:Object
| };
| },
| methods: {
| init(){
| this.myChart.setOption(this.options)
| },
| handleResize(){
| this.myChart.resize()
| }
| },
| mounted() {
| this.myChart = this.$echarts.init(document.getElementById(this.domId));
| this.myChart.setOption(this.options);
| this.myChart.resize();
| },
| destroyed() {
| this.myChart.dispose()
| },
| };
| </script>
| <style lang="scss">
| #myChartPie{
| width: 100%;
| height: 100%;
| }
| </style>
|
|
