echarts實現帶光圈的環形圖

實現效果：

實現原理：圖層的疊加

（1）多個環形圖的疊加

（2）環形圖和油表圖的嵌套

代碼：

        let _that = this
        myChart = _that.$echarts.init(document.getElementById(this.pieId))
        let data = [{value: 10, name: '香蕉'}, 
                    {value: 20, name: '西紅柿'}, 
                    {value: 30, name: '牛奶'}]
        let subData = [{value: 30, name: '果汁'}, 
                       {value: 50, name: '奶昔'}, 
                       {value: 80, name: '沙冰'}]
        let legendData = data
        myChart.setOption(
          {
            color: ['#ed0a46', '#ff8800', '#ffe05a'],
            title: {
              text: '',
              subtext: '',
              textStyle: {
                color: '#f2f2f2',
                fontSize: 12,
                align: 'center'
              },
              subtextStyle: {
                fontSize: 14,
                color: ['#fff'],
                align: 'center'
              },
              x: '76%',
              y: 'center',
              textAlign: 'center'
            },
            grid: {
              top: 10,
              bottom: 10,
              left: 100,
              right: '10%'
            },
            legend: {
              orient: 'vertical',
              top: 'middle',
              x: 'left',
              right: '10%',
              selectedMode: false,
              icon: 'roundRect',
              data: legendData,
              backgroundColor: 'rgba(0,182,255,0.10)',
              borderWidth: 1,
              borderRadius: 2,
              borderColor: '#00567D',
              formatter: function (name) { // 用來格式化圖例文本，支持字符串模板和回調函數兩種形式。模板變量爲圖例名稱 {name}
                var arr = []
                var index = 0
                var total = 0
                for (var i = 0; i < legendData.length; i++) {
                  total += legendData[i].value
                  if (legendData[i].name == name) {
                    index = i
                  }
                }
                arr.push('{name|' + name + '}',
                    '{precent|' + (((legendData[index].value == 0 ? 100 : legendData[index].value) / (total == 0 ? 100 : total)) * 100).toFixed(1) + '%}',
                    '{value|' + legendData[index].value + '}')
                return arr.join('')
              },
              textStyle: {
                color: '#FFFFFF',
                fontSize: 14,
                rich: {
                  name: {
                    align: 'left',
                    color: '#fff',
                    width: 160
                  },
                  precent: {
                    align: 'left',
                    color: '#fff',
                    width: 55,
                    padding: [0, 5, 0, 10]
                  },
                  value: {
                    align: 'left',
                    color: '#fff',
                    width: 60
                  }
                }
              }
            },
            series: [
              // 主要展示層的
              {
                radius: ['40%', '60%'],
                center: ['77%', '50%'],
                type: 'pie',
                label: {
                  normal: {
                    show: false,
                    formatter: '{c}%',
                    textStyle: {
                      fontSize: 30
                    },
                    position: 'center'
                  },
                  emphasis: {
                    show: false
                  }
                },
                markPoint: {
                  label: {
                    show: false
                  }
                },
                labelLine: {
                  normal: {
                    show: false,
                    length: 30,
                    length2: 55
                  },
                  emphasis: {
                    show: false
                  }
                },
                name: '',
                data: data

              },
              {
                name: '',
                type: 'gauge',
                center: ['77%', '50%'],
                radius: '95%',
                startAngle: 0,
                endAngle: 359.9,
                splitNumber: 60,
                hoverAnimation: true,
                axisTick: {
                  show: false
                },
                splitLine: {
                  length: 20,
                  lineStyle: {
                    width: 7,
                    color: '#001a30'
                  }
                },
                title: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                pointer: {
                  show: false
                },
                axisLine: {
                  lineStyle: {
                    opacity: 0
                  }
                },
                detail: {
                  show: false
                },
                data: data
              },
              {
                name: '',
                type: 'pie',
                radius: ['76%', '95%'],
                center: ['77%', '50%'],
                silent: true,
                z: 0,
                zlevel: 0,
                showVal: true,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  }
                },
                itemStyle: {
                  normal: {
                  // 定製顯示（按順序）
                    color: function (params) {
                      var colorList = ['#4d77ff', '#00a477', '#6ef2ff', '#6ef2ff', '#0093ff', '#544bfd', '#00cbd5',
                        '#00c2ff', '#17d180', '#34e7a7', '#0067f9', '#9d4afd', '#4d77ff']
                      return colorList[params.dataIndex]
                    }
                  }
                },
                data: subData
              }
            ]
          }
        )
        $(window).resize(function () {
          myChart.resize()
        })