Bizchart+antd+react怎么生成多个最大值的单行玉珏图

在看biz的官方文档的时候看到里头关于玉珏图的例子，不过看里面的玉珏图都是很多条堆叠的：

可是我不想这样，我就想一个一个分出来，应该咋办嘞

如果在实际的项目需求中想要生成多个单行玉珏图的话，就需要map映射每个单个单行玉珏图元素，这样才能生成需要的个数的单行玉珏图

关于如何实现呢，我讲一讲我的思路：

我是分成两个js文件：一个用来画出单个玉珏图的形状，一个用来接收数据并通过映射，根据数据层发送的数据画出相应个数的玉珏图

首先，我的数据是这样子的，不同的名字对应不同的玉珏图：

然后，先做单个玉珏图：

import React, { Component } from 'react';
import { Chart, Coordinate, Interval, Annotation, Guide } from 'bizcharts';
import { connect } from 'umi';
import { Empty } from 'antd';

//这边定义的是饼图的颜色大小以及显示文字
const colorType = {
	1: '#3AA1FE',
	2: '#B9E0A9',
	3: '#FBD437',
	4: '#FFC0CB'
};

class Pie extends Component {
	constructor(props) {
		super(props);
		this.state = {
			loading: true
		};
	}

	render() {
		const data = [
			{
				business: this.props.name,
				value: this.props.value,
			}
		];
		return (
			<div>
				{this.props.value !== '' ? (
					<Chart
						height={250}
						autoFit
						data={data}
						scale={{ value: { max: this.props.maxSize } }}
						padding={[ 0, 0, 0, 0 ]}
					>
						<Coordinate type="polar" innerRadius={0.8} radius={0.7} transpose />
						<Annotation.Text
							position={[ '50%', '50%' ]}
							content={this.props.value}
							style={{
								lineHeight: '240px',
								fontSize: '30',
								fill: colorType[this.props.name],
								textAlign: 'center'
							}}
						/>

						{/* <center>
							<div>{this.props.describe}</div>
						</center> */}
						<Interval
							position="business*value"
							tooltip={[
								'value*name',
								(name, value) => {
									return {
										name: this.props.name,
										value: `${this.props.value}`
									};
								}
							]}
							color={colorType[this.props.name]}
						/>
					</Chart>
				) : (
					<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ height: 245 }} />
				)}
			</div>
		);
	}
}
export default connect(({ OAOpage }) => ({
	OAOpage
}))(Pie);

然后再新建一个文件，用来接收数据（平时开发的时候数据都是后端那边过来的）我在这里就po上映射的那块代码（记得要引入antd，因为有个加载框）

return (
		<Spin spinning={loading}>
			<Row>
				{chartData.length !== 0 ? (
					chartData.map((item) => {
						return (
							<Col span={6} key={`col-${item.name}`}>
								{/* <Col span={8} key={`col-${item.name}`}> */}
								{item.value !== ' ' ? (
									<Pie
										key={item.name}
										name={item.name}
										value={item.value}
									/>
								) : (
									<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
								)}
							</Col>
						);
					})
				) : (
					<Col span={24}>
						<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
					</Col>
				)}
			</Row>
		</Spin>
	);
};

这样以后，其他的也差不多了，玉珏图也就是上面的那个样子