如何从 apache eCharts 中的 zRender 单击事件确定时间轴值

Question

继如何使用 zrender 与 vue-echarts 来注册条形图上的点击

当 X 轴类型为

time

时，下面的示例不起作用

对于类型为

time

的 x 轴，轴对象上不存在

.data

属性。

chart.getZr().on('click', function(params){
  console.log(params)
  var pointInPixel = [params.offsetX, params.offsetY];
  var pointInGrid = chart.convertFromPixel('grid', pointInPixel);
  console.log(pointInGrid)
  var category = chart.getModel().get('xAxis')[0].data[pointInGrid[0]] // <-- bang!
  console.log(category)
})

我可以获得时间连续值（以毫秒为单位），但这扩展到整个画布（不仅仅是图表网格）

我找不到确定以下内容的方法

• 时间值是否确实在图表网格中？
• 最接近的数据集 x 轴值是多少？

Answer 1

我尝试使用我的解决方案：

chart.getZr().on('click', function(params){
  var pointInPixel = [params.offsetX-GridLeft, params.offsetY];
  var width=chartEfficiency.getWidth()-GridRight-GridLeft;
          pointInPixel[0]=Math.round((pointInPixel[0]/width)*(chartEfficiency.getModel().get('xAxis')[0].data.length))-1
          var category = chartEfficiency.getModel().get('xAxis')[0].data[pointInPixel[0]]
  console.log(category)
})

GridLeft 和 GridRight 是选项中的值：

grid: {
        width: 'auto',
        height: "auto",
        top: GridTop,
        bottom: GridBottom,
        left: GridLeft,
        right: GridRight
      },