Echarts在线免费图表

 
            // 指定图表的配置项和数据
let angle = 0; //角度，用来做简单的动画效果的
var value = 0.35;
var data = [value, value];
var option = {
   backgroundColor: '#010414',
   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.65,
               startAngle: (0 + 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) {
         return {
            type: 'arc',
            shape: {
               cx: api.getWidth() / 2,
               cy: api.getHeight() / 2,
               r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
               startAngle: (180 + angle) * Math.PI / 180,
               endAngle: (270 + 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) {
         return {
            type: 'arc',
            shape: {
               cx: api.getWidth() / 2,
               cy: api.getHeight() / 2,
               r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.7,
               startAngle: (270 + -angle) * Math.PI / 180,
               endAngle: (40 + -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) {
         return {
            type: 'arc',
            shape: {
               cx: api.getWidth() / 2,
               cy: api.getHeight() / 2,
               r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.7,
               startAngle: (90 + -angle) * Math.PI / 180,
               endAngle: (220 + -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.7;
         let point = getCirlPoint(x0, y0, r, (90 + -angle));
         return {
            type: 'circle',
            shape: {
               cx: point.x,
               cy: point.y,
               r: 4
            },
            style: {
               stroke: "#0CD3DB",
               fill: "#0CD3DB"
            },
            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.7;
         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]
   }, {
      name: '水球图',
      type: 'liquidFill',
      outline: {
         show: false
      },
      radius: '60%',
      data: data,
      color: [value<0.3?'#71da74':(value<0.9?'#b04e33':'#f83a07')],
      backgroundStyle: {
         color: new echarts.graphic.RadialGradient(0.5, 0.5, 1.0, [ // 由中心向四周渐变
            {
               offset: 1,
               color: "rgba(42, 72, 132, 0)"
            },
            {
               offset: 0,
               color: "rgba(93, 124, 168, 1)"
            }
         ])
      },
      label: {
         formatter: function(params) {
            if (params.value < 0.3) {
               return '{a|' + '安全' + '}';
            } else if (params.value >= 0.3 && params.value < 0.9) {
               return '{b|' + '低风险' + '}';
            } else if (params.value >= 0.9 && params.value <= 1) {
               return '{c|' + '危险' + '}';
            }

         },
         rich: {
            a: {
               color: '#14d986',
               fontSize: 30
            },
            b: {
               color: '#ba750d',
               fontSize: 30
            },
            c: {
               color: '#ff4848',
               fontSize: 30
            }
         }

      }

   }]
};
//获取圆上面某点的坐标(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 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)
}
setInterval(function() {
   draw()
}, 100);