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