Add click event to ECharts histogram

refer to:

https://zhuanlan.zhihu.com/p/33050579

https://blog.csdn.net/sophia_xiaoma/article/details/78055947

http://www.jb51.net/article/125820.htm

https://www.cnblogs.com/zhzhair-coding/p/6953982.html?utm_source=itdadao&utm_medium=referral

For the chart data generated by ECharts, the click method has been added to the series area by default, but it needs its own definition function.

Click events are not enabled for the X-axis and Y-axis by default and need to be enabled.

triggerEvent:true

The specific code is as follows

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>ECharts</title>
    <!-- <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>  -->
    <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</ head > 
< body > 
    <!-- Prepare a Dom with size (width and height) for ECharts --> 
    You have selected the X-axis label [ < span id ="xAxisTag" ></ span > ], his The value is [ < span id ="barValue" ></ span > ]
     < div id ="main" style ="width: 600px;height:400px;" ></ div > 
</ body > 
< script type ="text /javascript" >
        // Based on the prepared dom, initialize the echarts instance 
        var myChart = echarts.init(document.getElementById('main'));
        var n1 = Math.floor(Math.random()*50+1);
        var n2 = Math.floor(Math.random()*50+1);
        var n3 = Math.floor(Math.random()*50+1);
        var n4 = Math.floor(Math.random()*50+1);
        var n5 = Math.floor(Math.random() * 50 + 1 );
         var n6 = Math.floor(Math.random() * 50 + 1 );
         // Specify the configuration items and data of the chart 
        var option = {
            title: {
                text: ' ECharts Getting Started Example '
            },
            tooltip: {},
            legend: {
                data:[ ' Sales ' ]
            },
            xAxis: A
                data: [ " shirt " , " cardigan " , " chiffon shirt " , " pants " , " high heels " , " socks " ],
                triggerEvent:true
                
            },
            yAxis: {triggerEvent:true},
            series: {
                name: ' Sales ' ,
                type: 'bar',
                data: [n1, n2, n3, n4, n5, n6],
                itemStyle: {  
                    normal: {  
                        label: {  
                            show: true,  
                            position: 'top'
                        }  
                    }  
                }
            }
        };
        // Display the chart using the configuration items and data just specified. 
        myChart.setOption(option);

        myChart.on( ' click ' , function (params) { 
           // When componentType == "xAxis" or == "yAxisx", take the value of the coordinate axis when it was clicked params.value 
              // alert("Clicked" +params.componentType+"x-axis label"+params.value); 
          if (params.componentType ==  " xAxis " ){  
              alert( " clicked " + params.value + " x-axis label " );  
          }else if (params.componentType == "yAxis") {
              alert( " clicked " + params.value + " y-axis label " );  
          }
          else{  
              alert( " Clicked " + params.name + " Histogram " + params.value);  
          }  

        // invalid start 
        //      Get data length 
        //  　　alert(option.series[0].data.length); 
        //       Get the value of N data 
        //  　　alert(option.series[0].data[3]) ; 
        //      Get the value corresponding to the param.dataIndex event in the series 
        // alert(params.dataIndex); 
        //  　　alert(option.series[params.seriesIndex].data[params.dataIndex]); 
        // invalid end

            // alert(param.value); 
        //     Get the value corresponding to the current click event index of xAxis, which can be used as a parameter 
              // alert("test "+option.xAxis.data[params.dataIndex]);      
        　　// param. dataIndex Gets the current click index, 
        //  　　alert(param.dataIndex); 
        //   The index of the current click event in the series 
        //    alert(param.seriesIndex); 
        // For the specific parameters contained in param, see https://blog.csdn. net/allenjay11/article/details/76033232 
          updatePage(option.xAxis.data[params.dataIndex],params.value);

          // refresh();
        });
    </script>

<script type="text/javascript">
  function updatePage(tag, value){
    var xAxisTag = $("#xAxisTag");  
    xAxisTag.html(tag);
    var barValue = $("#barValue");  
    barValue.html(value);
  };

  function refresh(){            
   // Refresh the page 
  // location.reload(); 
      window.location.reload();       
  };     
</script>
</html>

Add click event to ECharts histogram

Guess you like