antdesign 柱状图_使用 bizcharts 在react中、AntDesign中实现图表（柱状图、折线图、饼图等）...

(1)安装依赖：

npm install bizcharts --save

npm install @antv/data-set

(2)图表构成的使用

(3)完整代码：

【柱状图】

import React, { Component } from 'react';

import {

Chart,

Geom,

Axis,

Tooltip,

Legend,

} from "bizcharts";

import DataSet from "@antv/data-set";

/**

* 使用bizCharts完成图表

*/

class Line1 extends Component {

render() {

const data = [

{

name: "London",

"Jan.": 18.9,

"Feb.": 28.8,

"Mar.": 39.3,

"Apr.": 81.4,

May: 47,

"Jun.": 20.3,

"Jul.": 24,

"Aug.": 35.6

},

{

name: "Berlin",

"Jan.": 12.4,

"Feb.": 23.2,

"Mar.": 34.5,

"Apr.": 99.7,

May: 52.6,

"Jun.": 35.5,

"Jul.": 37.4,

"Aug.": 42.4

}

];

const ds = new DataSet();

const dv = ds.createView().source(data);

dv.transform({

type: "fold",

fields: ["Jan.", "Feb.", "Mar.", "Apr.", "May", "Jun.", "Jul.", "Aug."],

// 展开字段集

key: "月份",

// key字段

value: "月均降雨量" // value字段

});

return (

)

}

}

export default Line1;

【折线图】：

import React, { Component } from 'react';

import {

Chart,

Geom,

Axis,

Tooltip,

Legend,

} from "bizcharts";

import DataSet from "@antv/data-set";

/**

* 使用bizCharts完成图表

*/

class Line1 extends Component {

render() {

const data = [

{

month: "Jan",

city: "Tokyo",

temperature: 7

},

{

month: "Jan",

city: "London",

temperature: 3.9

},

{

month: "Feb",

city: "Tokyo",

temperature: 6.9

},

{

month: "Feb",

city: "London",

temperature: 4.2

},

{

month: "Mar",

city: "Tokyo",

temperature: 9.5

},

{

month: "Mar",

city: "London",

temperature: 5.7

},

{

month: "Apr",

city: "Tokyo",

temperature: 14.5

},

{

month: "Apr",

city: "London",

temperature: 8.5

},

{

month: "May",

city: "Tokyo",

temperature: 18.4

},

{

month: "May",

city: "London",

temperature: 11.9

},

{

month: "Jun",

city: "Tokyo",

temperature: 21.5

},

{

month: "Jun",

city: "London",

temperature: 15.2

},

{

month: "Jul",

city: "Tokyo",

temperature: 25.2

},

{

month: "Jul",

city: "London",

temperature: 17

},

{

month: "Aug",

city: "Tokyo",

temperature: 26.5

},

{

month: "Aug",

city: "London",

temperature: 16.6

},

{

month: "Sep",

city: "Tokyo",

temperature: 23.3

},

{

month: "Sep",

city: "London",

temperature: 14.2

},

{

month: "Oct",

city: "Tokyo",

temperature: 18.3

},

{

month: "Oct",

city: "London",

temperature: 10.3

},

{

month: "Nov",

city: "Tokyo",

temperature: 13.9

},

{

month: "Nov",

city: "London",

temperature: 6.6

},

{

month: "Dec",

city: "Tokyo",

temperature: 9.6

},

{

month: "Dec",

city: "London",

temperature: 4.8

}

];

const cols = {

month: {

range: [0, 1]

}

};

return (

`${val}°C`

}}

/>

)

}

}

export default Line1;

-------完。以上图表是使用 bizcharts  来完成的。

更多详细的文档，查看bizcharts官网。