Компонент вызова echarts-for-response при щелчке точки данных на диаграмме

Я использую электронные диаграммы с реакцией, используя электронные диаграммы для реакции. Я хочу вызвать компонент, щелкнув точку на графике, как это сделать, а также что такое легенды. Я прочитал документацию, но не смог ее понять.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
3 402
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете передать объект как свойство 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;

Другие вопросы по теме