Vẽ chart tròn piechart

#1

> Blockquote
mình có tham khảo package @tiki.vn/tini-f2 v0.2.0 để vẽ chart. mình vẽ được bar chart . nhưng mà tìm doc của antv không thấy piechart nên mình xin giải pháp ạ. tks

#2

hi @Ng_c_b_o_Tr_n

Bạn tham khảo ant F2 version 3 giúp mình nha, tất tần tật các example ở đây: https://f2-v3.antv.vision/en/examples/gallery

Code mẫu pie bạn tham khảo:

image

Component({
  methods: {
    handleDraw(chart) {
      const map = {
        water: '50%',
        milk: '30%',
        juice: '20%'
      };
      const data = [
        { name: 'water', percent: 0.5, a: '1' },
        { name: 'milk', percent: 0.3, a: '1' },
        { name: 'juice', percent: 0.2, a: '1' }
      ];

      chart.source(data, {
        percent: {
          formatter(val) {
            return val * 100 + '%';
          }
        }
      });
      chart.legend({
        position: 'right',
        itemFormatter(val) {
          return val + '  ' + map[val];
        }
      });
      chart.tooltip(false);
      chart.coord('polar', {
        transposed: true,
        radius: 0.85
      });
      chart.axis(false);
      chart
        .interval()
        .position('a*percent')
        .color('name', ['#1890FF', '#FACC14', '#F04864'])
        .adjust('stack')
        .style({
          lineWidth: 1,
          stroke: '#fff',
          lineJoin: 'round',
          lineCap: 'round'
        })
        .animate({
          appear: {
            duration: 1200,
            easing: 'bounceOut'
          }
        });

      chart.render();

      // Must return chart
      return chart;
    }
  }
});