Echarts在线免费图表

 
            
const value = 82; //数值

option = {
   tooltip: {
      formatter: "{a} <br/>{b} : {c}%"
   },
   series: [
      {
         name: '得分',
         type: 'gauge',
         detail: { formatter: '{value}%' },
         data: [{ value: 75, name: '得分' }],
         radius: '70%',
         center: ['50%', '50%'],
         startAngle: 200,
         endAngle: -20,
         splitNumber: 10, // 分割线的数量
         axisLine: {
            lineStyle: {
               width: 18,
               color: [
                  [0.2, '#008FFF'],
                  [0.3, '#00A2E8'],
                  [0.4, '#00C3CD'],
                  [0.5, '#00E7BB'],
                  [0.6, '#00E79F'],
                  [0.7, '#8CDC00'],
                  [0.8, '#FFD306'],
                  [0.9, '#FFB700'],
                  [1, '#FF7D00']
               ]
            }
         },
         axisTick: {
            length: 12,
            lineStyle: {
               color: 'auto',
            }
         },
         splitLine: {
            length: 20,
            lineStyle: {
               color: 'auto',
            }
         },
         pointer: {
            width: 5,
            length: '80%',
            shadowColor: '#ccc', //默认透明
            shadowBlur: 5,
            shadowOffsetX: 3,
            shadowOffsetY: 3
         },
         title: {
            show: true,
            offsetCenter: [0, '-30%'],
            textStyle: {
               color: '#333',
               fontSize: 30
            }
         },
         detail: {
            show: true,
            offsetCenter: [0, '40%'],
            textStyle: {
               color: 'auto',
               fontSize: 40
            }
         },
         data: [{ value: value, name: '仪表盘' }],
         animationDuration: 4000, // 仪表盘动画时间
      }
   ]
};