Ant Design中建立图表

需求：

1.首先我们引入bizcharts ，这是官方推荐的

npm install bizcharts --save

2.页面引入，按需引入

import { G2, Chart, Geom, Axis, Tooltip, Coord, Label, Legend, View, Guide, Shape, Facet, Util } from "bizcharts";

3.编写数据

const mydata = [
		  {
			time: "10:10",
			call: 4,
			waiting: 2,
			people: 2
		  },
		  {
			time: "10:15",
			call: 2,
			waiting: 6,
			people: 3
		  },
		  {
			time: "10:20",
			call: 13,
			waiting: 2,
			people: 5
		  },
		  {
			time: "10:25",
			call: 9,
			waiting: 9,
			people: 1
		  },
		  {
			time: "10:30",
			call: 5,
			waiting: 2,
			people: 3
		  }
		];
		const scale = {
		  call: {
			min: 0
		  },
		  people: {
			min: 0
		  },
		  waiting: {
			min: 0
		  }
		};

<Chart height={300} scale={scale} forceFit data={mydata}
	onGetG2Instance={chart => {
	chartIns = chart;
}}>
	<Legend custom={true} allowAllCanceled={true}
		items={[
			{
				value: "waiting",
				marker: {
				    symbol: "square",
				    fill: "#3182bd",
				    radius: 5
			    }
		    },
			{
				value: "people",
				marker: {
					symbol: "hyphen",
					stroke: "#ffae6b",
					radius: 5,
					lineWidth: 3
				}
			}
		]}
		onClick={ev => {
			const item = ev.item;
			const value = item.value;
			const checked = ev.checked;
			const geoms = chartIns.getAllGeoms();
			for (let i = 0; i < geoms.length; i++) {
				const geom = geoms[i];
				if (geom.getYScale().field === value) {
					if (checked) {
						geom.show();
					} else {
						geom.hide();
					}
				}
			}
		}}/>
		<Axis name="people" grid={null}
			label={{
				textStyle: {
					fill: "#fdae6b"
				}
			}}/>
	<Tooltip />
	<Geom type="interval" position="time*waiting" color="red" /> //圆柱
	<Geom type="line" position="time*people" color="blue" size={3} /> //折线 
   shape="smooth"此参数会使线变成曲线
	<Geom type="point" position="time*people" color="#000" size={3} shape="circle" /> //标点
</Chart>