Echarts在线免费图表

 
            const value = 80
const maxvalue = 100;
let percent = (value / maxvalue) * 100;
percent = percent.toFixed(0);
let innerWidth = 50;
let innerRadius = "50%";
const detail = {
   show: true,
   color: "#fff",
   fontFamily: 'sans-serif',
   fontSize: 30,
}
const innerColor = [
   [value / maxvalue, new echarts.graphic.LinearGradient(0, 0, 1, 1, [
      {
         offset: 0,
         color: "#18E0E9",
      },
      {
         offset: 1,
         color: "#FFC61A",
      },
   ])],
   [1, "rgba(28,128,245,0)"]
]
const pointerColor = {
   type: 'linear',
   x: 0,
   y: 0,
   x2: 1,
   y2: 1,
   colorStops: [
      {
         offset: 0,
         color: '#FFC61A'
      },
      {
         offset: 1,
         color: '#18E0E9'
      }
   ]
}
option = {
   backgroundColor: "#000",
   tooltip: {
      show: false,
      formatter: '{a} <br/>{b} : {c}%'
   },
   series: [
      {
         type: 'gauge',
         radius: '80%',
         startAngle: '180',
         endAngle: '0',
         splitNumber: 18,
         pointer: {
            show: false
         },
         detail: {
            show: false
         },
         title: {
            show: false
         },
         axisLine: {
            show: false,
            lineStyle: {
               color: [[1, '#FFFFFF']],
               width: 0,
               opacity: 8
            }
         },
         axisTick: {
            show: true,
            splitNumber: 3,
            length: 6,
            lineStyle: {
               width: 5,
               type: [2, 20],
               dashOffset: 5,
               join: 'round'
            }
         },
         splitLine: {
            show: true,
            length: 25,
            lineStyle: {
               color: '#FFFFFF',
               width: 5,
               cap: 'round',
               type: [2, 20],
               dashOffset: 8,
               join: 'round'
            }
         },
         axisLabel: {
            show: true,
            color: '#ffffff',
            distance: -60,
            formatter: function (v) {
               switch (v + '') {
                  case '0':
                     return '0';
                  case '100':
                     return '100';
               }
            }
         },
         animationDuration: 400
      },
      {
         name: '灰色内圈',
         type: 'gauge',
         z: 2,
         radius: innerRadius,
         startAngle: '180',
         endAngle: '0',
         axisLine: {
            lineStyle: {
               color: innerColor,
               fontSize: 20,
               width: innerWidth,
               opacity: 1 //刻度背景宽度
            }
         },
         detail: detail,
         data: [value],
         splitLine: {
            show: false
         },
         axisLabel: {
            show: false
         },
         pointer: {
            show: true,
            length: '100%',
            width: 5,
            itemStyle: {
               color: pointerColor
            }
         },
         axisTick: {
            show: false
         }
      }
   ]
};