一、柱状图
-
柱状图效果:
-
代码:
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=