React实现Echarts 点击当前内容进行匹配

最新推荐文章于 2024-07-05 18:15:36 发布

原创最新推荐文章于 2024-07-05 18:15:36 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在React中使用Echarts库实现图表点击事件的监听与数据获取。通过定义onChartClick方法，可以捕获图表元素的点击事件，并从事件对象中解析出被点击元素的名称，进一步在状态数据中查找对应的数据项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 onChartClick = (e) => { 
	let ip = e.name;
	const obj = this.state.haviorData.find((e) => {
  	return e.key === ip;
	});
	console.log(obj)
}
let onEvents = {
  'click': this.onChartClick,
}
<ReactEcharts
      option={option}
      onEvents={onEvents}
      style={{ height: '295px', width: '70%' }}
      className='react_for_echarts'
    />