Echarts在线免费图表

 
            
const data = [
  {value: 50, name: '低'},
  {value: 60, name: '中'},
  {value: 70, name: '高'}
]
option = {
   
      tooltip: {
        trigger: 'item'
        // formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      series: [

        {
          name: '总报警',
          type: 'pie',
          radius: ['0%', '40%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          silent: true,
          label: {
            //  show:false,
            formatter: ''
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 13,
              fontWeight: 'bold'
            }
          },
          data: [
            {value: 50, name: '低', itemStyle: { color: 'rgb(0 0 0)'}},
            // {value: 60, name: '中', itemStyle: { color: 'rgb(134 57 57)'}},
            // {value: 70, name: '高', itemStyle: { color: 'rgb(64 122 145)'}}
          ]
        },
        {
          type: 'custom',
          coordinateSystem: 'none',
          silent: true,
          data: [0],
          renderItem(params, api) {
            //环形图半径
            const r = Math.min(api.getWidth(), api.getHeight()) / 2
            //圆心
            const center = {
              x: api.getWidth() / 2,
              y: api.getHeight() / 2
            }
            //大圆半径
            const rBig = r * 0.9
            //小圆半径
            const rSmall = r * 0.78
            //大圆上的扇形
            const bigSector = []
             const bigSector1 = []
            const smallSector = []
            const circleOnCircle = [] //小圆上携带的小圆圈
            const sectorSize = 60 //扇形长度（弧度）
            const sectorInterval = 30 //扇形与扇形之间的间隔
            const BigStartAngle = 310 //大扇形起始角度
            for (let i = 0; i < 4; i++) {
              const startAngle = ((i * (sectorInterval + sectorSize) + BigStartAngle) * Math.PI) / 180
              const endAngle = startAngle + (sectorSize * Math.PI) / 180
              const smallStartAngle = (Math.PI / 180) * (280 + angle + i * (sectorSize + sectorInterval))
              const smallEndAngle = smallStartAngle + (sectorSize * Math.PI) / 180
              bigSector.push({
                type: 'sector',
                shape: {
                  cx: center.x,
                  cy: center.y,
                  r: rBig,
                  r0: rBig * 0.97,
                  startAngle,
                  endAngle
                },
                style: {
                  fill: '#19AAC0',
                  lineWidth: 2
                }
              })
            // -------------------------
             bigSector1.push({
                type: 'sector',
                shape: {
                  cx: center.x,
                  cy: center.y,
                  r: rBig*0.6,
                  r0: rBig * 0.57,
                  startAngle,
                  endAngle
                },
                style: {
                  fill: 'red',
                  lineWidth: 2
                }
              })
            //   ------------------
              smallSector.push({
                type: 'sector',
                shape: {
                  cx: center.x,
                  cy: center.y,
                  r: rSmall * 0.93,
                  r0: rSmall * 0.87,
                  startAngle: smallStartAngle,
                  endAngle: smallEndAngle
                },
                style: {
                  fill: '#19AAC0',
                  lineWidth: 2
                }
              })
              circleOnCircle.push({
                type: 'circle',
                shape: {
                  cx: getCirclePoint(center.x, center.y, rSmall, 270 + i * 90 -angle).x,
                  cy: getCirclePoint(center.x, center.y, rSmall, 270 + i * 90 - angle).y,
                  r: 2
                },
                style: {
                  fill: '#19AAC0',
                  stroke: '#19AAC0',
                  lineWidth: 2
                }
              })
            }
            return {
              type: 'group',
              children: [
                  {   //最外面线环
                      type: 'arc',
                      shape: {
                        cx: center.x,
                        cy: center.y,
                        r: rBig+50
                      },
                      style: {
                        fill: 'transparent',
                        stroke: '#19AAC0',
                        lineWidth: 5
                      }
                    },
                {
                  type: 'group',
                  children: [
                    ...bigSector,//第二层圆环的4个弧形
                    {   //第二层线环
                      type: 'arc',
                      shape: {
                        cx: center.x,
                        cy: center.y,
                        r: rBig
                      },
                      style: {
                        fill: 'transparent',
                        stroke: '#19AAC0',
                        lineWidth: 2
                      }
                    }
                  ]
                },
                {
                  //内圆环
                  type: 'group',
                  children: [
                    ...smallSector,//第三个圆环的弧形
                  //   ...circleOnCircle,//第二个环上的点
                  //   {
                  //     //内圆 第二个线圆环
                  //     type: 'arc',
                  //     shape: {
                  //       cx: center.x,
                  //       cy: center.y,
                  //       r: rSmall
                  //     },
                  //     style: {
                  //       fill: 'transparent',
                  //       stroke: '#55EAF1',
                  //       lineWidth: 2
                  //     }
                  //   }
                  ]
                },
                 {
                  type: 'group',
                  children: [
                    ...bigSector1,//第二层圆环的4个弧形
                    {   //第二层线环
                      type: 'arc',
                      shape: {
                        cx: center.x,
                        cy: center.y,
                        r: rBig*0.6
                      },
                      style: {
                        fill: 'transparent',
                        stroke: 'red',
                        lineWidth: 2
                      }
                    }
                  ]
                },
              ]
            }
          }
        }
      ]
    }

    
//获取圆上某点的坐标(x0、y0表示坐标，r半径，angle角度)
  function getCirclePoint(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
    }
  }

//添加旋转动画
let timer
let angle = 0 
function play() {
  angle += 3
  option && myChart.setOption(option)
  if (timer) return
  timer = setTimeout(() => {
    requestAnimationFrame(play)
    timer = null
  }, 28)
}

//过渡完成后开始动画
myChart.on('finished', () => {
  play()
})