echarts example

by shiv_veerashetty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<script src=" https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="main" style="width: 100%;height:60px;"></div>

JavaScript

option = {
  baseOption: {
    timeline: {
      axisType: 'category',
      autoPlay: true,
      playInterval: 1000,
      data: [
        {
          value: "1",
          itemStyle: {
            normal: {
              color: 'red',
              opacity: 1,
              borderColor: 'red',
              borderWidth: 8
            }
          }
        }, 
        {
          value: "2",
          itemStyle: {
            normal: {
              color: 'blue',
              opacity: 1,
              borderColor: 'blue',
              borderWidth: 8
            }
          }
        }, {
          value: "3",
          itemStyle: {
            normal: {
              color: 'green',
              opacity: 1,
              borderColor: 'green',
              borderWidth: 8
            }
          }
        },{
          value: "4",
          itemStyle: {
            normal: {
              color: 'orange',
              opacity: 1,
              borderColor: 'orange',
              borderWidth: 8
            }
          }
        },{
          value: "5",
          itemStyle: {
            normal: {
              color: 'purple',
              opacity: 1,
              borderColor: 'purple',
              borderWidth: 8
            }
          }
        },
        {
          value: "6",
          itemStyle: {
            normal: {
              color: 'red',
              opacity: 1,
              borderColor: 'red',
              borderWidth: 8
            }
          }
        }],
      checkpointStyle: {
        symbol: 'circle',
        borderColor: 'gray',
        symbolSize: 24,
        borderWidth: 3,
        color: 'transparent'
      }
    }
  }
};

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

myChart.on('timelinechanged', function (params) {
  console.log(params);
})

myChart.on('timelineplaychanged', function (params) {
  console.log(params);
})