仪表盘echarts图（附图与代码）

var datas = {
    value: 82,
    title: "任务完成占比",
    type: 1,
    radiusType: 1
};
let  startAngle=180,endAngle=0;
var fontColor = "#00f6f7";
var seriesName = "";
let noramlSize = 16;
let state = "";
let center = ["50%", "55%"];
let wqradius = 0,
    nqradius = 0,
    kdradius;
    wqradius = "60%";
    nqradius = "60%";
    kdradius = "90%";
let min=0,max=100;
let nqColor = [
    [
        datas.value/100,
        "rgba(201, 174, 60,0.2)"
    ],
    [
        1,
       "rgba(3, 169, 159,0)"
    ]
];

let wqColor = "rgba(22, 138, 255, 0.9)";
let circleLineW=2;
myChart.setOption({
    // backgroundColor:"#000",
    title: {
        show: true,
        x: "center",
        bottom: "40%",
        text: datas.title,
        textStyle: {
            // fontWeight: "700",
            fontSize: 16,
            color: '#fff'
        }
    },
    tooltip: {
        show: false
    },
    series: [
        {
            type: "gauge",
            radius: "70%",
            splitNumber: 4, //刻度数量
            min: 0,
            max: 100,
            startAngle,
            endAngle,
            center,
            pointer: {
              show: false,
            },
            // data: dataArr,
            title: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgb(4, 145, 139)",
                width: 35,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                opacity: 1,
              },
            },
            axisTick: {
              show: true,
              splitNumber: 10,
              length: 100,//刻度线长度
              lineStyle: {
                width: 1,
                color: "#3c4543",
              }, 
            },
            splitLine: {
              length:0, //刻度节点线长度
              lineStyle: {
                width: 1,
                color: "#20c998",
              }, //刻度节点线
            },
            axisLabel: {
              show: true,
              distance:0,
              textStyle: {
                    color: '#ffffff',
                    fontSize: "14",
                    // fontWeight: "bold"
                }
            },
            detail: {
              show: 0,
            },
            animationDuration: 4000,
          },{
            name: "白色圈刻度",
            type: "gauge",
            radius: kdradius,
            center,
            startAngle, //刻度起始
            endAngle, //刻度结束
            z: 7,
            splitNumber: 5,
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false,
                color: fontColor,
                fontSize: noramlSize,
                formatter: "{value}%"
            }, //刻度节点文字颜色
            pointer: {
                show: false
            },
            axisLine: {
                show: false
            },
            detail: {
                show: false
            }
        },
        {
            name: "外层圈", //刻度背景
            type: "gauge",
            z: 2,
            radius: wqradius,
            startAngle,
            endAngle,
            center, //整体的位置设置
            axisLine: {
                // 坐标轴线
                lineStyle: {
                    // 属性lineStyle控制线条样式
                    color: [
                        [1, 'skyblue']
                    ],
                    width: circleLineW,
                    opacity: 1 //刻度背景宽度
                }
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false
            },
            axisTick: {
                show: false
            },
            detail: {
                show: 0
            }
        },
        {
            name: "指针",
            type: "gauge",
            z: 9,
            radius: "100%",
            startAngle,
            endAngle,
            center, //整体的位置设置
            axisLine: {
                show:false,
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            min,
            max,
            //指针样式位置
            pointer: {
                show: true,
                width: 5,
                length: "25%",
                offsetCenter: [0,-142],
            },
            itemStyle: {
                normal: {
                    color: 'yellow'
                }
            },
            detail: {
                show: true,
                offsetCenter: [0, -25],
                formatter: [
                    "{value|" + (datas.value) + " }"+"{percent|" + '%' + " }"
                ].join("\n"),
                rich: {
                    value: {
                        fontSize: 30,
                        lineHeight: 10,
                        color: '#ffffff',
                        fontWeight: "700"
                    },
                    percent: {
                        fontSize: 20,
                        lineHeight: 10,
                        color: '#ffffff',
                        fontWeight: "700"
                    }
                }
            },
            data: [datas.value] //指针位置
        },
        {
            name: "内层盘",
            type: "gauge",
            z: 6,
            radius: nqradius,
            startAngle,
            endAngle,
            center, //整体的位置设置
            axisLine: {
                lineStyle: {
                    // 属性lineStyle控制线条样式//控制外圈位置
                    color: nqColor,
                    width: 96,
                    opacity: 0.9 //控制外圈位置，颜色，宽度，透明度
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false
            },
            detail: {
                show: 0
            }
        },
        {
            name: "中间小环",
            type: "gauge",
            z: 6,
            radius: "50%",
            startAngle,
            endAngle,
            center: center, //整体的位置设置
            axisLine: {
                lineStyle: {
                    // 属性lineStyle控制线条样式//控制外圈位置
                   color: [
                        [
                            datas.value/100, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#6fed5c'
                                    },
                                    {
                                        offset: 1,
                                        color: '#b2f268'
                                    }
                                ]
                            )]
                    ],
                    width:23,
                    // opacity: 0.9 //控制外圈位置，颜色，宽度，透明度
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false
            },
            detail: {
                show: 0
            }
        },
        {
            name: "内层小环",
            type: "gauge",
            z: 10,
            radius: "35%",
            startAngle,
            endAngle,
            center: center, //整体的位置设置
            axisLine: {
                lineStyle: {
                    // 属性lineStyle控制线条样式//控制外圈位置
                   color: [
                        [1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#6fed5c'
                                    },
                                    {
                                        offset: 1,
                                        color: '#396aff'
                                    }
                                ]
                            )]
                    ],
                    width:10,
                    // opacity: 0.9 //控制外圈位置，颜色，宽度，透明度
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            pointer: {
                show: false
            },
            detail: {
                show: 0
            }
            
        }
    ]
});

var bgColor = "#222939"
var highlight = '#05c7c9'
var value = 1.5
    
option = {
    backgroundColor: bgColor,
    title: {
        text: '{a|'+ 50+ ' ' +'}{c|%}',
        x: 'center',
        y: 'center',
        textStyle: {
            rich:{
                a: {
                    fontSize: 48,
                    color: '#ffffff',
                    fontWeight:'bold'
                },
                
                c: {
                    fontSize: 20,
                    color: '#ffffff',
                    fontWeight:'bold'
                    // padding: [5,0]
                }
            }
        }
    },
    series: [
        {
            name: '刻度',
            type: 'gauge',
            center: ['50%', '55%'], // 默认全局居中  
            splitNumber: 4, //刻度数量
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            clockwise: true,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 2,
                    shadowBlur: 0,
                    color: [
                        [1, highlight]
                    ]
                }
            },
            axisTick: {
                show: false,
                
                // lineStyle: {
                   
                //     color: highlight,
                //     width: 1
                // },
                // length: 8,
                // splitNumber: 10
            },
            splitLine: {
                show: false,
                length: -7,
                lineStyle: {
                    color: highlight,
                }
            },
            axisLabel: {
                distance: -20,
                textStyle: {
                    color: '#ffffff',
                    fontSize: "14",
                    fontWeight: "bold"
                }
            },
            pointer: { //仪表盘指针
                show: 0
            },
            detail: {
                show: false
            }
        },
        {
            name: '标尺',
            center: ['50%', '55%'], // 默认全局居中 
            type: 'gauge',
            radius: '61%',
            splitNumber: 0, //刻度数量
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                lineStyle: {
                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                    shadowBlur: 15,
                    color: [
                        [
                            (value/4), new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#6fed5c'
                                    },
                                    {
                                        offset: 1,
                                        color: '#b2f268'
                                    }
                                ]
                            )
                        ],
                    ]
                }
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            detail: {
                show: false
            },
            pointer: {
                show: true
            }
        },
       
        {
            name: '数值',
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            radius: '43%',
            center: ['50%', '55%'], // 默认全局居中  
            min: 0,
            max: 4,
            splitNumber: 0,
            axisLine: { // 坐标轴线  
                lineStyle: {
                    color: [
                        [
                            1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#6fed5c'
                                    },
                                    {
                                        offset: 1,
                                        color: '#396aff'
                                    }
                                ]
                            )
                        ],
                    ], // 属性lineStyle控制线条样式  
                    width: '1%'
                }
            },

            axisLabel: { // 坐标轴小标记  
                show: false
            },
            splitLine: { // 分隔线  
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式  
                    width: 0
                }
            },
            pointer: { // 分隔线 指针  
                color: 'red',
                width: '10%',
                length: '170%'
            },
            detail: {
                show: true
            },
            data: [{
                name: "",
                value: value
            }],
            z: 2
        },
        {
            name: '遮罩',
            tooltip:{
                show:true
            },
            type: 'pie',
            radius: '40%',
            center: ['50%', '55%'], // 默认全局居中
            hoverAnimation:false,
            itemStyle:{
                normal:{
                    color: bgColor
                },
                emphasis:{
                    color: bgColor
                }
            },
            labelLine:{
                normal:{
                    show:false
                }
            },
            animation:false,
            data: [1.9],
            
        }
    ]
};