EchartsTimeSeries

ECharts Time Series With Zoom

by tmtron

HTML

<script src="//cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

JavaScript

var myChart = echarts.init(document.getElementById('main'));

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(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
data.push([new Date(1995, 2, 2), NaN]);
for (var i = 0; i < 1000; i++) {
  data.push(randomData());
}
data.push([new Date(2005, 0, 1), null]);

option = {
  title: {
    text: 'Time Axis Example'
  },
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      params = params[0];
      var date = new Date(params.name);
      return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
    },
    axisPointer: {
      animation: false
    }
  },
  xAxis: {
    type: 'time',
    showSymbol: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    splitLine: {
      show: false
    }
  },
  series: [{
    name: 'TimeAxis',
    type: 'line',
    showSymbol: false,
    hoverAnimation: false,
    data: data
  }],
  dataZoom: [{
    show: true,
    realtime: true,
  }]
};

/*
       setInterval(function () {

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

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

       */

myChart.setOption(option);