我想监听用户的点击区域,包括空白位置(单纯的click监听无法监听空白区域),网上给出了解决方案,其中需要用到getZr这个api,但是我查看echarts的官方文档却找不到这个api的相关介绍,有人知道为什么吗?
网上给出的解决方案文章:https://blog.csdn.net/smk108/...
我打开官网,使用这个案列,测试了一下,代码如下:
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: { show: true, trigger: 'item' },
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 0, 130],
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};
myChart.getZr().on('mousedown', (params) => {
console.log(params);
const pointInPixel = [params.offsetX, params.offsetY];
if (myChart.containPixel('grid', pointInPixel)) {
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [
params.offsetX,
params.offsetY
])[0];
alert('你点击区域的数据为:'+option.series[0].data[xIndex])
}
});
option && myChart.setOption(option);
因为这是私有 API,官方没开放过,自然就没有文档。
目前你可以用,但不保证某个版本后就失效了(比如移除了、改名了、或者改变传参啊返回值啊什么的,而且这玩意儿因为是私有 API,所以可能甚至不会有 Breaking Changes Release Notes)。而用法也都是开发者们看源码自己总结出来的,毕竟是开源项目。
P.S. Zr 是 zrender 的缩写,zrender 是 echarts 的底层依赖。
上图的回复者是 zrender/echarts 的核心维护者之一。