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

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组件实例
/>

-----------------------  手动分割线 -----------------------   
// 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();
    }
}