echarts环形齿轮状饼状图

效果图：

image.png

     option ={
          backgroundColor:'rgb(4,31,62)',
            title: {
            text: '{a|' + 30 + '}{c|%}',
            x: 'center',
            y: 'center',
            textStyle: {
                rich: {
                    a: {
                        fontSize: 10,
                        color: '#11BBD5'
                    },

                    c: {
                        fontSize: 10,
                        color: '#11BBD5',
                    }
                }
            }
        },
        legend: {
            show: false,
        },
        series: [
             {
            type: 'pie',
            name: '外圆环',
            radius: ['61%', '63%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    color: 'rgba(17, 187, 213, 1)',
                },
            },
            label: {
                show: false,
            },
            data: [100],
        },
            {
                name: '',
                type: 'pie',
                radius: ['58%', '45%'],
                 silent: true,
                 clockwise: true,
                 startAngle: 90,
                 z: 0,
                 zlevel: 0,
                label: {
                    normal: {
                        position: "center",

                    }
                },
                data: [{
                        value: 30,
                        name: "",
                        itemStyle: {
                            normal: {
                                color: 'red',
                            }
                        }
                    },
                    {
                        value:70,
                        name: "",
                        label: {
                            normal: {
                                show: false
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'transparent'
                            }
                        }
                    }
                ]
            },
            {
            name: '仪表图',
            type: 'gauge',
            radius: '58%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9,
            splitNumber: 40,
            hoverAnimation: true,
            axisTick: {
                show: false,
            },
            splitLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    color: 'rgba(17, 187, 213, 1)',
                },
            },
            axisLabel: {
                show: false,
            },
            pointer: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    opacity: 0,
                },
            },
            detail: {
                show: false,
            },
            data: [
                {
                    value: 0,
                    name: '',
                },
            ],
        },
         {
            type: 'pie',
            name: '内环',
            radius: ['40%', '42%'],
            hoverAnimation: false,
            clockWise: false,
            itemStyle: {
                normal: {
                    color: '#11BBD5',
                },
            },
            label: {
                show: false,
            },
            data: [100],
        },
        ]
      }