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';
                }
                ]}