javascript - echarts dataZoom event does not return timestamp but only percentages - Stack Overflow

admin管理员组

文章数量:1237491

I got a chart with a dataZoom ponent. 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?

I got a chart with a dataZoom ponent. 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?

• javascript
• echarts

Share Improve this question Follow asked Feb 28, 2017 at 8:47 ManuKarachoManuKaracho 1,21822 gold badges1515 silver badges3232 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

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

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)

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

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

本文标签： javascriptecharts dataZoom event does not return timestamp but only percentagesStack Overflow