用户点击图例,进入下钻页面。
使用echarts-for-react开发的图表,echarts的点击事件不能应用与图例,点击图例会触发legendselectchanged事件。图例选择与非选中状态会直接影响到图表的展示效果,非选中状态图例对应的内容不会再图表内展示。当我点击图例时,页面跳转至下钻页面。
需要保证点击图例时,页面跳转至下钻页面,但是被点击的图例依然是选中状态。
当我点击图例触发legendselectchanged事件时,除了执行业务方法外,同时需要将当前点击的图例状态置为选中状态。
/* typescript */
----------------------- 手动分割线 -----------------------
// eChart组件
<ReactEcharts
option={this.props.option} // eCharts的option
onEvents={this.props.onEvents} // 监听事件方法
ref={(e: any) => !!this.props.getEchart && this.props.getEchart(e)} // 获取eChart组件实例
/>
----------------------- 手动分割线 -----------------------
// onEvents
public handleEvents = { // 点击图例,监听图例状态改变事件
'legendselectchanged': this.handleLegendSelectChanged,
}
public handleLegendSelectChanged = (e: any) => { // 监听图例状态改变事件函数
/**
* 此处省略业务处理代码
* 包括调整下钻页面跟数据请求
*/
if (!!this.echart) { // this.echart为拿到的图标实例,将点击的图例置为已选中状态
this.echart.dispatchAction({
type: 'legendSelect',
name: e.name,
})
}
};
----------------------- 手动分割线 -----------------------
// 获取echarts组件实例
public getEchart = (e: any) => {
if (!!e) {
this.echart = e.getEchartsInstance();
}
}