antdesign 柱状图_ant design pro chart的使用

一、柱状图

柱状图效果：

代码：

import React, { PureComponent } from 'react';

import { connect } from 'dva';

import router from 'umi/router';

import { Row, Col, Table } from 'antd';

import {

Chart,

Axis,

Tooltip,

Geom,

Label

} from "bizcharts";

class QualityReporttest extends PureComponent {

render() {

const membership = [

{

date: "0613",

sla: 0.9960,

},

{

date: "0614",

sla: 0.9958,

},

{

date: "0615",

sla: 0.9970,

},

{

date: "0616",

sla: 0.9989,

},

{

date: "0617",

sla: 0.9990,

},

{

date: "0618",

sla: 0.9995,

},

{

date: "0619",

sla: 1,

}

];

const scale_membership = {

date: {

alias: "membership",

},

sla: {

tickInterval: 0.001,

min: 0.9950,

max: 1.00,

},

};

const chart_style = {

fontSize: '20',

}

return (

border: '1px solid #fff',

background: '#fff'

}}>

data={membership}

scale={scale_membership}

forceFit>

textStyle={ {

fill: '#404040', // 文本的颜色

fontSize: '12', // 文本大小

fontWeight: 'bold', // 文本粗细

}}

/>

crosshairs={ {

type: "y"

}}

/>

type="interval"

position="date*sla"

color={['sla', (sla) => {

if (sla > 0.9960)

return 'green';

else

return '#ff0000';

}

]} >

{

return { sla };

}]}

textStyle={ {

textAlign: 'start', // 文本对齐方向，可取值为： start middle end

fill: '#404040', // 文本的颜色

fontSize: '12', // 文本大小

fontWeight: 'bold', // 文本粗细

rotate: 20,

textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle

}}

/>

border: '1px solid #fff',

background: '#fff'

}}>

crosshairs={ {

type: "y"

}}

/>

);

}

}

export default QualityReporttest;

二、折线图

折线图效果

image.png

代码

import React, { PureComponent } from 'react';

import { connect } from 'dva';

import router from 'umi/router';

import { Row, Col, Table } from 'antd';

import {

Chart,

Legend,

Axis,

Tooltip,

Geom,

Label

} from "bizcharts";

class QualityReporyCurved extends PureComponent {

render() {

const membership = [

{

date: "0613",

sla: 0.9980,

from: "actual",

},

{

date: "0613",

sla: 0.9970,

from: "standard",

},

{

date: "0614",

sla: 0.9978,

from: "actual",

},

{

date: "0614",

sla: 0.9970,

from: "standard",

},

{

date: "0615",

sla: 0.9970,

from: "actual",

},

{

<