echarts仪表盘特殊样式

const drawChartOption = function (value, max) {
   const colorConfig = {
      name: '测试',
      colorList: {
         text: '#fff',
         line2: {
            type: 'linear',
            x: 0, // 右
            y: 0, // 下
            x2: 1, // 左
            y2: 0, // 上
            colorStops: [
              // {
              //     offset: 0,
              //     color: 'transparent'
              // },
                {
                  offset: 0.1,
                  color: '#031e35'
               },
               {
                  offset: 0.8,
                  color: '#00c9f2'
               },
               {
                  offset: 1,
                  color: '#c5f3fd'
               }
            ]
         },
         line3: {
            type: 'linear',
            x: 0, //右
            y: 0, //下
            x2: 1, //左
            y2: 0, //上
            colorStops: [
              {
                  offset: 0,
                  color: 'transparent'
              },
               {
                 offset:0.2,
                 color: '#062e42'
               },
               {
                  offset: 0.8,
                  color: '#017a89'
               },
               {
                  offset: 1,
                  color: '#c5f3fd'
               }
            ]
         }
      }
   }

   const ratio = max ? ((value / max) * 100).toFixed(1) : 0;

   const { name, colorList } = colorConfig;

   const option = {
      backgroundColor: '#000',
      tooltip: {
        show: false,
        formatter(params) {
            if (params) {
              const { marker, name } = params;
              // return `${marker}${name}  ${ratio ? ratio + '%' : ''}`;
              return ''
            } else {
              return '';
            }
        },
        triggerOn: 'mousemove',
        borderWidth: 0.5,
        color: '#ffffff'
      },
      grid: {
         left: '2%',
         right: '2%',
         bottom: '2%',
         top: '2%',
         containLabel: false
      },
      series: [
        
         //由外往内第二层线色部分
        {
            type: 'gauge',
            center: ['49.5%', '64%'],
            radius: '72%',
            // min: 0,
            // max: 100,
            zlevel: 6,
            pointer: {
              show: false //是否显示指针
            },
            tooltip: {
              show: true
            },
            progress: {
              show: true,
              roundCap: false,
              width: 20
            },
            title: {
              // 仪表盘标题。
              offsetCenter: [0, '55%'], // title圆环中心的距离
              fontSize: 40,
              fontWeight: 700,
              color:'#fff',
              
            },
            detail: {
              offsetCenter: [0, '-7%'], // title圆环中心的距离
              color: colorList.text,
              textAlign: 'center',
              fontSize: 40,
              fontWeight: 500,
              formatter: () => value
            },
            axisLabel: {
              // 刻度文字 如数字
              show: false,
            
            },
            axisTick: {
              show: false //是否显示刻度
            },
            axisLine: {
              roundCap: false,
              lineStyle: {
                  color: [[1, '#232A33']],
                  width: 40
              }
            },
            splitLine: {
              show: false //是否显示分隔线。
            },
            clockwise: true, //仪表盘刻度是否是顺时针增长。
            splitNumber: 1, //分割线之间的刻度
            // 起始点和最终点距离设置
            data: [
              {
                  name,
                  value: ratio,
                  itemStyle: {
                   
                    color: colorList.line2
                    
                  }
              }
            ]
        },
         //由外往内第三层渐变部分
        {
            type: 'gauge',
            radius: '68%',
            center: ['49.5%', '64%'],
            min: 0,
            max: 100,
            zlevel: 7,
           startAngle: 180,
           endAngle:0,
            pointer: {
              show: false //是否显示指针
            },
            progress: {
              show: true,
              roundCap: false,
              width: 30
            },
            title: {
              show: false
            },
            detail: {
              show: false
            },
            axisLabel: {
              show: false,
              // 刻度文字 如数字
              
            },
            axisTick: {
              show: false //是否显示刻度
            },
            axisLine: {
              show: false
            },
            emphasis: {
              scale: false
            },
            tooltip: {
              show: false
            },
            clockwise: true, //仪表盘刻度是否是顺时针增长。
            splitNumber: 1000, //分割线之间的刻度
            splitLine: {
              show: false
            },
            data: [
              {
                  name,
                  value: ratio,
                  itemStyle: {
                    color: colorList.line3
                  }
              }
            ]
        },
        // 指针
        {
            type: 'gauge',
            center: ['49.5%', '64%'],
            radius: '48%',
            min: 0,
            max: 100,
            zlevel: 8,
            startAngle: 180,
            endAngle: 0,
            detail: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            tooltip: {
              show: false
            },
            pointer: {
              show: true,
              length: 200,
              width: 4,
              icon: 'rect',
              offsetCenter: [0, '-50%'],
              itemStyle: {
                  color: '#B7D8FF'
              }
            },
            data: [ratio]
        },
        //虚线
       {
          title:'虚线',
          type: 'gauge',
          center: ['49.5%', '64%'],
          radius: '68%',
          min: 0,
          max: 100,
          splitNumber: 20,
          startAngle: 360,
          endAngle: 0,
          axisLine: {
              show: true,
              lineStyle: {
                  width: 40,
                  color: [
                      [1, 'rgba(0,0,0,0)']
                  ]
                  
              }
          },
          axisLabel: {
              show: false,
              color: '#4d5bd1',
              textStyle: {
                  fontWeight: 'bold',
                  fontSize: 18,
                  color: '#7789AA',
              },
              distance: 25,
              formatter: function (value) {
                  return value % 10 == 0 ? value : '';
              }
          },
          axisTick: {
              show: true,
              splitNumber: 4,
              lineStyle: {
                  color: '#074258',
                  width: 7,
              },
              length: -2
          },
          splitLine: {
              show: false,
          },
          detail: {
              show: false
          },
          pointer: {
              show: false
          }
      },
      {
          title:'园',
          type: 'gauge',
          center: ['49.5%', '64%'],
          radius: '51%',
          min: 0,
          max: 100,
          splitNumber: 20,
          startAngle: 360,
          endAngle: 0,
          axisLine: {
              show: true,
              lineStyle: {
                  width: 40,
                  color: [
                      [1, '#06283c']
                  ]
                  
              }
          },
          axisLabel: {
              show: false,
              
          },
          axisTick: {
              show: false,
              
          },
          splitLine: {
              show: false,
          },
          detail: {
              show: false
          },
          pointer: {
              show: false
          }
      },
      {
          title:'园',
          type: 'gauge',
          center: ['49.5%', '64%'],
          radius: '41%',
          min: 0,
          max: 100,
          splitNumber: 20,
          startAngle: 360,
          endAngle: 0,
          axisLine: {
              show: true,
              lineStyle: {
                  width: 40,
                  color: [
                      [1, '#063a51']
                  ]
                  
              }
          },
          axisLabel: {
              show: false,
              
          },
          axisTick: {
              show: false,
              
          },
          splitLine: {
              show: false,
          },
          detail: {
              show: false
          },
          pointer: {
              show: false
          }
      },
            {
          title:'园',
          type: 'gauge',
          center: ['49.5%', '64%'],
          radius: '31%',
          min: 0,
          max: 100,
          splitNumber: 20,
          startAngle: 360,
          endAngle: 0,
          axisLine: {
              show: true,
             lineStyle: {
                    color: [
                        [
                            1,
                            {
                                type: 'radial',
                                x: 0.5,
                                y: 0.59,
                                r: 0.6,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#032046',
                                    },
                                    {
                                        offset: 0.94,
                                        color: '#086989',
                                    },
                                    {
                                        offset: 0.98,
                                        color: '#0FAFCB',
                                    },
                                    {
                                        offset: 1,
                                        color: 'transparent',
                                    },
                                ],
                            },
                        ],
                    ],
                    width: 400,
                },
              
          },
          axisLabel: {
              show: false,
              
          },
          axisTick: {
              show: false,
              
          },
          splitLine: {
              show: false,
          },
          detail: {
              show: false
          },
          pointer: {
              show: false
          }
      },
      ]
   };

   return option;
};


const options = drawChartOption(50, 100)


option = options