echarts实时数据图表

import React, { PureComponent } from 'react';
import ReactEcharts from 'echarts-for-react';
import moment from 'moment';

export default class Charts extends PureComponent {
  getOption = () => {
    const { graphName, warn, error, data, timestamp, dataUnit } = this.props;
    const warnData = warn.map(item => ({ yAxis: item }));
    const times = timestamp.map(item => moment(item).format('YYYY-MM-DD HH:mm:ss'));
    const yAxis = Math.max(...warn.concat(error));
    const errorData = error.map(item => ({ yAxis: item }));
    const legend = ['报警点', `红色报警点`];
    const chartData = data.map(item => {
      legend.push(item.name);
      return {
        name: item.name,
        type: 'line',
        symbol: 'none',
        boundaryGap: false,
        smooth: true,
        data: item.data,
      };
    });
    const Option = {};
    Option.title = { text: graphName };
    Option.legend = { data: legend };
    Option.tooltip = { 
      trigger: 'axis',
      axisPointer: {
        animation: false
      }
    };
    Option.xAxis = { 
      type: 'category', 
      data: times, 
      boundaryGap: false,
      axisTick: {
        alignWithLabel: true
      },
      splitLine: {
        show: false
      }
    };
    Option.grid =  {
      bottom: 0,
      containLabel: true
    };
    Option.toolbox = {
      feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {},
            saveAsImage: {}
       }
    };
    Option.yAxis = {
      type: 'value',
      max: yAxis,
      splitLine: {
        show: false
      },
      axisLabel: {
        formatter: `{value}${dataUnit}`
      }
    };
    const warnning = {
      name: '报警点',
      type: 'line',
      clipOverflow: false,
      markLine: {
        data: warnData,
        label: {
          position: 'end',
          formatter: d => {
            return `报警线${d.value}`;
          },
        },
        lineStyle: {
          color: 'orange',
        },
      },
    };
    const errorArr = {
      name: '红色报警点',
      type: 'line',
      clipOverflow: false,
      markLine: {
        data: errorData,
        label: {
          position: 'end',
          formatter: d => {
            return `报警点${d.value}`;
          },
        },
        lineStyle: {
          color: 'red',
        },
      },
    };
    chartData.push(warnning);
    chartData.push(errorArr);
    Option.series = chartData;
    return Option;
  };

  render() {
    const { style } = this.props;
    return <ReactEcharts option={this.getOption()} style={style} />;
  }
}