ehcarts实现分割圆环

如何使用echarts实现以下效果： 

思路：我们需要用echarts的饼状图结合echarts的仪表盘来实现，用仪表盘来分割圆环来实现如上效果。

完整代码如下所示：

 //设置饼状图颜色
      const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: '#A0E5FF', // 0% 处的颜色
        },
        {
          offset:0.05,
          color:'#84DDFF'
        },
        {
          offset:0.13,
          color:'#61D3FF'
        },
        {
          offset:0.22,
          color:'#42CBFF'
        },
        {
          offset:0.31,
          color:'#2AC4FF'
        },
        {
          offset:0.41,
          color:'#17BFFF'
        },
        {
          offset:0.54,
          color:'#0ABBFF'
        },
        {
          offset:0.69,
          color:'#02B9FF'
        },
        {
          offset: 1,
          color: '#00B9FF', // 100% 处的颜色
        },
      ]);
      Bin.setOption({
        //设置中心文字和样式
        title:{
          text: '{rate|98%}\n{name|总好评率}',
          x: 'center',
          y: 'center',
          textStyle:{
            rich:{
              rate:{
                fontSize:32,
                color:'#02D9FD'
              },
              name:{
                fontSize:14,
                color:'#99C6E6'
              }
            }
          }
        },
        //环形图
        series: [  {
          type: 'pie',
          radius: ['90%', '77%'],
          silent: true,
          clockwise: true,
          startAngle: 90,
          z: 0,
          zlevel: 0,
          label: {
            normal: {
              position: "center",

            }
          },
          data: [{
            value: state.value,
            name: "",
            itemStyle: {
              normal: {
                color:color,
              }
            }
          },
            {
              value: 100-state.value,
              name: "",
              label: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  color: "#005399"
                }
              }
            }
          ]
        },
          //仪表盘
          {
            name: "",
            type: "gauge",
            radius: "90%",
            center: ['50%', '50%'],
            startAngle: 90,
            endAngle:-269.9999,
            splitNumber: 60,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              length: -20,
              lineStyle: {
                width: 5,
                color: "#062340"
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                opacity: 0
              }
            },
            detail: {
              show: false
            },
            data: [{
              value: 0,
              name: ""
            }]
          },
        ]
      })