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 (
      <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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。