echarts-for-react 在点击图表上的数据点时调用组件

Question

我正在使用 echarts 和 react using echarts for react。我想在图上点击一个点调用一个组件，怎么实现的，什么是图例，看了文档没看懂。

Answer 1

您可以将对象作为 onEvents prop 传递给 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 
}

Answer 2

onEvents prop 无法正常工作，尝试获取 echarts 的 ref 并将您的事件添加到 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.log('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;

Answer 3

我发现这两个答案都有点不完整，所以这是我的答案。
我正在使用 echarts v5.

TLDR：如果您使用 class 组件

，请不要忘记将您的回调绑定到您的对象

功能组件

import React from 'react';
import ReactECharts from 'echarts-for-react';

function MyComp(props) {

  const options = { ... }

  const onChartClick = (params) => {
    console.log('Chart clicked', params);
  };

  const onEvents = {
    click: onChartClick,
  };

  return (
    <ReactECharts
      option={options}
      onEvents={onEvents}
    />
  );
}

Class分量

import React from 'react';
import ReactECharts from 'echarts-for-react';

class MyComp extends React.Component {
constructor(props) {
    super(props);

    this.options = { ... };
    this.onChartClick = this.onChartClick.bind(this);
  }
  
  onChartClick = (params) => {
    console.log('Chart clicked', params);
  };

  onEvents = {
    click: this.onChartClick
  }


  render() {
    return (
      <ReactECharts
        option={this.options}
        onEvents={this.onEvents}
      />
    );
  }
}

echarts-for-react 在点击图表上的数据点时调用组件

echarts-for-react call component on clicking a data point on chart

reactjs

echarts