Echarts在线免费图表

 
            let angle = 0; //角度，用来做简单的动画效果的
let value = 100;
option = {
   backgroundColor: '#000E1A',
   title: [{
      text: '',
      x: '50%',
      y: '40%',
      textAlign: 'center',
      textStyle: {
         fontSize: '70',
         fontWeight: '100',
         color: '#79ffff',
         textAlign: 'center',
      },
   },],
   polar: {
      radius: ['85%', '81%'],
      center: ['50%', '50%'],
   },
   angleAxis: {
      max: 100,
      show: false,
      startAngle: 0,
   },
   radiusAxis: {
      type: 'category',
      show: true,
      axisLabel: {
         show: false,
      },
      axisLine: {
         show: false,

      },
      axisTick: {
         show: false
      },
   },
     graphic: {//中间放图片
    elements: [{
      type: 'image',
      z: 3,
      style: {
      //   image: imgURL,//图片
        width: 42,
        height: 50,
      },
      left: 'center',
      top: 'center',
    },],
  },
   series: [
      // 紫色线
      {
         name: "ring5",
         type: 'custom',
         coordinateSystem: "none",
         renderItem: function (params, api) {
            return {
               type: 'arc',
               shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8,
                  startAngle: (-90 + angle) * Math.PI / 180,
                  endAngle: (-270 + angle) * Math.PI / 180
               },
               style: {
                  stroke: "#8383FA",
                  fill: "transparent",
                  lineWidth: 1.5
               },
               silent: true
            };
         },
         data: [0]
      },
      {
         name: "ring5", //紫点
         type: 'custom',
         coordinateSystem: "none",
         renderItem: function (params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.8;
            let point = getCirlPoint(x0, y0, r, (90 + angle))
            return {
               type: 'circle',
               shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
               },
               style: {
                  stroke: "#8450F9", //绿
                  fill: "#8450F9"
               },
               silent: true
            };
         },
         data: [0]
      },
      {//绿色线
         name: "ring5",
         type: 'custom',
         coordinateSystem: "none",
         renderItem: function (params, api) {
            return {
               type: 'arc',
               shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
                  startAngle: (-90 + -angle) * Math.PI / 180,
                  endAngle: (90 + -angle) * Math.PI / 180
               },
               style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5
               },
               silent: true
            };
         },
         data: [0]
      },
      {//绿点
         name: "ring5",
         type: 'custom',
         coordinateSystem: "none",
         renderItem: function (params, api) {
            let x0 = api.getWidth() / 2;
            let y0 = api.getHeight() / 2;
            let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
            let point = getCirlPoint(x0, y0, r, (270 + -angle))
            return {
               type: 'circle',
               shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4
               },
               style: {
                  stroke: "#0CD3DB", //绿
                  fill: "#0CD3DB"
               },
               silent: true
            };
         },
         data: [0]
      },
      {//最外面圈线
         type: 'pie',
         radius: ['84%', '85%'],
         center: ['50%', '50%'],
         data: [{
            hoverOffset: 1,
            value: 100,
            name: '',
            itemStyle: {
               color: '#0FCFED',
            },
            label: {
               show: false
            },
            labelLine: {
               normal: {
                  smooth: true,
                  lineStyle: {
                     width: 0
                  }
               }
            },
         },
         ]
      },
      {   //第二层环
         name: name,
         type: 'pie',
         radius: ['60%', '70%'],
         silent: true,
         clockwise: false,
         startAngle: 0,

         endAngle: 360,

         z: 1,
         zlevel: 0,
         label: {
            normal: {
               position: "center",

            }
         },
         data: [{
            value: 100,
            name: "",
            itemStyle: {
               normal: {
                  color: 'rgb(105,206,195)',
               }
            }
         },
       
         ]
      },
      {
         name: "刻度间隔",
         z: 2,
         type: "gauge",
         radius: '73.5%',
         center: ['50%', '50%'],
         startAngle: 0,
         endAngle: 360,
         splitNumber: 40,
         hoverAnimation: true,
         axisTick: {
            show: true,
            splitNumber: 1,
            length: '14%',
            lineStyle: {
               width: 10,
               color: 'rgb(4,31,62)'
            }
         },
         splitLine: {
            show: false,
         },
         axisLabel: {
            show: false
         },
         pointer: {
            show: false
         },
         axisLine: {
            lineStyle: {
               opacity: 0,
            }
         },
         detail: {
            show: false
         },
         data: [100]
      },




   ]
};

//获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
function getCirlPoint(x0, y0, r, angle) {
   let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
   let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
   return {
      x: x1,
      y: y1
   }
}

function draw() {
   angle = angle + 3
   myChart.setOption(option, true)
   //window.requestAnimationFrame(draw);
}

setInterval(function () {
   //用setInterval做动画感觉有问题
     draw()
}, 100);