4

我得到了一个带有 dataZoom 组件的图表。x 轴的类型为time。缩放和漫游图表效果很好。但是当我监听dataZoom事件以挂钩缩放过程时，我只能从事件中获取百分比值（0-100）作为当前位置。

数据缩放配置：

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

我的 xAxis 配置：

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

我听这样的事件：

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

我得到这个控制台输出evt：

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

我希望它是这样的：

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

这可能吗？

4

4 回答 4

3

目前你没有从事件中得到它。有一个与此相关的问题：4906

一种解决方法是从 getOption 中获取值，如下所示：

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

您可以在 on dataZoom 事件处理程序中执行此操作（而不是使用 evt 中的值）

于 2017-05-11T08:51:01.837 回答
2

我遇到了同样的问题，下面的简单代码非常适合我：

myChart.on('dataZoom', function() {
  var option = myChart.getOption();
  console.log(option.dataZoom[0].startValue, option.dataZoom[0].endValue);
});
于 2019-05-31T23:10:01.073 回答
1

请试试这个

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);
});
于 2017-06-02T07:05:18.447 回答
0

我在尝试检索 datazoom 上的时间戳时遇到了同样的问题。我想检索放大的时期以及完整的时期。最终我发现我不需要在dataZoom事件期间获取它。只要初始化了echarts，就可以调用下面的函数从图表中检索4个主要的时间戳。

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
    };
}
于 2021-08-29T08:51:41.803 回答