Echarts在线免费图表

 
            function randomData() {
   now = new Date(+now + oneDay);
   value = value + Math.random() * 21 - 10;
   return {
      name: now.toString(),
      value: [
         [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-'),
         Math.round(value)
      ]
   }
}

var data = [];
var now = +new Date(2023, 1, 1);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 100; i++) {
   data.push(randomData());
}

option = {
   title: {
      text: '实时监控某一数据的变化'
   },
   tooltip: {
      trigger: 'axis',
      formatter: function (params) {
         params = params[0];
         var date = new Date(params.name);
         return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ':' + params.value[1];
      },
      axisPointer: {
         animation: false
      }
   },
   xAxis: {
      type: 'time',
      splitLine: {
         show: false
      }
   },
   yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      splitLine: {
         show: false
      }
   },
   series: [{
      name: '模拟数据',
      type: 'line',
      showSymbol: false,
      hoverAnimation: false,
      data: data
   }]
};

setInterval(function () {

   for (var i = 0; i < 1; i++) {
      data.shift();
      data.push(randomData());
   }

   myChart.setOption({
      series: [{
         data: data
      }]
   });
}, 1000);