eCharts增加图例(legend)的点击事件--echarts-for-react

连时铭
2023-12-01

1. 功能需求:

用户点击图例,进入下钻页面。

2. 背景

使用echarts-for-react开发的图表,echarts的点击事件不能应用与图例,点击图例会触发legendselectchanged事件。图例选择与非选中状态会直接影响到图表的展示效果,非选中状态图例对应的内容不会再图表内展示。当我点击图例时,页面跳转至下钻页面。

3. 解决思路

需要保证点击图例时,页面跳转至下钻页面,但是被点击的图例依然是选中状态。

当我点击图例触发legendselectchanged事件时,除了执行业务方法外,同时需要将当前点击的图例状态置为选中状态。

4. 解决方法

/* 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();
    }
}
 类似资料: