React+Echarts 实时数据监控刷新

import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
// 使用样式
import 'echarts/theme/macarons'
import axios from 'axios'
class edg1 extends React.Component {

  componentDidMount() {
    var container = document.getElementById('charts');
    // 初始化echarts对象
    var myContainer = echarts.init(container);
    var base = + new Date();
    var oneDay = 1000;
    var date = [];

    var data = [100];
    var data1 = [10];
    var data2 = [30];
    var now = new Date(base);
    var day = 30;
    var a = 10;
    var b = 100;
    var c = 10;
    function addData(shift) {
      now = [now.getFullYear(), now.getMonth() + 1, now.getDate(), now.getHours()].join('/') + ":" + now.getMinutes() + ":" + now.getSeconds();
      console.log(now)
      date.push(now);
      a = a + 1;
      b = b - 1;
      data.push(b);
      data1.push(a);
      axios.get('/asd/getJiankongData',)
        .then(function (response) {
          console.log(response.data.height);
          c=response.data.height;
        });
      data2.push(c);
      if (shift) {
        date.shift();
        data.shift();
        data1.shift();
        data2.shift();
      }
      now = new Date();

    }

    for (var i = 0; i < day; i++) {
      addData();
    }
    //设置图标配置项
    myContainer.setOption({
      legend: {
        data: ['出油油位', '入油油位', '管道油位']
      },
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '0%',
        right: '5%',
        bottom: '2%',
        containLabel: true
      },
      title: {
        text: '油罐油位监控'
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
        data: date,
        name: '时间',
        axisLabel: {
          interval: 0,
          rotate: 90
        }
      },
      yAxis: {
        boundaryGap: [0, '10%'],
        type: 'value',
        name:'油位/m'
      },
      series: [{
        name: '出油油位',
        type: 'line',
        smooth: true, //数据光滑过度
        symbol: 'none', //下一个数据点

        areaStyle: {
          normal: {
            color: 'pink'
          }
        },
        data: data
      },
      {
        name: '入油油位',
        type: 'line',
        smooth: true, //数据光滑过度
        symbol: 'none', //下一个数据点

        areaStyle: {
          normal: {
            color: 'pink'
          }
        },
        data: data1
      },
      {
        name: '管道油位',
        type: 'line',
        smooth: true, //数据光滑过度
        symbol: 'none', //下一个数据点

        areaStyle: {
          normal: {
            color: 'pink'
          }
        },
        data: data2
      }
      ]
    })

    setInterval(function () {
      addData(true);
      myContainer.setOption({
        xAxis: {
          data: date
        },
        series: [{
          name: '出油油位',
          data: data
        },
        {
          name: '入油油位',
          data: data1
        },
        {
          name: '管道油位',
          data: data2
        }]
      });
    }, 1000)

    // 绘制图表

  }
  render() {
    return (
      <div id="charts" style={{ width: '80%', height: '80%' }}></div>
    )
  }
}
export default edg1