Echarts Datazoom Event Does Not Return Timestamp But Only Percentages

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 zoomin

Solution 1:

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);
});

Solution 2:

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)

Solution 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);
});

Solution 4:

I had the same problem trying to retrieve the timestamps on the datazoom. I wanted to retrieve the zoomed period as well as the full period. Eventually I found that I does not need to get it during dataZoom event. As long as the echarts is initialized, you can call the following function to retrieve the 4 main timestamps from the chart.

getChartDateRange() {
    const option = myChart.getOption().dataZoom[0],
        m = (option.endValue - option.startValue) / (option.end - option.start),
        fullStartValue = m * (0 - option.start) + option.startValue,
        fullEndValue = m * (100 - option.start) + option.startValue;
    return {
        fullStart: 0,
        fullEnd: 100,
        fullStartValue: fullStartValue,
        fullEndValue: fullEndValue,
        zoomStart: option.start,
        zoomEnd: option.end,
        zoomStartValue: option.startValue,
        zoomEndValue: option.endValue
    };
}