eCharts增加图例（legend）的点击事件--echarts-for-react

╰半橙微兮° 2022-04-24 08:12 1370阅读 0赞

#### 1. 功能需求： ####

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

#### 2. 背景 ####

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

#### 3. 解决思路 ####

需要保证点击图例时，页面跳转至下钻页面，但是被点击的图例依然是选中状态。  
  
当我点击图例触发legendselectchanged事件时，除了执行业务方法外，同时需要将当前点击的图例状态置为选中状态。

#### 4. 解决方法 ####

*  使用echarts-for-react组件的onEvents方法监听事件
 *  ref获取实例
 *  [参考echarts-for-react文档][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组件实例
    />
    
    -----------------------  手动分割线 -----------------------   
    // 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();
        }
    }

[echarts-for-react]: https://github.com/hustcc/echarts-for-react