BizCharts
一、柱状图
-
柱状图效果：
代码：
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 (
{
if (sla > 0.9960)
return 'green';
else
return '#ff0000';
}
]} >
);
}
}
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",
},
{
date: "0615",
sla: 0.9970,
from: "standard",
},
{
date: "0616",
sla: 0.9969,
from: "actual",
},
{
date: "0616",
sla: 0.9970,
from: "standard",
},
{
date: "0617",
sla: 0.9990,
from: "actual",
},
{
date: "0617",
sla: 0.9970,
from: "standard",
},
{
date: "0618",
sla: 0.9995,
from: "actual",
},
{
date: "0618",
sla: 0.9970,
from: "standard",
},
{
date: "0619",
sla: 0.9986,
from: "actual",
},
{
date: "0619",
sla: 0.9970,
from: "standard",
},
];
const scale_membership = {
date: {
alias: "membership",
},
sla: {
tickInterval: 0.001,
min: 0.9950,
max: 1.00,
},
};
return (
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
`${val}`
}}
/>
);
}
}
export default QualityReporyCurved;