Echarts在线免费图表

 
            
  const value = 78
  const data = [
    {
      name: '已完成',
      value: value,
      itemStyle: {
        decal: {
          color: '#3544de',
          backgroundColor: '#5968fe',
          dashArrayX: [2, 0],
          dashArrayY: [10, 20],
          rotation: -Math.PI / 4,
        },
      },
    },
    {
      name: '未完成',
      value: 100 - value,
      emphasis: {
        disabled: true,
      },
      itemStyle: {
        color: '#E8ECFC',
      },
    },
  ];
option = {
    tooltip: { show: false },
    legend: {
      show: false,
    },
    series: [
      {
        name: '进度',
        type: 'pie',
        radius: ['40%', '55%'],
        center: ['50%', '50%'],
        clockwise: true,
        label: {
          position: 'center',
          formatter: `{val| ${value}%}\n{name|填报进度}`,
          rich: {
            val: {
              fontSize: 32,
              fontWeight: 500,
              color: 'rgba(0, 0, 0, 0.85)',
              fontFamily: 'Oswald-Regular, Oswald',
            },
            name: {
              fontSize: 18,
              fontWeight: 400,
              padding: [10, 0, 0, 0],
              color: 'rgba(0, 0, 0, 0.65)',
              fontFamily: 'PingFangSC-Regular, PingFang SC',
            },
          },
        },
        roseType: 'radius',
        data: data,
      },
    ],
};