hzyhbk / hzyhbk.github.io Goto Github PK

import React, { PureComponent } from 'react';
import _ from 'lodash';
import styled from 'styled-components';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment';

const Root = styled.div``;

type ILineChartProps = {
  className?: string;
  style?: React.CSSProperties;
  rawData: {
    data: IRawChartDataItem[];
    series: {
      name: string;
      data: number[];
      type: 'line';
      areaStyle: {};
    }[];
  };
  loading: boolean;
};
type ILineChartState = {};

class LineChart extends PureComponent<ILineChartProps, ILineChartState> {
  echartRef: any = null;
  clickedLegendName: string;

  getEchartsOption = (selected: { [k: string]: boolean } = {}) => {
    const {
      rawData: { data, series },
    } = this.props;

    const option = {
      grid: {
        top: 24,
        bottom: 8,
        left: 24,
        right: 36,
        containLabel: true,
      },
      legend: { data: series.map(item => item.name), selected },
      tooltip: {
        trigger: 'axis',
        formatter(params: any) {
          let text = '';
          if (_.isArray(params)) {
            text = `${moment(Number(params[0].axisValue)).format(
              'YYYY-MM-DD HH:mm:ss',
            )}<br/>`;
            _.forEach(params, obj => {
              let value = obj.value;
              text = `${text}${obj.marker}${obj.seriesName}: ${value}<br/>`;
            });
          } else {
            text = `${moment(Number(params.axisValue)).format(
              'YYYY-MM-DD HH:mm:ss',
            )}<br/>`;
            text = `${text}${params}${params.seriesName}: ${params.value}`;
          }
          return text;
        },
      },
      xAxis: {
        data: data.map(o => o.timestamp),
        axisLabel: {
          formatter(value: string) {
            return moment(Number(value)).format('HH:mm');
          },
        },
      },
      yAxis: {
        type: 'value',
      },
      series: series,
    };
    return option;
  };

  onLegendSelectChanged = (e: {
    name: string;
    selected: { [k: string]: boolean };
  }) => {
    let selected = Object.assign({}, e.selected);
    if (this.clickedLegendName === e.name) {
      this.clickedLegendName = '';
      Object.keys(selected).forEach(key => {
        selected[key] = true;
      });
    } else {
      this.clickedLegendName = e.name;
      Object.keys(selected).forEach(key => {
        if (key === e.name) {
          selected[key] = true;
        } else {
          selected[key] = false;
        }
      });
    }
    const option = this.getEchartsOption(selected);
    this.echartRef.setOption(option);
  };

  render() {
    const { className, style, loading } = this.props;

    return (
      <Root
        className={className}
        style={style}
      >
        <ReactEcharts
          ref={(ref:any) => (this.echartRef = ref && ref.getEchartsInstance())}
          option={this.getEchartsOption()}
          showLoading={loading}
          onEvents={{
            legendselectchanged: this.onLegendSelectChanged,
          }}
        />
      </Root>
    );
  }
}