echarts 实时获取数据

html:

<div id="realTimeInvoke" class="chart" style="height: 400px;"></div>

js：

// 初始化 echarts 
var realTimeInvokeChart = echarts.init(document.getElementById(\'realTimeInvoke\'),\'light\');

var timeerOfRealtime; // 实时调用量 定时器

var realTimeInvokeOption = {
    tooltip: {
        trigger: \'axis\'
      },
      toolbox: {
          feature: {
              magicType: {
                  type: [\'bar\', \'line\']
              },
              saveAsImage: {},
          },
      },
      xAxis: {
          type: \'category\',
          boundaryGap : false,
          data: []
      },
      yAxis: {
          type: \'value\',
          scale: false
      },
      series: [
          {
            name: \'调用量\',
            type: \'line\',
            smooth:true,
            areaStyle: { },
            data: [],
          },
      ],
      grid: {
          left: \'5%\',
          right: \'5%\',
      }
};

realTimeInvokeChart.setOption(realTimeInvokeOption);

setIntervalOfRealTime(\'001\');

function setIntervalOfRealTime (id) {
    var postData = [];
    var xAxisDate = [];
    var data = [];

    realTimeInvokeChart.showLoading();
    clearInterval(timeerOfRealtime);

    timeerOfRealtime = setInterval(() => {
        postData = formatDateToArray()[1];
        xAxisDate = formatDateToArray()[0];
        data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        $.ajax({
            url: url`,
            type: \'GET\',
            success: function (res) {
                realTimeInvokeChart.hideLoading();
                res.map((val, index) => {
                    if(postData.includes(val.time)) {
                        data[postData.indexOf(val.time)] = val.succ;
                    }
                })
                realTimeInvokeChart.setOption({
                    xAxis: {
                        data: xAxisDate
                    },
                    series: [{
                        data: data
                    }],
                });
            },
            error: function (response) {
                alert(\'服务器异常！\');
                console.log(response);
                return false;
            }
        });
    }, 1000);
}

// 格式化实时时间
function formatDateToArray () {
    var nowDate = +new Date() - 10000;
    var xAxisDate = [],
        postDate = [];

    for (var i = 0; i < 40; i++) {
        var year = new Date(nowDate).getFullYear();
        var month = new Date(nowDate).getMonth() + 1 < 10 ? \'0\' + (new Date(nowDate).getMonth() + 1) : new Date(nowDate).getMonth() + 1;
        var day = new Date(nowDate).getDate() < 10 ? \'0\' + new Date(nowDate).getDate() : new Date(nowDate).getDate();
        var hour = new Date(nowDate).getHours() < 10 ? \'0\' + new Date(nowDate).getHours() : new Date(nowDate).getHours();
        var minute = new Date(nowDate).getMinutes() < 10 ? \'0\' + new Date(nowDate).getMinutes() : new Date(nowDate).getMinutes();
        var second = new Date(nowDate).getSeconds() < 10 ? \'0\' + new Date(nowDate).getSeconds() : new Date(nowDate).getSeconds();

        xAxisDate.unshift(hour + \':\' + minute + \':\' + second);
        postDate.unshift(year + \'-\' + month + \'-\' + day + \' \' + hour + \':\' + minute + \':\' + second);
        nowDate = nowDate - 1000;
    }

    return [xAxisDate, postDate];
}