12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182 |
- import React, { Component } from 'react';
- import { MiniArea } from '../Charts';
- import NumberInfo from '../NumberInfo';
- 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>
- );
- }
- }
|