vue echarts-gl 3d地图获取点击事件

echarts yekong

vue 项目开发中 需要3d地图效果,这里我们使用的echarts echarts-gl来进行3d地图渲染

vue echarts-gl 3d地图获取点击事件

3d地图渲染完成后,我们需要进行交互,点击地图获取信息,在echarts普通地图中,我们只需要监听click就可以了,

推荐解决方案

echarts-gl在渲染3d地图后,进行点击事件获取不到点击事件,排查后发现是因为数据没有放在series中,所以获取不到数据,将数据放入到series中后就可以正常获取点击事件了。

vue echarts-gl 3d 点击地图无法获取监听事件

echarts监听

echarts普通地图中我们只需要下面的事件监听就可以了,但是在echarts-gl3d地图下这种事件就是无效的,会有一个提示model or view can not be found by params,然后没有了,所以我们需要其他方法来获取点击事件。

myChart.on('click', function (params) {
})

echarts-gl地图点击事件

通过myChart.getZr()方法我们可以获取到点击事件信息,但是这个事件我们可以获取到的信息有限,只能获取到x轴和y轴坐标,其他的信息仍然获取不到。

myChart.getZr().on('click', params => {
    console.log('params------', params)
})

能够触发点击事件后,接下来我们就可以通过这个点击事件来获取我们想要的信息了,vue echarts-gl 3d地图点击获取区域信息

喜欢