text: import React, { Component } from 'react';
  
  import { MiniArea } from 'components/Charts';
  import { NumberInfo } from 'jltd';
  
  import styles from './index.less';
  
  function fixedZero(val) {
    return val * 1 < 10 ? `0${val}` : val;
  }
  
  function getActiveData() {
    const activeData = [];
    for (let i = 0; i < 24; i += 1) {
      activeData.push({
        x: `${fixedZero(i)}:00`,
        y: Math.floor(Math.random() * 200) + i * 50,
      });
    }
    return activeData;
  }
  
  export default class ActiveChart extends Component {
    state = {
      activeData: getActiveData(),
    };
  
    componentDidMount() {
      this.timer = setInterval(() => {
        this.setState({
          activeData: getActiveData(),
        });
      }, 1000);
    }
  
    componentWillUnmount() {
      clearInterval(this.timer);
    }
  
    render() {
      const { activeData = [] } = this.state;
  
      return (
        <div className={styles.activeChart}>
          <NumberInfo subTitle="目标评估" total="有望达到预期" />
          <div style={{ marginTop: 32 }}>
            <MiniArea
              animate={false}
              line
              borderWidth={2}
              height={84}
              scale={{
                y: {
                  tickCount: 3,
                },
              }}
              yAxis={{
                tickLine: false,
                label: false,
                title: false,
                line: false,
              }}
              data={activeData}
            />
          </div>
          {activeData && (
            <div className={styles.activeChartGrid}>
              <p>{[...activeData].sort()[activeData.length - 1].y + 200} 亿元</p>
              <p>{[...activeData].sort()[Math.floor(activeData.length / 2)].y} 亿元</p>
            </div>
          )}
          {activeData && (
            <div className={styles.activeChartLegend}>
              <span>00:00</span>
              <span>{activeData[Math.floor(activeData.length / 2)].x}</span>
              <span>{activeData[activeData.length - 1].x}</span>
            </div>
          )}
        </div>
      );
    }
  }
  