【原创】Ant Design Charts饼图里的数据动态获取

Ant Design Charts饼图蛮好看的，引入到页面后，如何动态获取值，并展示在前台呢

首先，先从官网上，将该组件的值，复制到父组件对应的位置

动态获取服务端的响应，并赋值饼图的data，如下，代码里的transformedData

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';

const HomeView= () => {
   const [transformedData, setTransformedData] = useState([]);  

   const typeMap = {
      1: '语文',
      2: '数学',
      3: '英语',
    };

    // 获取圆饼图数据的接口
    const analyse = async () => {
      try {
        const res = await Home.analyse();
        if (res.code == 200 && res.data) {
          setTransformedData(res.data.map((item) => ({
            //饼图的分类，展示的为中文，接口返回的数字，通过typeMap进行转换
            type: typeMap[item.type], 
            value: item.count,//饼图里每个分类的数量
          })));
        }
      } catch (error) {
        console.log(error)
      }
    };

  const config = {
    appendPadding: 10,
    data: transformedData,    //注意哦，这里给data赋值，即接口取到的值transformedData
    angleField: 'value',
    colorField: 'type',
    radius: 0.9,
    label: {
      type: 'inner',
      offset: '-30%',
      content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
      style: {
        fontSize: 14,
        textAlign: 'center',
      },
    },
    interactions: [
      {
        type: 'element-active',
      },
    ],
  };

  return (

  <Pie {...config} />    //将该组件放到想要引用的位置去

  );
};

前台展示，如下图