仪表盘进度图echarts gauge配置项内容和展示

      const pointerData =5; // 仪表指针数据

var option = {
    backgroundColor: "#fff",
    title: {
        text: "仪表盘进度图",
        top: "10%",
        left: '2%',
        textStyle: {
            color: "#013f72",
            fontSize: 24,
            fontWeight: 300,
        },
        borderType: 'solid',
        borderColor: 'rgba(0,0,0,0.1)',
        borderWidth: 1,
        borderRadius: 2,
        backgroundColor: 'rgba(0,0,0,0.03)',
        padding: 5,
    },
    series: [{
              name: '', // 最外层的线
              type: 'gauge',
              radius: 190,
              startAngle: 180,
              endAngle: 0,
              data: [100],
            //   center: ['50%', '80%'],
              splitNumber: 1, //刻度数量
              splitLine: {
                  show: true,
                  length: 2,
                  distance: -1,
                  lineStyle: {
                      width: 2,
                      color:  'rgba(84, 108, 198, 0.65)',
                      cap: 'round'
                  }
              }, 
              axisLine: {
                  lineStyle: {
                      width:1,
                      shadowBlur: 0,
                      color: [
                          [1,  'rgba(84, 108, 198, 0.65)']
                      ]
                  }
              },
              axisLabel: {show: false},
              axisTick: {show: false},
              detail: {show: false},
              pointer: {
                    show: false,
                }
          },{
              name: '',  // 第二层的线
              type: 'gauge',
              radius: 185,
              startAngle: 180,
              endAngle: 0,
              data: [100],
            //   center: ['50%', '80%'],
              splitNumber: 1, //刻度数量
              splitLine: {
                  show: true,
                  length: 2,
                  distance: -1,
                  lineStyle: {
                      width: 2,
                      color:  'rgba(84, 108, 198, 0.65)',
                      cap: 'round'
                  }
              }, 
              axisLine: {
                  lineStyle: {
                      width:1,
                      shadowBlur: 0,
                      color: [
                          [1,  'rgba(84, 108, 198, 0.65)']
                      ]
                  }
              },
              axisLabel: {show: false},
              axisTick: {show: false},
              detail: {show: false},
              pointer: {
                    show: false,
                }
          },{
            name: '', // 第3层的刻度
            type: 'gauge',
            splitNumber: 8, //刻度数量
            startAngle: 180, //开始角度 左侧角度
            endAngle: 0, //结束角度 右侧
            min: 0,
            max: 100,
            radius: 170, //图表尺寸
            // center: ['50%', '80%'],
            axisLine: {
              show: false,
            },
            progress: {
                show: false,
                width: 20
            },
            axisTick: {
                distance: 5,
                show: true,
                splitNumber: 5,
                length: 8,
                lineStyle: {
                  width: 0.5,
                  color:'#000000'
                }
            },
            detail: {
                formatter: function() {
                    // var num = Math.round(value);
                    // return `{title|${_this.info.title}:}{title1|${_this.info.status}}`;
                },
                offsetCenter: ['0%', "30%"],
            },
            axisLabel: {
                show: false  
            },
            pointer: {
                show: false
            },
            splitLine: {
              show: false
            },
            data: [100],
          }, { 
            type: "gauge",
            //   center: ['50%', '80%'],
            radius: 150,
            z: 1,
              startAngle: 180,
              endAngle: 0,
            splitNumber: 50,
            title: {
                color: 'red',
            },
            splitLine: {
                show: true,
                length: 15,
                distance: -10,
                lineStyle: {
                    color: "#fff",
                    width: 4
                }
            },
            pointer: {
                show: false  
            },
            detail: {
                show: true,
                offsetCenter: [0, 60],
                fontSize: 22,
                formatter: val => [`{a|${val}}`, `{b|%}`].join(''),
                rich: {
                    a: {
                        fontSize: 20,
                        color: 'rgba(84, 108, 198, 0.65)',
                    },
                    b: {
                        fontSize: 24,
                        color: 'rgba(84, 108, 198, 0.65)',
                    }
                },
            },
            // 仪表盘的线，颜色值为一个数组
            axisLine: {
                show: true,
                // 两端是否设置为圆角；在5.0之后的版本有效
                roundCap: false,
                lineStyle: {
                    width: 15, 
                    shadowColor: '#0093ee', //默认透明
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    opacity: 1,
                    color: [
                        [pointerData / 100, {
                            x: 0,
                            y: 0,
                            x1: 1,
                            y1: 0,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(0, 255, 255, 0.6)'
                            }, {
                                offset: 1,
                                color: 'rgba(0, 0, 255, .6)'
                            }]
                        }],
                        [1, "rgba(0,0,0,0.15)"]
                    ]
                }
            },
            // 仪表盘刻度标签
            axisLabel: {
                show: false,
                color: "rgba(84, 108, 198, 0.65)",
                fontSize: 14,
                distance: 20,
                formatter: val => {
                    const num = Math.floor(val);
                    return num % 20 === 0 ? num : "";
                }
            },
            // 刻度
            axisTick: {
                show: false
            },
            // 指针，此设置仅对5.0以上的版本生效
            anchor: {
                show: false,
                icon: "circle",
                showAbove: true,
                size: 20,
                itemStyle: {
                    borderWidth: 6,
                    borderColor: "rgba(84, 108, 198, 0.85)"
                }
            },
            data: [pointerData]
        },
        // {
        //     // 背景渐变色
        //     type: "pie",
        //     radius: "80%",
        //     // 不响应及触发鼠标事件
        //     silent: true,
        //     // 关闭背景动画
        //     animation: false,
        //     z: 0,
        //     itemStyle: {
        //         color: {
        //             type: "radial", // 径向渐变
        //             x: 0.5,
        //             y: 0.5,
        //             r: 0.25,
        //             colorStops: [{
        //                     offset: 0,
        //                     color: "rgba(84, 103, 198, 0.6)"
        //                 },
        //                 {
        //                     offset: 0.1,
        //                     color: "rgba(84, 103, 198, 0.35)"
        //                 },
        //                 {
        //                     offset: 1,
        //                     color: "rgba(84, 103, 198, 0)"
        //                 }
        //             ]
        //         }
        //     },
        //     data: [pointerData]
        // }
    ]
};