使用 @antv/g2plot 的仪表盘做饼图并切片

使用 @antv/g2plot 的仪表盘做饼图并切片

效果

上代码编辑器粘贴代码即可

import { Gauge } from '@antv/g2plot';

const gauge = new Gauge('container', {
  percent: 0.8,
  range: {
    color: '#3D76DD',
  },
  startAngle: 4.76,
  endAngle: 4.71,
  indicator: null,
  type: 'meter',
  radius: 1,
  innerRadius: .8,
  meter: {
    steps: 8,
    stepRatio: 0.95,
  },
  tooltip: {
    title: '13221',
    formatter: (datum) => {
      return { name: datum.x, value: datum.y + '%' };
    },
  },
  label: {
    type: 'outer',
  },
  statistic: {
    title: {
      offsetY: 220,
      style: {
        fontSize: '88px',
        color: '#4B535E',
      },
      formatter: () => '80%',
    },
    content: {
      offsetY: 330,
      style: {
        fontSize: '36px',
        lineHeight: '44px',
        color: '#000',
      },
      formatter: () => '加载进度',
    },
  },
});

gauge.render();