Echarts点击画布任意位置获取当前位置所对应的坐标值

悠悠 2022-09-08 05:57 310阅读 0赞

### 需求： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUG9rZXJf5pet_size_31_color_FFFFFF_t_70_g_se_x_16]

工作时遇到的一个需求说：给用户展示图表时，希望用户在图表中选取一块又一块的，拿出来用于后续的数据分析

### 思路及问题： ###

既然要选取一段一段的数据，我采取的办法就是用户点一次，我标记此时的x轴，表示起点，用户再点一次，我再记录此时的x轴，表示终点，然后在表中的配置项加个蒙版就是了。  
`问题：`只能点击已经标注的地方，无法点击我想要的任意地方，且就算可以能点击任意地方，也无法获取当前的`x`坐标的值，只能获取它的偏移值

### 解决办法： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUG9rZXJf5pet_size_45_color_FFFFFF_t_70_g_se_x_16]

打印结果： 虽然一点但偏差，但不影响  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUG9rZXJf5pet_size_24_color_FFFFFF_t_70_g_se_x_16]

### 需要注意的地方： ###

*  > 一般是直接 `assess_chart.on( 'click', function(){} )` 就是注册当前实例的点击事件，可是这个只能点击标注的地方，不能点画布其他的地方，所以要在前面加个 `getZr()`，即`assess_chart.getZr().on( 'click', function(){} )`
 *  > `实例对象.containPixel( finder, point )`，这个`containPixel()`函数它的第一个参数就是你要通过的什么条件去寻找你当前的实例对象，比如我这里是`{ seriesIndex: 0 }`，配置项里的`visualMap`里的`seriesIndex`类型下表,代表着哪种类型，不知道我理解的对不对，有大佬看到帮忙解说一下，感激不尽！其实这个参数也可以直接写成`"grid"`，具体看[官方文档][Link 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUG9rZXJf5pet_size_66_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUG9rZXJf5pet_size_31_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/d2bb82aa50474606913005bbb7ab5222.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUG9rZXJf5pet_size_45_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/3904714814044991ad6f82d86234441f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUG9rZXJf5pet_size_24_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/b8481df530554daa8d44bb945590da20.png
[Link 1]: https://echarts.apache.org/zh/api.html#echartsInstance.containPixel
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAUG9rZXJf5pet_size_66_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/e49e5735acee4d77a384818c114b5118.png