echarts usage of a click event (cylinders example)

echarts value may be obtained by clicking each event: myChart.on ( 'click', function (param) {} // myChart custom variables: var myChart = echarts.init (document.getElementById ( 'echartBox'));

Param can get the following:

// param parameter contains the contents are: 
the value of //param.name:X axis 
value //param.data:Y axis 
value //param.value:Y axis 
//param.type: click click events are 
//param.seriesName:legend name 
//param.seriesIndex: serial No. (series of several current pattern is a pattern of several) 
//param.dataIndex: numeric sequence (X-axis current point is the first few points ) 
 //alert(param.seriesName); // Legend of the name

You can also customize the parameters inside option series, and custom acquisition parameters by option.series [param.seriesIndex] .barIds [param.dataIndex]) (barIds custom parameter), as follows

Option = { 
    Series: { 
       name: 'evaporation' , 
       type: 'bar' , 
       barIds: [ '1 January "," February 2', '3 March "," April 4', '5 May ',' June 6 ',' July 7 ',' August 8 ',' September 9 '' on October 10 ',' 11 November ',' December 12 '],   // added barIds parameters (custom) 
       Data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3 ] 
    } 
} 
myChart.on ( 'the Click', function (param) { 
　　Alert ( option.series [param.seriesIndex] .barIds [param.dataIndex] ) // get the value of a custom variable barIds, barIds in series to the option and custom as 
});

All code is as follows:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>点击echarts圆柱体事件</title>
        <script type="text/javascript" src="js/echarts.min.js"></script>
    </head>
    <body>
        <div id="echartBox" style="width: 800px;height: 400px;margin: 50px auto;border: 1px solid #ccc;"></div>
    </body > 
    < Script type = "text / JavaScript" > 
        the window.onload =  function () {
             var myChart = echarts.init (document.getElementById ( ' echartBox ' )); 
            Option = { 
                title: { 
                    text: ' evaporation in a region ' , 
                    subtext: ' fictitious ' 
                }, 
                ToolTip: { 
                    Trigger: ' Axis '
                },
                legend: {
                    data:['蒸发量']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: to true }, 
                        saveAsImage: {Show: to true } 
                    } 
                }, 
                calculable: to true , 
                XAXIS: [ 
                    { 
                        type: ' category ' , 
                        Data: [ " January " , " February " , " March " , " April " , ' On ' , ' June ' , 'July ' , ' August ' , ' September ' , ' October ' , ' November ' , ' Dec ' ] 
                    } 
                ], 
                YAXIS: [ 
                    { 
                        type: ' value ' 
                    } 
                ], 
                Series: [ 
                    { 
                        name: ' evaporation ' , 
                        type:' Bar ' , 
                        barIds: [ ' 1 January " , " February 2 ' , ' 3 March " , " April 4 ' , ' May 5 ' , ' 6 June " , " July 7 ' , ' August 8 ' , ' September 9 ' , ' October 10 ' , ' 11 November ' , ' December 12 ' ],  // add a rawdate parameters (custom)
                        Data: [ 2.0 , 4.9 , 7.0 , 23.2 , 25.6 , 76.7 , 135.6 , 162.2 , 32.6 , 20.0 , 6.4 , 3.3 ], 
                        markPoint: { 
                            Data: [ 
                                {type: ' max ' , name: ' maximum ' }, 
                                { type: ' min ' , name: ' min' } 
                            ] 
                        }, 
                        MarkLine: { 
                            Data: [ 
                                {type: ' Average ' , name: ' average ' } 
                            ] 
                        } 
                    } 
                ] 
            }; 
            myChart.setOption (Option, to true ); 
            myChart.on ( ' the Click ' , function ( param) {  
                 // content are param parameters comprising:
                // value param.name:X axis 
                // value param.data:Y axis 
                // param.value: Y-axis value 
                // param.type: Click event are the Click 
                // param.seriesName: Legend of the name 
                // param.seriesIndex: serial No. (series of several current pattern is a pattern of several) 
                // param.dataIndex: numeric sequence (X-axis current point is the first few points) 
                // Alert (param.seriesName) ; // legend name 
                Alert (param.name);   // X-axis values 
                Alert (option.series [param.seriesIndex] .barIds [param.dataIndex]); // for custom value 
            }); 
        } 
    < / Script > 
</ HTML >

echarts usage of a click event (cylinders example)

Guess you like