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

【问题标题】：echarts dataZoom event does not return timestamp but only percentagesecharts dataZoom 事件不返回时间戳，只返回百分比
【发布时间】：2021-08-29 16:51:41
【问题描述】：

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

dataZoom 配置：

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"

这可能吗？

【问题讨论】：

标签： javascript echarts

【解决方案1】：

目前您无法从活动中获得它。有一个与此相关的问题：4906

解决方法是像这样从 getOption 获取值：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

请试试这个

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

【讨论】：

【解决方案4】：

我在尝试检索 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
    };
}

【讨论】：