需求:
工作时遇到的一个需求说:给用户展示图表时,希望用户在图表中选取一块又一块的,拿出来用于后续的数据分析
思路及问题:
既然要选取一段一段的数据,我采取的办法就是用户点一次,我标记此时的x轴,表示起点,用户再点一次,我再记录此时的x轴,表示终点,然后在表中的配置项加个蒙版就是了。
问题:
只能点击已经标注的地方,无法点击我想要的任意地方,且就算可以能点击任意地方,也无法获取当前的x
坐标的值,只能获取它的偏移值
解决办法:
const assess_chart = echarts.init(this.$refs.lineChart);
BASE_CHARE_CONFIG && assess_chart.setOption(BASE_CHARE_CONFIG);
assess_chart.getZr().on("click", function(params) {
const pointInPixel = [params.offsetX, params.offsetY];// 获取点击事件里面的坐标轴的偏移值
if (assess_chart.containPixel({ seriesIndex: 0 }, pointInPixel)) {
console.log(assess_chart.getOption().xAxis[0].axisPointer);
}
});
打印结果: 虽然一点但偏差,但不影响
需要注意的地方:
-
一般是直接
assess_chart.on( 'click', function(){} )
就是注册当前实例的点击事件,可是这个只能点击标注的地方,不能点画布其他的地方,所以要在前面加个getZr()
,即assess_chart.getZr().on( 'click', function(){} )
-
实例对象.containPixel( finder, point )
,这个containPixel()
函数它的第一个参数就是你要通过的什么条件去寻找你当前的实例对象,比如我这里是{ seriesIndex: 0 }
,配置项里的visualMap
里的seriesIndex
类型下表,代表着哪种类型,不知道我理解的对不对,有大佬看到帮忙解说一下,感激不尽!其实这个参数也可以直接写成"grid"
,具体看官方文档