Echarts在线免费图表

 
            let point = 120  //环形图的具体  百分比
let total = 300
const option = {
  title: { // 圆环中央文字
    show: true, // 是否显示
    text: point + '',
    subtext: '分数',
    textStyle: {
      fontSize: 20,
      fontWeight: 700,
      lineHeight: 12,
      color: '#303030'
    },
    subtextStyle: {
      fontSize: 16,
      fontWeight: 600,
      lineHeight: 20,
      color: '#9b9b9b'
    },
    textAlign: 'center',
    left: '49.5%',
    top: '45%'
  },
  series: [
    {
      // name: '访问来源1',
      type: 'pie',
      radius: [80, 100],
      center: ['50%', '50%'],
      data: [
        {
          value: 80,  //对应显示的部分数据即100%
          itemStyle: {
            normal: {
              borderRadius: 15,
              color: '#e9e9e9'
            }
          }
        },
        {
          value: 20,
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,0)'//透明
            }
          }
        }
      ],
      startAngle: -127,//起始角度，支持范围[0, 360]。
      minAngle: 0, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
      label: {
        show: false,
        position: 'center'
      },
    },
    {
      // name: '访问来源2',
      type: 'pie',
      showEmptyCircle: true,//是否在无数据的时候显示一个占位圆。
      radius: [80, 100],
      avoidLabelOverlap: true,// 标签重叠时进行调整
      center: ['50%', '50%'],
      data: [
        {
          value: point / total * 100 * 0.8,
          itemStyle: {
            normal: {
              borderRadius: 15,//圆角
              color: { // 设置渐变色
                type: 'linear',
                colorStops: [
                  {
                    offset: 0, color: '#01b8b2' // 0% 处的颜色
                  },
                  {
                    offset: 1, color: '#12a0fd' // 100% 处的颜色
                  }
                ],
              }
            }
          }
        },
        {
          value:  (total-point) / total * 100 * 0.8, //百分比
          itemStyle: {
            normal: {
               borderRadius: 15,//圆角
              color: 'rgba(255,255,255,0)'  //透明
            }
          }
        },
        {
          value:  20, //百分比
          itemStyle: {
            normal: {
              color: 'rgba(255,255,255,0)'  //透明
            }
          }
        }
      ],
      startAngle: -127,//起始角度，支持范围[0, 360]。
      // minAngle: 0, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
      label: {
        show: false,
        position: 'center'
      },
    },

  ]
}