ant design pro chart的使用

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 ( <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;

作者：迷糊银儿
链接：https://www.jianshu.com/p/40b995b4d3bd
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。