仪表~echarts gauge配置项内容和展示

      option = {
     backgroundColor: '#000',
        color: '#fff',
        tooltip: { show: false },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '0%',
            containLabel: true,
            borderWidth: '0'
        },
        title: {
            text: "进给倍率",
            bottom: '20%',
            left: '40%',
            textStyle: {
                fontSize: '1vw',
                color: '#fff'
            }
        },
        series: [
            {
                name: '业务指标',
                type: 'gauge',
                radius: '80%',
                splitNumber: 10, // 分割段数，默认为5
                z: 8,
                min: 0,
                max: 200,

                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: [[1, '#fff']],
                        width: 0
                    }
                },
                axisTick: { // 坐标轴小标记
                    splitNumber: 5, // 每份split细分多少段
                    length:15, // 属性length控制线长
                    lineStyle: { // 属性lineStyle控制线条样式
                        color: '#fff',
                        width: 3,
                    }
                },
                axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
                    formatter: function (v) {
                        v = v.toFixed();
                        // console.log(v)
                        switch (v + '') {
                            case '0':
                                return '0';
                            case '20':
                                return '20';
                            case '40':
                                return '40';
                            case '60':
                                return '60';
                            case '80':
                                return '80';
                            case '100':
                                return '100';
                            case '120':
                                return '120';
                            case '140':
                                return '140';
                            case '160':
                                return '160';
                            case '180':
                                return '180';
                            case '200':
                                return '200';

                        }
                    },
                    textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        color: '#fff',
                        fontSize: "0.8vw",
                    }
                },
                splitLine: { // 分隔线
                    show: true, // 默认显示，属性show控制显示与否
                    length: 20, // 属性length控制线长
                    lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                        color: 'auto',
                        width: 5,
                    }
                },
                pointer: {
                    show: true,
                    width: 10,
                    length: '80%',
                    color: '#fff'

                },
                detail: {
                    show: false,
                },
                title: {
                    show: false,
                },
                data: [{
                    value: 65
                }]
            },
            {
                type: "gauge",
                radius: "84%",
                startAngle: "225",
                endAngle: "-45",
                splitNumber: "120",
                pointer: {
                    show: false,
                },
                detail: {
                    show: false,
                },

                axisLine: {
                    show: true,
                    lineStyle: {
                        color: [
                            [1, "yellow"]
                        ],
                        width: 2,
                        opacity: 1,
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,

                },
                axisLabel: {
                    show: false,
                },
            },
            {
                type: "gauge",
                radius: "82%",
                startAngle: "225",
                endAngle: "-45",
                pointer: {
                    show: true,
                },

                data: [{
                    name: "数值",
                    value: (99 / 200) * 100,
                },],
                title: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#fff',
                        width: 10,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        opacity: 1,
                    },
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                    length: 25,
                    lineStyle: {
                        color: "green",
                        width:10,
                        type: "solid",
                    },
                },
                axisLabel: {
                    show: false,
                    formatter: function (v) {
                        return v.toFixed(0);
                    },
                },
                animationDuration: 4000,
            },
            {

                type: "gauge",
                z: 2,
                radius: "80%",
                startAngle: "225",
                endAngle: "-45",
                //center: ["50%", "75%"], //整体的位置设置
                axisLine: {
                    // 坐标轴线
                    lineStyle: {
                        // 属性lineStyle控制线条样式
                        color: [
                            [1, "#fff"]
                        ],
                        fontSize: 40,
                        width: 1,
                        opacity: 1, //刻度背景宽度
                    },
                },
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                    formatter: function (v) {
                        return v.toFixed(0);
                    },
                },
                pointer: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                detail: {
                    show: false,
                },
            },
            {
                type: 'pie',
                sttartAngle: 90,
                radius: "80%",
                hoverAnimation: false,
                legendHoverLink: false,
                lable: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },

                center: ['50%', '50%'],
                z: -10,
                data: [{
                    value: 100,
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [{ offset: 0, color: '#00C2EB' }, { offset: 0.80, color: '#037495' }, { offset: 1, color: '#094461' }]
                            },
                            opacity:0.5
                        }
                    }
                }
                ]
            },
            {
                type: 'pie',
                sttartAngle: 90,
                radius: "88%",
                hoverAnimation: false,
                legendHoverLink: false,
                lable: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                center: ['50%', '50%'],
                z: -15,
                data: [{
                    value: 100,
                    itemStyle: {
                        color: '#333333'
                    }
                }
                ]
            },


        ]
};