JSFiddle - React, Tailwind, and code Playground

Echarts_ZoomBug

by tmtron

HTML

<script src="//cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
<button onclick="updateSeries()">update</button>

JavaScript

//minimal example for https://github.com/apache/incubator-echarts/issues/10228
 
var myChart = echarts.init(document.getElementById('main'));

// note that the time of the first sample is BEFORE xAxis.min!
var datasetSource1 = [[1554139666196,17],[1554209294056,12],[1554209967874,13],[1554213561570,14],[1554355175653,5]];
var datasetSource2 = [[1554076772406,0],[1554421766454,23]];

var filterMode = 'weakFilter'; // line-artifact
var filterMode = 'empty'; // OK
var filterMode = 'filter'; // line-artifact
var connectNulls = false;
var scale = true;

var option = {
  dataZoom: [
    {
      show: true,
      filterMode: filterMode
    }
  ],
  xAxis: {
    type: "time",
    min: 1554139674662,
    max: 1554355295491,
  },
  dataset: [
    {
      source: datasetSource1,
      sourceHeader: false
    }
  ],
  yAxis: [
    {
      scale: scale,
      type: "value"
    }
  ],
  series: [
    {
      connectNulls: connectNulls,
      type: "line",
      showSymbol: false,
      symbol: "rect",
    }
  ]
};

var option2 = {
  dataZoom: [
    {
      show: true,
      realtime: true,
      filterMode: filterMode,
      start: 0,
      end: 100,
      minValueSpan: 449211
    }
  ],
  xAxis: {
    type: "time",
    min: 1553695124932,
    max: 1554557608248,
  },
  dataset: [
    {
      source: datasetSource2,
      sourceHeader: false
    }
  ],
  yAxis: [
    {
      scale: scale,
      type: "value"
    }
  ],
  series: [
    {
      connectNulls: connectNulls,
      type: "line",
      showSymbol: false,
      symbol: "rect",
    }
  ]
};

myChart.setOption(option);
// maybe related to https://github.com/apache/incubator-echarts/issues/6202

function updateSeries() {
  //myChart.clear();
	myChart.setOption(option2, true);
}