实现Echarts图表点击label触发图的浮窗,高亮

监听图的鼠标移动事件,拿到选中的label对应的索引值,拿索引方法和我的实现x轴高亮第二种方法一样,使用echarts自带的API实现浮窗的触发,只是需要判定一下鼠标选中的目标对象,具体操作如下:

myChart.getZr().on(“mousemove”, function(e){

    // 获取当前索引

    let index= [e.offsets, e.offsetY]

    let pointGrid= myChart.convertFromPixel({seriesIndex: 0}, index)

    let selectedIndex= pointGrid[0]

具体判定逻辑根据自己实际情况书写

  if(e.target && e.target.name && e.target.name ==“item” || (e.target && e.target.type && e.target.type ==“image”) || (e.target && e.target.currentStates.length !== 0)){

参数解释可以参考echarts官方文档

myChart.dispatchAction({

    type: “showTip”, //这里是触发浮窗,高亮只需要将这个值改成  highlight, 取消高亮就改成 downplay

    seriesIndex: 0,

    dataIndex: selectedIndex

  })

}

})
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容