- 在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】数据了