Вы можете передать объект как свойство onEvents компоненту ReactEcharts.
<ReactEcharts ref = {(e) => { this.echarts_react = e; }}
onEvents= {this._onEvents}
/>
где _onEvents может быть чем-то вроде
_onEvents = {
'click': this.onChartClick,
'dataZoom': this.onDataZoom,
}
а также
onChartClick = (params)=>{
// Do what you want to do on click event. params depend on the type of chart
}
onEvents prop не работает должным образом, попробуйте получить ссылку на электронные диаграммы и добавьте свое событие в объект zr, как показано ниже:
import React, {Component} from 'react';
import './App.css';
import ReactEcharts from "echarts-for-react";
class App extends Component {
constructor(props, context) {
super(props, context);
this.state = {
graphOption: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
}
}
}
componentDidMount() {
this.echartsInstance = this.echartsReactRef.getEchartsInstance();
this.zr = this.echartsInstance.getZr();
this.zr.on('click', this.onChartClick);
}
onChartClick = (...rest) => {
console.info('App:onClickChart', rest);
};
render() {
return (
<div className = "App">
<header className = "App-header">
<ReactEcharts
style = {{height: '100vh', width: '100vw'}}
ref = {(e) => {
this.echartsReactRef = e;
}}
option = {this.state.graphOption}
/>
</header>
</div>
);
}
}
export default App;