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

  • 在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】数据了
  • 1
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
如果你想在 ECharts获取框选后的像素,可以通过 `brushSelected` 事件和 `params` 参数来实现。具体步骤如下: 1. 在 ECharts 初始化时,可以通过 `brush` 属性来开启框选功能,示例代码如下: ```javascript option = { // ... 其他配置 brush: { toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'], xAxisIndex: 0 }, // ... 其他配置 }; ``` 在上述代码中,我们通过 `brush` 属性来启用框选功能,并设置了一些工具按钮和目标轴。 2. 注册 `brushSelected` 事件,获取框选的像素,示例代码如下: ```javascript myChart.on('brushSelected', function (params) { var brushComponent = params.brushComponents[0]; var selectedRanges = brushComponent.selected; var xAxis = myChart.getModel().getComponent('xAxis', 0); var pixelStart = xAxis.axis.toGlobalCoord(selectedRanges[0][0]); var pixelEnd = xAxis.axis.toGlobalCoord(selectedRanges[0][1]); console.log('选择的像素范围为:', pixelStart, pixelEnd); }); ``` 在上述代码中,我们首先从 `params` 参数中获取到 `brushComponents` 数组,并通过 `brushComponents[0]` 获取到第一个刷选组件。然后从刷选组件中获取到 `selected` 数组,这个数组中保存了所有框选的区间范围。接下来,通过 ECharts 提供的 API `toGlobalCoord` 将区间范围转换为像素。最后,我们将像素范围打印到控制台中。 需要注意的是,在上述代码中,我们只获取了第一个刷选组件,如果页面中存在多个刷选组件,你需要根据自己的需求修改代码。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值