echarts仪表盘

效果图：

const data = 6,maxdata = 10;
const radius = ["88%", "94%"];
const splitColor = "#e7edfd";
const innerColor = ["#3c6bfc","#E9EEFF"];
const fontColor = "#3D6CFD";
 let title = {
     text: data,
     subtext: '压力(Mpa)',
     x: 'center',
     y: '42%',
     textStyle: {
         color: fontColor,
         fontSize: 50,
         fontFamily: 'Arial',
         fontWeight: 400
     },
     subtextStyle: {
         color: '#999',
         fontSize: 20,
         fontFamily: 'PingFang-SC-Regular'
     }
 };
option = {
    backgroundColor: "#fff",
    toolbox: {
        feature: {
            
        }
    },
    title:title,
    animationDuration: 10000,
    series: [

        // 底色圈
        {
            type: "pie",
            radius: radius,
            hoverAnimation: false,
            startAngle: 225,
            endAngle: 45,
            label: {
                show: true
            },
            labelLine: {
                show: false
            },
            animation: false,
            data: [{
                value: 75,
                itemStyle: {
                    color: innerColor[1]
                }
            }, {
                value: 25,
                itemStyle: {
                    opacity: 0,
                    color:"#00f"
                },
            }]

        },

        // 刻度线 
        {
            name: '刻度2',
            type: 'gauge',
            center: ['50%', '50%'],
            radius: "79%",
            startAngle: 200,
            endAngle: -18,
            splitNumber: 4, //刻度数量
            axisLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: [
                        [1, 'rgba(0,0,0,0)']
                    ]
                }
            }, //分隔线样式。
            splitLine: {
                show: true,

                length: 12,
                lineStyle: {
                    width: 4
                }
            },
            axisLabel: {

                show: false,
            },
            axisTick: {
                show: true,
                splitNumber: 2,
                length: 12,
                lineStyle: {
                    width: 4,
                    color:splitColor
                }
            },

            detail: {
                show: false,
            },
            title: {
                show: false,
            }
        },
        {
            name: "",
            type: 'gauge',
            min: 0,
            max: maxdata,
            radius: "96%",
            splitNumber: 1, //刻度数量
            startAngle: 225,
            endAngle: 315,
            axisLine: {
                show: false,
                lineStyle: {
                    width: 1,
                    color: [
                        [1, 'rgba(0,200,200,1)']
                    ]
                }
            },
            //分隔线样式。
            splitLine: {
                show: false,
            },
            axisLabel:{
                distance: -10,
                show: true,
                formatter: function(value){
                if(value === 0 || value === 10){
                      return value
                    }
                    return ''
                  },
                padding: [20, 0, 0, 0],
                lineHeight: -40,
                fontSize: 26,
                color: '#999'
            },
            axisTick: {
                show: false
            },
            pointer: {
                show: true,
                width: 4,
                length: "100%"
            },
            itemStyle: {
                color: "#fff"
            },
            detail: {
                show: false,
            },
            title: {
                show: false,
            }

        },

        // 仪表盘值得渐变
        {
            type: "pie",
            radius: radius,
            hoverAnimation: false,
            startAngle: 225,
            endAngle: 45,
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            data: [{
                name: "",
                value: data/maxdata,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                                offset: 0,
                                color: innerColor[0]
                            },
                            {
                                offset: 1,
                                // color: '#7E00FF'
                                color: innerColor[0]
                            }
                        ]
                    )
                }
            }, {
                value: 1.325-(data/maxdata),
                itemStyle: {
                    opacity: 0,
                    color:"rgba(255,255,255,0)"
                },
            }]

        },

        // 值的尾巴
        {
        "type": "pie",
        radius: ['88%', '92%'],
        "hoverAnimation": false,
        startAngle: 225,
        endAngle: 45,
        "data": [{
            "name": "",
            "value": data/maxdata,
            "label": {
                show:false
            },
            "labelLine":{
                 show:false
            },
            itemStyle:{
                color: 'rgba(0,0,0,0)'
            }
        }, 
        {//画中间的图标
            "name": "",
            "value": 0,
            "label": {
                position:'inside',
                backgroundColor: '#fff',
                borderRadius: 14,
                padding: 14,
                borderWidth: 6,
                // borderColor:'rgba(61, 108, 253, .9)'
                borderColor:'rgba(179, 211, 253, .4)'
            }
        },{
            "name": "",
            value: 1.325-data/maxdata,
            "label": {
                show:false
            },
            "labelLine":{
                 show:false
            }
            ,
            itemStyle:{
                color: 'rgba(255,255,255,0)'
            }
        }]
    }
    ]
};