[GitHub] [incubator-echarts] 100pah commented on issue #11679: dataZoom with rangeMode: 'value' is broken

[GitBox <gi...@apache.org>]

100pah commented on issue #11679: dataZoom with rangeMode: 'value' is broken
URL: https://github.com/apache/incubator-echarts/issues/11679#issuecomment-556238022
 
 
   @dr-itz 
   
   I think `rangeMode: 'value'` is not broken, but is a break change that I didn't noticed. The previous behavior supports your usage but it is buggy in some cases. So I fixed it in the subsequent version, and clarified the definition of [dataZoom.rangeMode](https://echarts.apache.org/en/option.html#dataZoom-inside.rangeMode). That makes your code work in the previous version but probably logically incorrect in the current definition.
   
   Please try this code. I hope it can match your requirement:
   
   ```js
   
   var myChart = echarts.init(document.getElementById('main0'));
   
   function randomData() {
       now = new Date(+now + oneDay);
       value = base++;
       return {
           name: now.toString(),
           value: [now, value]
       }
   }
   
   var data = [];
   var base = 10;
   var now = new Date(1997, 9, 3);
   var oneDay = 24 * 3600 * 1000;
   for (var i = 0; i < 100; i++) {
       data.push(randomData());
   }
   
   option = {
       tooltip: {
           confine: true
       },
       xAxis: {
           type: 'time',
       },
       yAxis: {
           type: 'value',
           scale: true
       },
       series: [{
           name: 'test',
           type: 'line',
           hoverAnimation: false,
           data: data
       }],
       dataZoom: [{
           type: 'inside'
           // Do not set rangeMode here
       }]
   };
   
   setInterval(function () {
       for (var i = 0; i < 5; i++) {
           data.shift();
           data.push(randomData());
       }
       myChart.setOption({
           series: [{ data: data }]
       });
   }, 1000);
   
   // Listen to dataZoom event, and set `startValue` and `endValue` to 
   // fix the data window if zoomed.
   myChart.on('dataZoom', function (event) {
       var dzCurrOpt = myChart.getOption().dataZoom[0];
   
       var dzOpt = {};
       dzCurrOpt.start > 0 ? (dzOpt.startValue = dzCurrOpt.startValue) : (dzOpt.start = 0);
       dzCurrOpt.end < 100 ? (dzOpt.endValue = dzCurrOpt.endValue) : (dzOpt.end = 100);
   
       myChart.setOption({
           dataZoom: dzOpt
       }, {lazyUpdate: true});
   });
   
   myChart.setOption(option);
   ```
   
   And next, we should think of whether to add an option to support your case instead of the code above.
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org