ECharts connected line chart

by kelvinau

HTML

<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
<div id="main" style="width: 1000px;height:600px;"></div>

JavaScript

var timeData = [{
    time: 'May 01, 2018',
    count: 50
  },
  {
    time: 'May 02, 2018',
    count: 35
  },
  {
    time: 'May 03, 2018',
    count: 25
  },
  {
    time: 'May 04, 2018',
    count: 77
  },
  {
    time: 'May 05, 2018',
    count: 93
  },
  {
    time: 'May 06, 2018',
    count: 10
  },
]

var times = timeData.map(function(item) {
  return item.time;
})

var data = [];
for (var i = 0; i < timeData.length; i++) {
  var dateData = [];
  for (var j = 0; j < i + 1; j++) {
    dateData.push(timeData[j].count);
  }
  data.push(dateData);
}

var xAxisData = ['LNK/Agent.EDF!tr.dldr', 'LNK/Agent.F6C8!tr.dldr', 'VBA/Agent.F442!tr.dldr', 'MSIL/Paradise.A!tr.ransom', 'W32/BDoor.IY!tr.bdr', 'W32/Kasidet.AU!worm'];

var series = data.map(function(item) {
  return {
    series: {
      data: item
    }
  }
});

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


var option = {
  baseOption: {
    timeline: {
      axisType: 'category',
      data: times,
      autoPlay: true,
      bottom: -5,
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        interval: 0,
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'line',
    }]
  },
  options: series

};

myChart.setOption(option);