echarts dataZoom 事件不返回时间戳，只返回百分比

Question

I got a chart with a dataZoom component. The x-axis is of type time . Zooming and roaming the chart works perfectly. But when I listen for the dataZoom event to hook into the zooming process I only get percentage values (0-100) from the event as current position.

the dataZoom config:

dataZoom: {
   start: 0,
   end: 3,
   showDetail: false
}

my xAxis config:

xAxis: {
    type: 'time',
    boundaryGap: false,
    splitLine: {
        show: true,
        lineStyle: {
            color: '#ddd',
            type: 'dashed'
        }
    },
    axisLine: {
        show: false
    }
},

I listen for the event like this:

myChart.on('dataZoom', function (evt) {
  console.log('zoom', evt);
})

And I get this console output for evt :

{
  "type": "datazoom",
  "from": "viewComponent_17_0.8229841241707196",
  "dataZoomId": "\u0000\u0000-\u00000",
  "start": 1.6141473287753287,
  "end": 11.178346465795
}

I would expect it to be something like:

"start" : "2012-12-01 15:30:00Z",
"end" : "2012-12-01 15:40:00Z"

is this possible?

Answer 1

Currently you don't get it from the event. There is an issue connected to this: 4906

A work around is to get the value from getOption like this:

const { startValue, endValue } =  echart.getEchartsInstance().getOption().dataZoom[0]

You can do this in your on dataZoom event handler (instead of using the values in the evt)

Answer 2

I came across the same problem the following simple code works perfectly for me:

myChart.on('dataZoom', function() {
  var option = myChart.getOption();
  console.log(option.dataZoom[0].startValue, option.dataZoom[0].endValue);
});

Answer 3

please try this

myChart.on('datazoom', function (evt) {
  var axis = myChart.getModel().option.xAxis[0];
  var starttime = axis.data[axis.rangeStart];
  var endtime = axis.data[axis.rangeEnd];
  console.log(starttime,endtime);
});