Echarts柱状图点击事件的实现方法

点击事件绑定

click事件

onChartClick=(param,echarts)=>{

    console.log(param)

}

render(){

    let onEvents={

        'click': this.onChartClick

    }

    return(

            <ReactEcharts

                option={this.getOption()} 

                notMerge={true}

                lazyUpdate={true}

                onEvents={onEvents}

                style={{width: '100%',height:'100%'}}

            />
    )

}

 

legend标签点击事件

onChartLegendselectchanged=(param,echarts)=>{

    console.log(param)

}

render(){

    let onEvents={

        'legendselectchanged': this.onChartLegendselectchanged

    }

    return(

            <ReactEcharts

                option={this.getOption()} 

                notMerge={true}

                lazyUpdate={true}

                onEvents={onEvents}

                style={{width: '100%',height:'100%'}}

            />

    )

}

 

一、安装

npm install --save echarts-for-react
//如果需要使用echarts的一些特殊方法需要安装
npm install --save echarts

二、使用

import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

<ReactEcharts option={this.getOption()} notMerge={true} lazyUpdate={true} onEvents={onEvents} style={{width: '100%',height:'100%'}} />