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%'}}
/>