echars两个饼图重叠

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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
var colorArray = [
        'rgba(3,189,69,1)',
        'rgba(18,186,117,1)',
        'rgba(3,189,69,1)',
        'rgba(63,255,218,1)',
        'rgba(26,253,104,1)',
      ]
      var text = '处置率'
      var data = {
        value: 100,
        case_sb: 300,
      }

      var value = data.value
      var nums = 0
      if (parseInt(data.case_sb) != 0) {
        nums = ((data.value / data.case_sb) * 100).toFixed(1)
      }
      let option = {
        //把title写成数组就可以有多个title
        title: [
          {
            // text: nums + '%',
            text: '减排',
            left: '50%',
            top: '60%', //top待调整
            textStyle: {
              color: '#000',
              fontSize: 12,
              fontFamily: '微软雅黑',
            },
          },
          {
            text: '气象',
            left: '50%',
            top: '80%', //top待调整
            textStyle: {
              color: '#000',
              fontSize: 12,
              fontFamily: '微软雅黑',
            },
          },
          {
            text: 'COMmn',
            left: '45%',
            top: '10%', //top待调整
            textStyle: {
              color: '#000',
              fontSize: 12,
              fontFamily: '微软雅黑',
            },
          },
        ],
        xAxis: {
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',//设置内饼图的直径
            label: {
              show: false,
            },
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },

          //最外层圈
          {
            type: 'pie',
            radius: ['0%', '100%'],//设置外饼图的直径
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center',
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontWeight: 'bold',
                },
              },
            },
            itemStyle: {
              normal: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [//设置外饼图颜色
                    {
                      offset: 0.05,
                      color: 'rgba(101, 203, 236, 0.2)',
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(101, 203, 236,0.3)',
                    },
                    {
                      offset: 0.95,
                      color: 'rgba(101, 203, 236, 0.2)',
                    },
                  ],
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 32350, //3235
              },
            ],
          },
        ],
      }