dva

import React, { PureComponent } from "react";
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape
} from "bizcharts";
import moment from 'moment';

export default class PieChart extends PureComponent {
  state = {
    chartHight: 200
  }
  componentWillMount = () => {
    this.loadDataLength(this.props.data);
  }
  sortTime = (date) => {
    date.sort((a, b) => {
      return new Date(a.x).getTime() - new Date(b.x).getTime();
    });
    return date;
  }
  loadDataLength = data => {
    this.setState({
      chartHight: data.length * 25
    });
  }
  render() {
    const { data } = this.props;
    const { chartHight } = this.state;
    const _data = data && data.map(d => ({ ...d, y: Number(d.y) })); // 过滤y轴的字符串变成数字
    if (data) this.sortTime(_data); // 给时间排序
    const scale = {
      x: {
        // alias: "时间",
        type: "cat",
        formatter: value => moment(value).format('YYYY-MM-DD HH:mm:ss'),
        // 初始化x轴的值
        // mask: "YYYY/MM/DD HH:mm:ss",
        // tickCount: 18
      },
      y: {
        alias: '分布',
        // 设置y轴
      },
      box: { alias: '分箱' }
    };
    return (
      <div>
        <Chart
          forceFit
          height={chartHight}
          data={_data}
          scale={scale}
          padding='auto'
        >
          <Axis name="x" />
          <Axis name="y" />
          <Legend position="bottom" />
          <Tooltip crosshairs={{ type: "y" }} />
          <Geom type="line" position="x*y" color="box" />
          <Legend name="isSuccess" visible={false} />
          <Geom
            type='point' // 用来设置图标中的点 如 点图 折线图等等
            position="x*y" // 用来设置显示的位置 横轴和纵轴
            shape='circle' // 显示的样式
            size={['isSuccess', (isSuccess) => {
              // 设置圆点的大小半径
              if (isSuccess === 'false' || isSuccess === false) {
                  return 5;
                }
                return 0;
              }]}
            color='#f5222d'
          />
        </Chart>
      </div>
    );
  }
}