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} /> //将该组件放到想要引用的位置去
);
};
前台展示,如下图