Echarts在线免费图表

 
            const startAngle = 220
const endAngle = -40
option = {
   backgroundColor: '#333',
   title: [
      {
         text: `{value|${5230}}\n{name|${'当日上报数'}}`,
         left: 'center',
         bottom: '15%',
         textStyle: {
            rich: {
               value: {
                  fontSize: '24',
                  color: '#01E2E5',
                  padding: [8, 0]
               },
               name: {
                  fontSize: '14',
                  color: '#ffffff'
               }
            }
         }
      }
   ],
   series: [
      {
         name: '最外层-刻度尺',
         type: 'gauge',
         radius: '75%',
         startAngle,
         endAngle,
         axisLine: {
            lineStyle: {
               color: [[1, 'rgba(25, 235, 255, 1)']],
               width: 1
            }
         },
         axisTick: {
            distance: -6,
            length: 7,
            lineStyle: {
               color: 'rgba(25, 235, 255, 1)'
            },
            splitNumber: 10
         },
         splitLine: {
            distance: -11,
            length: 14,
            lineStyle: {
               color: 'rgba(25, 235, 255, 1)',
               width: 1
            }
         },
         axisLabel: {
            show: false
         },
         pointer: {
            show: false
         }
      },
      {
         name: '内层带指针',
         type: 'gauge',
         radius: '72%',
         startAngle,
         endAngle,
         axisLine: {
            lineStyle: {
               color: [[1, 'rgba(25, 235, 255, 0.2)']],
               width: 20
            }
         },
         axisTick: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisLabel: {
            show: true,
            textStyle: {
                color: '#FFFFFF'
            }
         },
         detail: {
            show: false
         },
         pointer: {
            show: true,
            length: '96%',
            width: 10,
            itemStyle: {
               color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: '#FFFFFF'
                     },
                     {
                        offset: 1,
                        color: 'rgba(255, 92, 119, 0)'
                     }
                  ]
               }
            }
         },
         progress: {
            show: true,
            width: 20,
            itemStyle: {
               color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                     {
                        offset: 0,
                        color: '#5BFCF4'
                     },
                     {
                        offset: 1,
                        color: '#5BFCF4'
                     }
                  ]
               }
            }
         },
         data: [
            {
               value: 43
            }
         ]
      },
      {
         name: '中心效果圆',
         type: 'gauge',
         radius: '34%',
         startAngle: 0,
         endAngle: 360,
         axisLine: {
            lineStyle: {
               color: [[1, '#0AFFE9']],
               width: 1
            }
         },
         axisTick: {
            show: false
         },
         splitLine: {
            show: false
         },
         axisLabel: {
            show: false
         },
         detail: {
            show: false
         },
         pointer: {
            show: false
         },
         progress: {
            show: true,
            width: 1,
            itemStyle: {
               color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                     {
                        offset: 0,
                        color: 'rgb(0, 224, 205, 0)'
                     },
                     {
                        offset: 0.7,
                        color: 'rgba(0, 224, 205, 0)'
                     },
                     {
                        offset: 1,
                        color: 'rgba(10, 255, 233, 1)'
                     }
                  ]
               }
            }
         },
         data: [
            {
               value: 100
            }
         ]
      },
      {
         type: 'pie',
         radius: ['90%', '89.5%'],
         hoverAnimation: false,
         clockWise: false,
         itemStyle: {
               normal: {
                  color: 'rgba(5, 79, 123, 1)'
               }
         },
         label: {
               show: false
         },
         data: [100]
      }
   ]
}