EchartsConnectNulls

by tmtron

HTML

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

JavaScript

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

var filterMode = 
//'filter'
//'weakFilter';
'empty'
//'none'
;

option = {
  legend: {
    data: ['issue']
  },
  grid: {
  	top: 30,
    bottom: 80
  },
  dataZoom: [{
      type: 'slider',
      show: true,
      filterMode: filterMode
    },
    {
      type: 'inside',
      show: true,
      filterMode: filterMode
    }
  ],
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      snap: false
    },      
  },
  xAxis: {
    type: 'time',
    // then we get a click event for the axis-lavels
    triggerEvent: true
  },
  yAxis: {
    type: 'value', 
    // ,    max: 50
    triggerEvent: true
  },
  series: [{
    name: 'issue',
    connectNulls: false,
    type: 'line',
    symbolSize: 10,
     // 'triangle', 'diamond', 'pin', 'arrow', 'none'
    symbol: 'triangle', 
    areaStyle: {
      origin: 'start'
    },    
    data: [
      ["2016-01-01 00:00:00", 5],
      ["2016-01-02 00:00:00", 15],
      ["2016-01-03 00:00:00", null],
      ["2016-01-04 00:00:00", 11],
      ["2016-01-05 00:00:00", 35]
    ]
  }]
};


myChart.setOption(option);
myChart.on('click', function (params) {
  msgs.innerHTML = params.componentType;
  console.log(params);
});