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} />;
  }
}