1. 功能需求:
用户点击图例,进入下钻页面。
2. 背景
使用echarts-for-react开发的图表,echarts的点击事件不能应用与图例,点击图例会触发legendselectchanged事件。图例选择与非选中状态会直接影响到图表的展示效果,非选中状态图例对应的内容不会再图表内展示。当我点击图例时,页面跳转至下钻页面。
3. 解决思路
需要保证点击图例时,页面跳转至下钻页面,但是被点击的图例依然是选中状态。
当我点击图例触发legendselectchanged事件时,除了执行业务方法外,同时需要将当前点击的图例状态置为选中状态。
4. 解决方法
- 使用echarts-for-react组件的onEvents方法监听事件
- ref获取实例
- 参考echarts-for-react文档
/* typescript */
----------------------- 手动分割线 -----------------------
// eChart组件
<ReactEcharts
option={this.props.option} // eCharts的option
onEvents={this.props.onEvents} // 监听事件方法
ref={(e: any) => !!this.props.getEchart && this.props.getEchart(e)} // 获取eChart