Echarts在线免费图表

 
            option = {
   backgroundColor:'#050f1b',
      angleAxis: {
   show: false,
   max: (100 * 360) / 265,
   type: 'value',
   startAngle: 223,
   splitLine: {
      show: false,
   },
},
   legend: {
   show: false,
    },

radiusAxis: {
   show: false,
      type: 'category',
         z: 10,
    },
polar: {
   //圆环大小
   radius: '110%',
    },
series: [{
   // 进度条
   type: 'bar',
   barWidth:10,
   data: [{
      value: 100,
      itemStyle: {
         color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{
               offset: 0,
               color: 'rgba(237, 67, 79, 1)',
            },
            {
               offset: 0.2,
               color: 'rgba(237, 67, 79, .5)',
            },
            {
               offset: 0.4,
               color: 'rgba(253, 173, 67, 1)',
            },
            {
               offset: 0.6,
               color: 'rgba(253, 173, 67, .5)',
            },
            {
               offset: 0.8,
               color: 'rgba(17, 195, 114, .5)',
            },
            {
               offset: 1,
               color: 'rgba(17, 195, 114, 1)',
            },
            ],
            global: false,
         },
      },
   },],
   barGap: '-100%',
   coordinateSystem: 'polar',
   roundCap: true,
   z: 2,
   animationDuration: 1500,
},
{
   type: 'gauge',
   center: ['50%', '50%'],
   radius: '31%',
   startAngle: 226,
   min: 0,
   max: 100,

   axisLine: {
      show: true,
      lineStyle: {
         width: 1.5,
         color: [
            [
               1,
               {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                     offset: 0,
                     color: 'rgba(255, 255, 255, 0.2)',
                  },
                  {
                     offset: 0.6,
                     color: 'rgba(255, 255, 255, 1)',
                  },
                  {
                     offset: 0.7,
                     color: 'rgba(255, 255, 255, .5)',
                  },
                  {
                     offset: 1,
                     color: 'rgba(255, 255, 255, 0.1)',
                  },
                  ],
                  global: false,
               },
            ],
         ],
         shadowColor: '#D9D9D9',
         shadowBlur: 10,
         shadowOffsetX: 0,
         shadowOffsetY: -4,
      },
   },
   axisLabel: {
      show: false,
   },
   pointer: {
      // 指针样式
      showAbove: true,
      offsetCenter: [0, '-60%'],
      itemStyle: {
         color: 'auto', // 随刻度区间颜色变化
      },
   },
   data: [{
      value: 90,
   },],
   detail: {
      color: '#fff',
      offsetCenter: ['0%', '-0%'],
   },
   axisTick: {
      splitNumber: 1,
      lineStyle: {
         color: '#294b96',
         width: 2,
      },
      length: 0,
   },
   splitLine: {
      length: 0,
      lineStyle: {
         color: 'rgba(63,250,250,0.8)',
         width: 2,
      },
   },
},
{
   // 进度条外框
   name: '外部进度条',
   type: 'gauge',
   center: ['50%', '50%'],
   radius: '60%',
   startAngle: 226,
   splitNumber: 520,
   axisLabel: {
      show: true,
      distance: 14,
      color: '#fff',
      fontSize: 16,
      formatter: (params) => {
         if ([0, 50, 100].includes(params)) {
            return params
         }
         console.log('params', params)
      },
   },
   axisLine: {
      show: true,
      lineStyle: {
         width: 1.5,
         color: [
            [
               1,
               {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                     offset: 0,
                     color: 'rgba(255, 255, 255, 0.2)',
                  },
                  {
                     offset: 0.6,
                     color: 'rgba(255, 255, 255, 1)',
                  },
                  {
                     offset: 0.7,
                     color: 'rgba(255, 255, 255, .5)',
                  },
                  {
                     offset: 1,
                     color: 'rgba(255, 255, 255, 0.1)',
                  },
                  ],
                  global: false,
               },
            ],
         ],
         shadowColor: '#D9D9D9',
         shadowBlur: 10,
         shadowOffsetX: 0,
         shadowOffsetY: -4,
      },
   },

   axisTick: {
      show: false,
   },
   splitLine: {
      distance: 0,
      length: 66,
      lineStyle: {
         color: '#444954',
         width: 1,
         opacity: 1,
      },
   },
   itemStyle: {
      show: false,
   },
   pointer: {
      show: false,
   },
   data: [{
      value: 90,
   },],
   detail: {
      color: '#fff',
      offsetCenter: ['0%', '70%'],
      formatter: '得分',
   },
},
],
};