echarts 实现饼状图？

Question

用 echarts 实现 饼状图 这种

const gaugeData = [
  {
    value: 40,
    name: '447',
    title: {
      offsetCenter: ['0%', '0%']
    },
    detail: {
      color: '#B5B5BE',
      fontWeight: 400,
      fontSize: '14px',
      lineHeight: 24,
      fontFamily: 'PingFangSC-Regular',
      valueAnimation: true,
      offsetCenter: ['0%', '-10%']
    }
  },
];
option = {
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
      },
      axisLine: {
        lineStyle: {
          width: 30
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      data: gaugeData,
      title: {
        fontSize: 14
      },
      detail: {
        formatter: 'QBI  {value}%'
      }
    }
  ]
};

Answer 1

参考配置

const gaugeData = [
  {
    value: 20,
    name: '1000',
    title: {
      offsetCenter: ['0%', '0%']
    },
    detail: {
      valueAnimation: true,
      offsetCenter: ['0%', '-10%']
    }
  },
];
option = {
  series: [
    {
      type: 'gauge',
      startAngle: 90,
      endAngle: -270,
      pointer: {
        show: false
      },
      progress: {
        show: true,
        overlap: false,
        roundCap: true,
        clip: false,
        itemStyle: {
          borderWidth: 1,
          borderColor: '#464646'
        }
      },
      axisLine: {
        lineStyle: {
          width: 40
        }
      },
      splitLine: {
        show: false,
        distance: 0,
        length: 10
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false,
        distance: 50
      },
      data: gaugeData,
      title: {
        fontSize: 18
      },
      detail: {
        width: 50,
        height: 14,
        fontSize: 18,
        color: "#999",
        formatter: 'QBI {value}%'
      }
    }
  ]
};