项目需求:
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+,params.name);
console.log('选择的答案:',params.seriesName);
console.log('选择答案的人数:',params.value);      //getStuAnswer(params.seriesName,examClassId,params.name);//调用接口
})

案例:

var examClassId = ;
var datax = ['','','',''];
var dataY = [,,,];
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: ,
endValue: ,
},
{
type: 'inside',
startValue: ,
endValue: ,
}],
grid: {
left: '4%',
right: '4%',
bottom: '3%',
containLabel: true,
},
series: [{
data: dataY,
type: 'bar',
barWidth:,
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+,params.name);
console.log('选择的答案:',params.seriesName);
console.log('选择答案的人数:',params.value);
//getStuAnswer(params.seriesName,examClassId,params.name);
layer.open({
type : ,
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);
}, );
}
}); })
}
/**
*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 == ""){
if(res.data != null){
if(res.data.length != ){
var html = '<div><ul class="stuList">';
$.each(res.data,function(i,elom){
if((i+) == 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:,
yes:function(){
layer.closeAll();
}
});
}
}
}
},
error:function(e){
console.log('服务器出现异常');
}
})
}

效果图:

echarts点击柱状图时触发点击事件的更多相关文章

  1. [C# 基础知识系列]专题五:当点击按钮时触发Click事件背后发生的事情 (转载)

    当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑问的—— ...

  2. JS/jQuery点击某元素之外触发事件

    JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...

  3. 点击input时,里面默认字体消失显示

    点击input时,点击input里面默认字体消失显示: <input type="" name="" id="" value=&quo ...

  4. 在Echarts区域的任何位置精准触发事件

    ​ 需求背景:点击Echarts区域跳转页面,跳转的区域不包括grid的坐标及标签,翻看了Echarts官网,实现触发事件之的on方法,但是此方法只能在鼠标点击某个图形上会触发,这样并不能实现需求.通 ...

  5. ECharts柱状图添加点击事件

    参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...

  6. Echarts柱状图的点击事件

    最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...

  7. 解决JavaScript拖动时同时触发点击事件的BUG

    在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...

  8. Echarts如何添加鼠标点击事件?防止重复触发点击事件

    Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...

  9. view.performClick()触发点击事件

    1.主要作用 自动触发控件的点击事件 2.界面的布局文件  activity_main.xml <RelativeLayout xmlns:android="http://schema ...

随机推荐

  1. 小程序图片在安卓上拉伸的问题&导航&返回首页

      今天提了一个bug,有几张图片在安卓上面加载会先变大拉伸再恢复正常 出现这样的问题应该是用widthFix造成的 具体原因还不是很清楚,因为都是本地图片,所以我就直接把高也设置好就暂时没有这个问题 ...

  2. Codeforces 348D DP + LGV定理

    题意及思路:https://www.cnblogs.com/chaoswr/p/9460378.html 代码: #include <bits/stdc++.h> #define LL l ...

  3. codeforces 1A

    题目大意: 就是在一块长方形地面上铺瓷砖,然后一共要用多少块瓷砖,一块瓷砖被割开后只能用一次,输入长,宽,以及瓷砖边长,求一共需要多少块瓷砖: 基本思路: 这里有个技巧:就长来说,需要(n+k-1)/ ...

  4. 解决Addin开发不能断点调试的问题

    ArcMap或CAD在调试C#二次开发的插件的时候,在一些情况下不能正常进入到断点中,原因是debugger type不对应. eg. 右键单击Solution Explorer,选择Add-> ...

  5. IntelliJ IDEA2016.1 + maven 创建java web 项目[转]

    最近开始使用idea 来写java项目了,这个很流行,相比Eclipse方便了很多.功能多了,相对应的使用的复杂度也较高了,因为网上很多的使用和创建项目的简单教程,都是基于老版本的,每个新版本都有不一 ...

  6. Ubuntu 18.04 安装 python3.7

    Ubuntu 18.04系统内置了Python 3.6和Python 2.7版本,以下是在Ubuntu 18.04系统中安装Python 3.7版本的方法. 1. 执行所有升级# sudo apt u ...

  7. C++11下的关键字

    STL类:stack,queue,deque,priority_queue,map,set,multiset,bitset,vector 函数类:min,max,swap,sqrt,log,rever ...

  8. Java中链接MS SQL 数据库用法详解

    一.第一种方法: 使用JDBC-ODBC的桥方式 JDBC-ODBC桥连接器是用JdbcOdbc.class 和一个用于访问ODBC驱动程序的本地库实现的,对于Windows平台,该本地库是一个动态链 ...

  9. Service3

    RAID阵列概述• 廉价冗余磁盘阵列– 通过硬件/软件技术,将多个较小/低速的磁盘整合成一个大磁盘– 阵列的价值:提升I/O效率.硬件级别的数据冗余– 不同RAID级别的功能.特性各不相同 ##### ...

  10. 用C语言实现yield

    用C语言实现yield C/C++中没有yield语法,有的时候想用产生器,自己实现一个循环会感觉很麻烦.C/C++应该如何实现产生器呢? class FibonacciGenerator { pub ...