最近一段时间没有更新,是因为自己突然感觉没有了更新的动力,好像变懒了,而且也写的不怎么好,索性就一直这么放任自己。但是又深知复盘的重要性,特来记录一下问题的解决方法。
需求背景
项目中需要绘制echarts图表,是一个简单的柱状图,但是产品想要的是 可以点击整个柱状图的hover区域,也就是某个柱子的空白区域在hover之后,也是可以点击的。
需求分析
其实echarts的普通点击事件是myChart.on('click', function(){})
是触发在柱子上的,但我们可以使用echarts的另一个方法 getZr()来监听整个画布的click事件,不过不幸的是,官网没有对这个方法有说明和描述,只能靠我们自己摸索着去学习相关的API
实现
var data = [220, 182, 90, 149, 220];
var x_type = ['周一', '周二', '周三', '周四', '周五'];
option = {
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: x_type,
axisPointer: {
type: 'shadow',
},
},
yAxis: {
type: 'value',
},
series: [
{
type: 'bar',
itemStyle: {
color: '#188df0'
},
data: data,
barGap: 0,
barWidth: 20,
}
]
};
myChart.getZr().on('click', function(param) {
// 获取 点击的 触发点像素坐标
const pointInPixel = [param.offsetX, param.offsetY]
// 判断给定的点是否在指定的坐标系或者系列上
if (myChart.containPixel('grid', pointInPixel)) {
// 获取到点击的 x轴 下标 转换为逻辑坐标
let xIndex = myChart.convertFromPixel({ seriesIndex: 0 },pointInPixel)[0]
// 做一些其他事情
console.log(xIndex)
}
})
// 将可以响应点击事件的范围内,鼠标样式设为pointer--------------------
myChart.getZr().on('mousemove', function(params) {
var pointInPixel = [params.offsetX, params.offsetY]
if (myChart.containPixel('grid', pointInPixel)) {
// 将此区域的 鼠标样式变为 小手
myChart.getZr().setCursorStyle('pointer')
}
})
实现后效果就变成这个样子:
在柱状图的阴影部分也会出现 小手 的标志,可以点击,点击后也会触发事件, 在param
中就是触发事件的所有API,可以拿到点击的坐标,通过转换得到对应的x轴下标。
其他
echarts官网上虽然没有getZr()的说明,但是还有很多其他转换的描述
(
// 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
(
// 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
) => boolean
目前支持在这些坐标系和系列上进行判断:grid, polar, geo, series-map, series-graph, series-pie。
判断给定的点是否在指定的坐标系或者系列上
myChart.on('click', function(){})
有对应的解绑事件处理函数 myChart.off('click')
。
那么getZr() 也有对应的解绑方法 myChart.getZr().off('click')
后续还有折线图点击在线上的触发事件实现,将在下一篇更新~