当前位置:   article > 正文

echarts折线图添加区域点击事件,而不用去点小圆点(扩大点击范围)_mychart.getzr()

mychart.getzr()

不要写onClick事件,用以下方法代替

  1. myChart.getZr().on('click',function (params) {
  2. var pointInPixel= [params.offsetX, params.offsetY];
  3. if (myChart.containPixel('grid',pointInPixel)) {
  4. /*此处添加具体执行代码*/
  5. var pointInGrid=myChart.convertFromPixel({seriesIndex:0},pointInPixel);
  6. //X轴序号
  7. var xIndex=pointInGrid[0];
  8. //获取当前图表的option
  9. var op=myChart.getOption();
  10. //获得图表中我们想要的数据
  11. var month=op.xAxis[0].data[xIndex];
  12. }
  13. });
  14. //将可以响应点击事件的范围内,鼠标样式设为pointer--------------------
  15. myChart.getZr().on('mousemove',function (params) {
  16. var pointInPixel= [params.offsetX, params.offsetY];
  17. if (myChart.containPixel('grid',pointInPixel)) {
  18. myChart.getZr().setCursorStyle('pointer');
  19. };
  20. });
  21. myChart.on('mouseout', function (params) {
  22. var pointInPixel= [params.offsetX, params.offsetY];
  23. if (!myChart.containPixel('grid',pointInPixel)) {
  24. myChart.getZr().setCursorStyle('default');
  25. };
  26. });
  27. //--------------------------------------------------------------

如果对convertFromPixel方法有好的理解,应该可以获得更多有效的数据,操作起来应该会更简单一点。

之前的代码IE不能识别,修改过后应该比较标准来,我测试在IE下可以正常使用。

这里暂时没有搞明白,理解肤浅,欢迎指教。

 

———————————更新————————————————————

最近才明白convertFromPixel这个破函数的作用,其实功能很弱,只是将像素坐标转换成逻辑坐标。

比如pointInPixel是[480,120]转换后得到pointInGrid[4,9],4就是X轴坐标,5就是Y轴坐标。

finder {seriesIndex:0}其实可以换成其他很多写法,只要finder正确,结果很可能是一样的,没有具体实验过。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/549762
推荐阅读
  

闽ICP备14008679号