仪表盘-根据比例显示渐变值echarts gauge配置项内容和展示

主要应用了color进行值的return

       colorFormatOnChart = (value, max) => {
     if (value / max < 0.1) {
         return [
             [0.1, '#17D5F7'],
             [1, '#999999']
         ]
     } else if (value / max < 0.2) {
         return [
             [0.1, '#17D5F7'],
             [0.2, 'rgba(147, 255, 203, 1)'],
             [1, '#999999']
         ]
     } else if (value / max < 0.3) {
         return [
             [0.1, '#17D5F7'],
             [0.2, '#1BF0AC'],
             [0.3, 'rgba(147, 255, 203, 1)'],
             [1, '#999999']
         ]
     } else if (value / max < 0.4) {
         return [
             [0.1, '#17D5F7'],
             [0.2, '#17D5F7'],
             [0.3, '#1BF0AC'],
             [0.4, 'rgba(147, 255, 203, 1)'],
             [1, '#999999']
         ]
     } else if (value / max < 0.5) {
         return [
             [0.1, '#17D5F7'],
             [0.2, '#17D5F7'],
             [0.3, '#1BF0AC'],
             [0.4, '#1BF0AC'],
             [0.5, 'rgba(147, 255, 203, 1)'],
             [1, '#999999']
         ]
     } else if (value / max < 0.6) {
         return [
             [0.1, '#17D5F7'],
             [0.2, '#17D5F7'],
             [0.3, '#17D5F7'],
             [0.4, '#1BF0AC'],
             [0.5, '#1BF0AC'],
             [0.6, 'rgba(147, 255, 203, 1)'],

             [1, '#999999']
         ]
     } else if (value / max < 0.7) {
         return [
             [0.1, '#17D5F7'],
             [0.2, '#17D5F7'],
             [0.3, '#17D5F7'],
             [0.4, '#1BF0AC'],
             [0.5, '#1BF0AC'],
             [0.6, 'rgba(147, 255, 203, 1)'],
             [0.7, 'rgba(147, 255, 203, 1)'],
             [1, '#999999']
         ]
     } else if (value / max < 0.8) {
         return [
             [0.1, '#17D5F7'],
             [0.2, '#17D5F7'],
             [0.3, '#17D5F7'],
             [0.4, '#17D5F7'],
             [0.5, '#1BF0AC'],
             [0.6, '#1BF0AC'],
             [0.7, '#1BF0AC'],
             [0.8, 'rgba(147, 255, 203, 1)'],
             [1, '#999999']
         ]

     } else if (value / max > 0.9) {
         return [
             [0.1, '#17D5F7'],
             [0.2, '#17D5F7'],
             [0.3, '#17D5F7'],
             [0.4, '#1BF0AC'],
             [0.5, '#1BF0AC'],
             [0.6, '#A2DA2A'],
             [0.7, '#A2DA2A'],
             [0.8, '#DBF743'],
             [0.9, 'rgba(147, 255, 203, 1)'],
             [1, '#999999']
         ]
     } else {
         return [
             [0.1, '#17D5F7'],
             [0.2, '#17D5F7'],
             [0.3, '#17D5F7'],
             [0.4, '#17D5F7'],
             [0.5, '#1BF0AC'],
             [0.6, '#1BF0AC'],
             [0.7, '#1BF0AC'],
             [0.8, '#1BF0AC'],
             [0.9, 'rgba(147, 255, 203, 1)'],
             [1, 'rgba(147, 255, 203, 1)']
         ]
     }
 }
 option = {
     background: '#999999',
     grid: {
         left: '4%',
         bottom: '10%',
         containLabel: true
     },
     series: [{
             type: 'gauge',
             radius: '80%',
             splitNumber: 24,
             min: 0,
             max: 100,
             center: ['50%', '50%'],

             // detail: {
             //     // offsetCenter: [0, 100],
             //     color: '#fff',
             //     fontSize: 22,
             //     formatter: ' '
             // },
             pointer: {
                 show: false
             },
             axisLine: {
                 show: true,
                 lineStyle: {
                     color: '#999999',
                     width: 5
                 }
             },

             axisTick: {
                 show: false
             },
             splitLine: {
                 show: true,
                 length: 4,
                 lineStyle: {
                     width: 4,
                     color: '#999999'
                 }
             },
             axisLabel: {
                 show: false
             }
         },

         {
             name: '',
             type: 'gauge',
             splitNumber: 4, //刻度数量
             min: 0,
             max: 100,
             radius: '100%', //图表尺寸
             center: ['50%', '50%'],
             // title: {
             //     show: true,
             //     offsetCenter: [0, '25%'], // x, y，单位px
             //     textStyle: {
             //         color: '#36ce9b',
             //     }
             // },
             detail: {
                 show: true,
                 offsetCenter: [0, 0],
                 color: '#fff',
                 fontSize: 34,
                 formatter: '{value}' + '%',
             },
             axisLine: {
                 show: false,
                 lineStyle: {
                     width: 0,
                     shadowBlur: 0,
                     color: colorFormatOnChart(30, 100),
                 }
             },
             axisTick: {
                 show: true,
                 lineStyle: {
                     color: 'auto',
                     width: 3
                 },
                 length: 30,
                 splitNumber: 6
             },
             splitLine: {
                 show: false,
                 length: 30,
                 lineStyle: {
                     color: 'auto',
                 }
             },
             axisLabel: {
                 show: false
             },
             pointer: { //仪表盘指针
                 show: 0,
                 length: '70%',
                 width: 2
             },


             data: [{
                 name: "",
                 value: 30
             }]
         }
     ]
 };