echart获取鼠标所在位置的x值以及y值

最新推荐文章于 2023-07-23 16:40:38 发布

Qice

最新推荐文章于 2023-07-23 16:40:38 发布

阅读量1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 echart

本文链接：https://blog.youkuaiyun.com/z_dmsd/article/details/94648428

前端专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在ECharts中精确获取鼠标所在位置的X轴和Y轴数值，通过使用convertFromPixel方法，实现对数据采样和数轴缩放问题的解决，提供了一种更为准确的数据获取方案。

在echart图表中，经常需要获取当前鼠标所在点的值，一般情况下都会通过

let chartInstance = echart.init(dom);
chartInstance.off('showTip');//这里是为了防止多次注册事件
chartInstance.on('showTip',function(param)
{
	let nowDataIndex = param.dataIndex;
);

来获取当前点的数据索引，然后通过原始数据获取当前鼠标所在点的数据；

然而，这样的获取方法有个缺点，仅能获取到当前鼠标所在的位置最近的点的数据，并不能获取任意位置的x轴数值和y数值
像这样，我们仅能获取到这个 点A和点B的值，当鼠标在AB之间时，无法准确获取X轴位置
我原先的做法是这样的：

//一下时showTip的回调函数中的内容
let x = param.x;
let nowWidth = chartInstance.getWidth();
if(nowWidth <=0)
{
   return;
}
let rate = (x-gridLeft)/nowWidth; //gridLeft是 option中的grid中设置的left的像素值
//依据当前像素偏移的比例，以X轴的最大最小值作为基准，结合当前轴的缩放比例，获取当前位置的X轴的值
let nowXData = self.getDataByRate(rate);

可惜的是，这样的做法算出来的数据不够准确，因为echart本身数轴缩放，数据采样等问题，这样按比例获取的数据的精确度不够

经过一番查找，发现`echart 4`中,增加了一个用于像素坐标转换到echart逻辑坐标的API,有了这个，自然就能精确的获取当前鼠标所在位置的X值和Y值了

这里是官网对应链接

echartsInstance.convertFromPixel Function
(
    // finder 用于指示『使用哪个坐标系进行转换』。
    // 通常地，可以使用 index 或者 id 或者 name 来定位。
    finder: {
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },
    // 要被转换的值，为像素坐标值，以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。
    value: Array|string
    // 转换的结果，为逻辑坐标值。
) => Array|string
转换像素坐标值到逻辑坐标系上的点

下面是我使用的解决方案：

     let x = param.x;      //当前点相对于echart dom的左上角的像素偏移
     let y = param.y;                
     let result = self.chartInstance.convertFromPixel({                    
     	seriesIndex:0,                   
      	xAxisIndex:0
      },[x,y]);
     //这个result就是我们需要的 【x,y】数据了