Question

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

dataZoom config：

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"

这可能吗？

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

Answer 2

目前你还没有从活动中获得它。与此相关的问题是：4906

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

＆＃13;

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

＆＃13;

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

Answer 3

我遇到了相同的问题，以下简单的代码对我来说很完美：

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

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

3 个答案: