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
| <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
| }
| },
| computed: {
| options() {
| return {
| tooltip: {
| trigger: "item",
| formatter: "{a} <br/>{b}: {c} ({d}%)"
| },
| legend: {
| type:"scroll",
| orient: "vertical",
| // x:'right',
| right:'30px',
| top:'12%',
| textStyle: {
| color: 'rgba(136,136,136,.6)'
| },
| pageTextStyle:{
| color: 'rgba(136,136,136,.6)'
| }
| },
| series: [
| {
| name: this.seriesName,
| type: "pie",
| radius: this.radiusType,
| center: ["40%", "50%"],
| 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)
| }
| },
| mounted() {
| this.myChart = this.$echarts.init(document.getElementById(this.domId))
| this.myChart.setOption(this.options)
| },
| destroyed() {
| this.myChart.dispose()
| },
| };
| </script>
| <style lang="scss">
| #myChartPie{
| width: 100%;
| height: 100%;
| }
| </style>
|
|
