ant design pro chart的使用
2019-06-27 本文已影响0人
迷糊银儿
一、柱状图
-
柱状图效果：
-
代码：
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 (
<Row gutter={16}>
<Col span={8}>
<div style={{
border: '1px solid #fff',
background: '#fff'
}}>
<Chart height={300}
data={membership}
scale={scale_membership}
forceFit>
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis name="sla" />
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="interval"
position="date*sla"
color={['sla', (sla) => {
if (sla > 0.9960)
return 'green';
else
return '#ff0000';
}
]} >
<Label content={["sla", (sla) => {
return { sla };
}]}
textStyle={{
textAlign: 'start', // 文本对齐方向，可取值为： start middle end
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
rotate: 20,
textBaseline: 'top' // 文本基准线，可取 top middle bottom，默认为middle
}}
/>
</Geom>
</Chart>
</div>
</Col>
<Col span={8}>
<div style={{
border: '1px solid #fff',
background: '#fff'
}}>
<Chart height={300} data={membership} scale={scale_membership} style={chart_style} forceFit>
<Axis name="date" title={true} />
<Axis name="sla" />
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom type="interval" position="date*sla"></Geom>
</Chart>
</div>
</Col>
</Row>
);
}
}
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 (
<div>
<div>
<Row gutter={16}>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff'
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff',
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff',
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff',
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
</Row>
</div>
<div style={{ 'margin-top': 10 }}>
<Row gutter={16}>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff'
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff',
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff',
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff',
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
</Row>
</div>
<div style={{ 'margin-top': 10 }}>
<Row gutter={16}>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff'
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff',
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff',
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
<Col span={6}>
<div style={{
border: '1px solid #fff',
background: '#fff',
}}>
<Chart
height={200}
data={membership}
scale={scale_membership}
forceFit>
<Legend />
<Axis name="date" title
textStyle={{
fill: '#404040', // 文本的颜色
fontSize: '12', // 文本大小
fontWeight: 'bold', // 文本粗细
}}
/>
<Axis
name="sla"
label={{
formatter: val => `${val}`
}}
/>
<Tooltip
crosshairs={{
type: "y"
}}
/>
<Geom
type="line"
position="date*sla"
size={2}
color={"from"}
shape={"smooth"}
/>
<Geom
type="point"
position="date*sla"
size={4}
shape={"circle"}
color={"from"}
style={{
stroke: "#fff",
lineWidth: 1
}}
/>
</Chart>
</div>
</Col>
</Row>
</div>
</div>
);
}
}
export default QualityReporyCurved;
