echarts用仪表盘实现类似饼图效果

function N4() {
	    var n4 = echarts.init(document.getElementById('n4'));
	    var dataArr = [{
	        value: 91,
	        name: "'主中心与灾备中心监控系统总数'"
	    }];
    /* var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: '#5CF9FE' // 0% 处的颜色
        },
        {
            offset: 0.17,
            color: '#468EFD' // 100% 处的颜色
        },
        {
            offset: 0.9,
            color: '#468EFD' // 100% 处的颜色
        },
        {
            offset: 1,
            color: '#5CF9FE' // 100% 处的颜色
        }
    ]); */
    var colorSet = [
        [0.91, '#00d4ff'],
        [1, '#815EFE']
    ];
    var rich = {
        
        bule: {
            fontSize: 30,
            fontFamily: 'DINBold',			//中间数字
            color: '#fff',
            fontWeight: '700',
            padding: [-50, 0, 0, 0],
        },
        radius: {							//框内文字
            width: 110,
            fontSize: 14,
            padding: [5, 5, 5, 5],
            color: '#88A6DA',
            fontWeight: '470',
            backgroundColor: '#1B215B',
            
            textAlign: 'center',
        },
        size: {
            height: 100,
            padding: [10, 0, 0, 0]
        }
    }
    var option = {
    		tooltip: {
    	        formatter: "{a} <br/>{b} : {c}%"
    	    },

    	    series: [{ //内圆
    	            type: 'pie',
    	            radius: '85%',
    	            center: ['50%', '50%'],
    	            z: 0,
    	            itemStyle: {
    	                normal: {
    	                    color: new echarts.graphic.RadialGradient(.5, .5, 1, [{
    	                            offset: 0,
    	                            color: 'rgba(17,24,43,0)'
    	                        },
    	                        {
    	                            offset: .5,
    	                            // color: '#1E2B57'
    	                            color:'rgba(28,42,91,.6)'
    	                        },
    	                        {
    	                            offset: 1,
    	                            color: '#141C33',
    	                            // color:'rgba(17,24,43,0)'
    	                        }
    	                    ], false),
    	                    label: {
    	                        show: false
    	                    },
    	                    labelLine: {
    	                        show: false
    	                    }
    	                },
    	            },
    	            hoverAnimation: false,
    	            label: {
    	                show: false,
    	            },
    	            tooltip: {
    	                show: false
    	            },
    	            data: [100],
    	        },
    	        {
    	            type: 'gauge',
    	            name: '外层辅助线',
    	            radius: '74%',
    	            startAngle: '225',
    	            endAngle: '-45',
    	            splitNumber: '100',
    	            pointer: {
    	                show: false
    	            },
    	            detail: {
    	                show: false,
    	            },
    	            data: [{
    	                value: 1
    	            }],
    	            // data: [{value: 1, name: 90}],
    	            title: {
    	                show: true,
    	                offsetCenter: [0, 30],
    	                textStyle: {
    	                    color: '#fff',
    	                    fontStyle: 'normal',
    	                    fontWeight: 'normal',
    	                    fontFamily: '微软雅黑',
    	                    fontSize: 20,
    	                }
    	            },
    	            axisLine: {
    	                show: true,
    	                lineStyle: {
    	                    color: [
    	                        [1, '#3393B8']		//最外层曲线颜色
    	                    ],
    	                    width: 2,
    	                    opacity: 1
    	                }
    	            },
    	            axisTick: {
    	                show: false
    	            },
    	            splitLine: {
    	                show: true,
    	                length: 20,
    	                lineStyle: {
    	                    color: '#051932',
    	                    width: 0,
    	                    type: 'solid',
    	                },
    	            },
    	            axisLabel: {
    	                show: false
    	            }
    	        },
    	        {
    	            type: 'gauge',
    	            name: '弯曲柱状',
    	            radius: '70%',
    	            startAngle: '225',
    	            endAngle: '-45',
    	            pointer: {
    	                show: false
    	            },
    	            detail: {
    	                formatter: function(value) {
    	                    var num = Math.round(value);
    	                    var wenziUp = '主中心与灾备中心监控系统总数';
    	                    var strs = wenziUp.split(''); //字符串数组
    	                    var str = '';
    	                    for(var i = 0, s; s = strs[i++];) { //遍历字符串数组
    	                    	str += s;
    	                    	if(!(i % 8)) str += '\n'; //按需要求余
    	                    }
    	                    
    	                
    	                    return '{bule|' + num + '}' + '{size|' + '}\n{radius|'+ str +'}'; 
    	                },
    	                rich: rich,
    	                "offsetCenter": ['0%', "-30%"],
    	            },
    	            data: dataArr,
    	            title: {
    	                show: false,
    	            },
    	            axisLine: {
    	                show: true,
    	                lineStyle: {
    	                    color: colorSet,
    	                    width: 10,			//柱状宽度
    	                    // shadowBlur: 15,
    	                    // shadowColor: '#B0C4DE',
    	                    shadowOffsetX: 0,
    	                    shadowOffsetY: 0,
    	                    opacity: 1
    	                }
    	            },
    	            axisTick: {
    	                show: false
    	            },
    	            splitLine: {
    	                show: false,
    	                length: 25,
    	                lineStyle: {
    	                    color: '#00377a',
    	                    width: 2,
    	                    type: 'solid',
    	                },
    	            },
    	            axisLabel: {
    	                color: '#fff',
    	                show: true,
    	                padding: [15, 20, 0, 20],
    	                fontSize: 12,
    	                distance: -50,
    	                formatter(value) {
    	                    if (value === 0) {
    	                        return '停止'
    	                    }
    	                    if(value === 100){
    	                        return '运行'
    	                    }
    	                }
    	            },

    	            	label: {
    	                    normal: {
    	                        show: true,
    	                        position: 'outter',
    	                         formatter:function (parms){
    	                             return parms.data.name
    	                         }
    	                    }
    	                },
    	           
    	        },
    	        {
    	            name: '灰色内圈', //刻度背景
    	            type: 'gauge',
    	            z: 2,
    	            radius: '57%',
    	            startAngle: '225',
    	            endAngle: '-45',
    	            //center: ["50%", "75%"], //整体的位置设置
    	            axisLine: { // 坐标轴线
    	                lineStyle: { // 属性lineStyle控制线条样式
    	                    color: [
    	                        [1, '#115A89']		//最内层曲线颜色
    	                    ],
    	                    width: 2,
    	                    opacity: 1, //刻度背景宽度
    	                }
    	            },
    	            splitLine: {
    	                show: false
    	            },
    	            
    	            axisLabel: {
    	                show: false
    	            },
    	            pointer: {
    	                show: false
    	            },
    	            axisTick: {
    	                show: false
    	            },
    	            detail: {
    	                show: 0
    	            }
    	        },
    	        {
    	            name: "白色圈刻度",
    	            type: "gauge",
    	            radius: "60%",
    	            startAngle: 225, //刻度起始
    	            endAngle: -45, //刻度结束
    	            z: 4,
    	            axisTick: {
    	                show: false
    	            },
    	            splitLine: {
    	            	show: false,
    	                length: 16, //刻度节点线长度
    	                lineStyle: {
    	                    width: 2,
    	                    color: 'rgba(1,244,255, 0.9)'
    	                } //刻度节点线
    	            },
    	            axisLabel: {
    	                color: 'rgba(255,255,255,0)',
    	                fontSize: 12,
    	            }, //刻度节点文字颜色
    	            pointer: {
    	                show: false
    	            },
    	            axisLine: {
    	                lineStyle: {
    	                    opacity: 0
    	                }
    	            },
    	            detail: {
    	                show: false
    	            },
    	            data: [{
    	                value: 0,
    	                name: ""
    	            }]
    	        },
    	        { //内圆
    	            type: 'pie',
    	            radius: '52%',
    	            center: ['50%', '50%'],
    	            z: 1,
    	            itemStyle: {
    	                normal: {
    	                    color: new echarts.graphic.RadialGradient(.5, .5, .8, [{
    	                            offset: 0,
    	                            color: '#4978EC'
    	                        },
    	                        {
    	                            offset: .5,
    	                            color: '#1E2B57'
    	                        },
    	                        {
    	                            offset: 1,
    	                            color: '#141F3D'
    	                        }
    	                    ], false),
    	                    label: {
    	                        show: false
    	                    },
    	                    labelLine: {
    	                        show: false
    	                    }
    	                },
    	            },
    	            hoverAnimation: false,
    	            label: {
    	                show: false,
    	            },
    	            tooltip: {
    	                show: false
    	            },
    	            data: [100],
    	        },
    	    ]
	    };
	
	    n4.setOption(option);
	}

效果：