AntV G2 饼图

import { Chart } from '@antv/g2';

const data = [
  { type: '1岁', value: 340 },
  { type: '2岁', value: 530 },
  { type: '3岁', value: 620 },
  { type: '4岁', value: 470 },
  { type: '5岁', value: 190 },
];

const chart = new Chart({
  container: 'container',
  autoFit: true,
});

chart.data(data);

chart.coordinate('theta');

const interval = chart
  .interval()
  .adjust('stack')
  .position('value')
  .color('type', ['#063d8a', '#1770d6', '#47abfc', '#38c060','green'])
  .label('type', (val) => {
    return {
      offset: -30,
      content: (obj) => {
        return obj.type + '\n' + obj.value;
      },
    };
  });

chart.render();

官方文档

猜你喜欢

转载自blog.csdn.net/qq_36658051/article/details/112257919