使用 @antv/g2 饼图-切片

效果

代码(copy 以下代码到 antv 编辑器)

import DataSet from '@antv/data-set';
import { Chart } from '@antv/g2';

const data = [];
for (let i = 0; i < 8; i++) {
  data.push({
    type: i + '',
    value: 1,
  });
}
const { DataView } = DataSet;
const dv = new DataView();
dv.source(data).transform({
  type: 'percent',
  field: 'value',
  dimension: 'type',
  as: 'percent',
});

const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
  padding: 40,
});
chart.legend(false);
chart.tooltip({
  showTitle: false,
  showMarkers: false,
});


const intervalView = chart.createView();
intervalView.data(data);
intervalView.coordinate('polar', {
  innerRadius: 0.9,
});
intervalView.axis(false);
intervalView
  .interval()
  .position('type*value')
  .size('type', (val) => {
    if (val % 3 === 0) {
      return 1;
    }
    return 1;
  })
  .color('#444')
  .tooltip(false)
  

const userData = [
  { type: '睡眠', value: 38 },
  { type: '淡茶', value: 30 },
];
const userDv = new DataView();
userDv.source(userData).transform({
  type: 'percent',
  field: 'value',
  dimension: 'type',
  as: 'percent',
});
const pieView = chart.createView();
pieView.data(userDv.rows);
pieView.scale('percent', {
  formatter: (val) => {
    return (val * 100).toFixed(2) + '%';
  },
});
pieView.coordinate('theta', {
  radius: 0.9,
  innerRadius: 0.75,
});
pieView
  .interval()
  .adjust('stack')
  .position('percent')
  .color('type',['#4FC0A6', '#333F5C',])

  pieView
      .annotation()
      .text({
        position: ['50%', '50%'],
        content: () => '68',
        style: {
          fontSize: 56,
          fill: '#000',
          textAlign: 'center',
        },
        offsetY: -18,
      })
      .text({
        position: ['50%', '50%'],
        content: () => '总数',
        style: {
          fontSize: 34,
          fill: '#000',
          textAlign: 'center',
        },
        offsetY: 30,
      });

const bgView = chart.createView();
bgView.coordinate('theta', {
   radius: 1,
  innerRadius: 0.5,
});
bgView.data(dv.rows);
bgView
  .interval()
  .adjust('stack')
  .position('percent')
  .color('type',['rgba(255, 255, 255,0)'])
  .style({
    stroke: '#fff',
    lineWidth: 5
  })

    const view2 = chart.createView();
    view2.data(dv.rows);
    view2.coordinate('theta', {
      innerRadius: 0.9,
      radius: 1,
    });

    view2
      .interval()
      .position('percent')
      .color('#213F7F')
      .size(1)
      .animate({
        appear: {
          animation: 'wave-in',
          duration: 1000,
          delay: 1000,
        },
      });
  chart.render()