和上一篇相关,这次是对于折线图的处理,也是基于 getZr() 这个方法来使用的
需求分析
产品想要在折线图上点击某个折线,触发事件,不止是在折线图的拐点,那处理方法我想了两种,如下:
- 获取点击位置,判断点击位置是否在某条折线的集合上
此方法有实践过,但没有成功,因为我拿不到某条折线的所有点的集合,或者说点太多了,所以思路也不是很正确
- 获取点击位置,返回这个点的信息,在这些信息里找,看有没有属于这条折线的信息
所以最终的实现确实是这种方式,当然,是基于getZr()获取点击坐标的方式
那myChart.on('click', function(){})
这个方法不是也可以点击获取信息吗,怎么不行呢,没错,其实就是不行,这个事件点击获取的都是 圆点的 信息,拿不到折线的信息,所以,我们还是要基于 getZr() 方法实现
实现
option = {
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告']
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
]
};
myChart.getZr().on('click', function(params) {
// 获取像素坐标点
const pointInPixel = [params.offsetX, params.offsetY]
const { target, topTarget } = params
// 判断点击的点在 点击在折线的拐点 || 折线上
if (target?.z === 2 || topTarget?.z === 2) {
// 获取这条折线的 信息 也就是 index
// 如果是拐点,直接读取 target.seriesIndex
// 如果是折线上的点,读取 topTarget 对象下的继续寻找parent的信息的index
const axs = target
? target.seriesIndex
: topTarget.parent?.parent?.__ecComponentInfo?.index
console.log(axs)
}
})
// 将可以响应点击事件的范围内,鼠标样式设为pointer--------------------
myChart.getZr().on('mousemove', function(params) {
const { topTarget } = params
// 给折线的鼠标悬浮 变为 小手
if (topTarget?.z === 2) {
myChart.getZr().setCursorStyle('pointer')
}
})
其实代码中注释也说的比较清楚了,步骤如下:
- 找到点击点的坐标点
- 判断在图表内 && 在折线或折线拐点上
这一步并不好判断,我也是不停打点击,在控制台拿到params,对比折线点和非折线点,发现的不同点,
这里要详细说一下topTarget这个属性,不只有折线点才有,而是所有的线都有,比如x轴,y轴,图表中的基准线,
target.z === 2 表示拐点
并且还要满足topTarget.z === 2 这个才是折线上的点,就排除了基准线的点
- 确定了折线&折线拐点, 接下来就是获取这个点的所处折线的index信息
如果是拐点,直接读取 target.seriesIndex;
如果是折线上的点,读取 topTarget 对象下的继续寻找parent的信息的index。这个折线上的点的 信息真的是很难找,我也是把每个属性都展开,仔细看,才发现的。
- 找到了就可以做一些业务上的操作
- 设置折线的鼠标悬浮为 小手 这个判断条件弱一些,因为拐点本身就是有 pointer 标志的
我最终就是这么处理的,因为在网上也没有找到更好的方法,所以就自己查找属性,发现了不同点。
或许还有其他的解决方法,如果有小可爱们有更好的方法,欢迎留言哦~