echarts點擊柱狀圖時觸發點擊事件

項目需求:
1.通過echarts把數據展示為柱狀圖
2.點擊對應的柱狀圖 顯示對應的彈窗

主要用到的時 echarts中的 "click" 事件, 使用demo:

 
var myChart = echarts.init(document.getElementById(doms));//初始化對象
myChart.on('click',function(params){
            var answer = params.seriesName;
            var number = params.name;
            var countValue = params.value;
            console.log(params);
            console.log('題號：',params.componentIndex+1,params.name);
            console.log('選擇的答案：',params.seriesName);
            console.log('選擇答案的人數：',params.value);
                
     
　　　　 //getStuAnswer(params.seriesName,examClassId,params.name);//調用接口
 })

案例：

var examClassId = 1470;
var datax = ['1','2','3','4'];
var dataY = [99,90,70,80];
addStatic('charts',datax,dataY,examClassId);
/**
     * 答案統計
     * */
    function addStatic(doms,datax,dataY,examClassId){
        var myChart = echarts.init(document.getElementById(doms));
       var option = {
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show : true,
                    feature : {
                        magicType : {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: dataX,
                    name:'題號'
                },
                yAxis: {
                    type: 'value',
                    name:"人數"
                },
                dataZoom: [{
                    show: true,
                    startValue: 0,
                    endValue: 10,
                },
                {
                    type: 'inside',
                    startValue: 1,
                    endValue: 10,
                }],
                grid: {
                    left: '4%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true,
                },
                series: [{
                    data: dataY,
                    type: 'bar',
                    barWidth:20,
                    itemStyle: {
                         normal: {
                             normal:{
                                 color:'#4ad2ff'
                             },
                            label: {
                                show: true,
                                position: 'top',
                                formatter: '{c}人'
                            }
                        }
                    }
                }]
            };
        myChart.clear();
        myChart.setOption(option);
        window.addEventListener('resize', function () {myChart.resize();})
        
        myChart.on('click',function(params){//主要代碼 var answer = params.seriesName;
            var number = params.name;
            var countValue = params.value;
            console.log(params);
            console.log('題號：',params.componentIndex+1,params.name);
            console.log('選擇的答案：',params.seriesName);
            console.log('選擇答案的人數：',params.value);
            //getStuAnswer(params.seriesName,examClassId,params.name);
            layer.open({
                type : 2,
                title : "第"+number+"題選擇答案為："+answer+" 的學生，共"+countValue+"人",
                area : [ '500px', '500px'],
                shade : 0.2,
                maxmin : true,
                content : 'stuAnswerList.html',
                success: function (layero, index) {
                    // 獲取子頁面的iframe
                    var iframe = window['layui-layer-iframe' + index];
                    setTimeout(function() {
                        iframe.init(answer,examClassId,number);
                    }, 200);
                }
            });
            
        })
    }
    /**
    *whoChoseTheAnswer 哪個學生選擇該選項
    */
    function getStuAnswer(answer,examClassId,number){
        $.ajax({
            url:'/xxxxxxxx/whoAnswer',//接口
            type:'post',
            data:{answer:answer,examClassId:examClassId,number:number},
            success:function(res){
                console.log(res);
                if(res.code == "0000"){
                    if(res.data != null){
                        if(res.data.length != 0){
                            var html = '<div><ul class="stuList">';
                            $.each(res.data,function(i,elom){
                                if((i+1) == res.data.length){
                                    html+='<li>'+elom.info +'<span style="margin-left:10px;">' + elom.name+'</span></li></ul>'
                                }else{
                                    html+='<li>'+elom.info +'<span style="margin-left:10px;">' + elom.name+'</span></li>'
                                }
                            })
                            html +='</div>';
                            layer.open({
                                title:"第"+number+"題選擇該答案:"+answer+" 的學生信息",
                                content: html ,
                                area:['520px','520px'],
                                closeBtn:0,
                                yes:function(){
                                    layer.closeAll();
                                }
                            });
                        }
                    }
                }
            },
            error:function(e){
                console.log('服務器出現異常');
            }
        })
    }

效果圖：