在vue中Antv G2 折线图如何添加点击事件获取折线上点的值

 

在项目中有个需求是点击折线图的点，获取当前点的信息，其它图形都可以参考相关的API获取到，但area做的折线图怎么都获取不到点击的信息，只能获取全部的信息，最终解决如下：

实现思路

1. 用户的鼠标在折线图上移动时，监听tooltip的变化，通过一个变量记录tooltip的当前值。
   对应的事件名称：tooltip:change
2. 利用G2提供的组合事件，监听折线图的绘图区被 click 的时候。此时，拿到tooltip的当前值做任意你需要的操作即可。
   对应的事件名称：plot:click

import { Chart } from '@antv/g2';const data = [{ year: '1991', value: 3 },{ year: '1992', value: 4 },{ year: '1993', value: 3.5 },{ year: '1994', value: 5 },{ year: '1995', value: 4.9 },{ year: '1996', value: 6 },{ year: '1997', value: 7 },{ year: '1998', value: 9 },{ year: '1999', value: 13 },
];
const chart = new Chart({container: 'container',autoFit: true,height: 500,
});let hoverData = {}; // new Add -- 如果是在vue中使用，把该变量定义在data中即可chart.data(data);
chart.scale({year: {range: [0, 1],},value: {min: 0,nice: true,},
});chart.tooltip({showCrosshairs: true, // 展示 Tooltip 辅助线shared: true,
});chart.line().position('year*value').label('value');
chart.point().position('year*value');// new Add -- 监听 tooltip:change 事件
chart.on('tooltip:change', ev => {// 自己可以在控制台打印一下ev，看下里面的结构，找到自己所需要的信息hoverData = ev.data.items[0].data;
})// new Add -- 监听绘图区plot的点击事件
chart.on('plot:click', ev => {// 当用户在画布上点击时，这个时候用户看到tooltip上的数据其实已经被存在了hoverData里。拿到hoverData，相当于你拿到了折线上相关点的数据，之后再有什么需求都可以实现啦！console.log(JSON.stringify(hoverData));
})chart.render();