项目需求:
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. 解决.Net MVC 中出现 非介入式客户端验证规则中的验证类型名称必须唯一。下列验证类型出现重复: required 的bug

    最近在开动科技创新作品的开发,出现了一个让人很烦恼的错误,每次从浏览页跳转到编辑页时就会出现一下错误 非介入式客户端验证规则中的验证类型名称必须唯一.下列验证类型出现重复: required 上一下出 ...

  2. Android中XML的命名空间、自定义属性

    命名空间(namespace) XML 命名空间提供避免元素命名冲突的方法. 举个例子,A学校有名学生叫做林小明,B学校也有名学生叫林小明,那我们如何识别这两名拥有相同名字的同学呢?这时候命名空间就派 ...

  3. 【Muduo库】【base】基本类

    一.Timestamp类  1.类图如下: 2.  知识点 (1)     这个类继承了 muduo::copyable, 以及 boost::less_than_comparable. (2)    ...

  4. Web server failed to start. Port 8080 was already in use.

    Description: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the ...

  5. CSIC_716_20191217【事务、视图、触发器、存储过程、索引】

    事务: 事务保证对数据操作时的安全性,事务中的代码要么一起成功,要么一起失败. 事务以  start transaction  开始,中间可以写诸多个sql 语句对数据库进行操作, 以rollback ...

  6. Add cast to是什么意思

    eclipse中是强制类型转换的意思.

  7. java中EL表达式怎么获取网站的根目录

    ${pageContext.request.contextPath} <a href="${pageContext.request.contextPath}/login.jsp&quo ...

  8. luoguP2590 [ZJOI2008]树的统计 [树链剖分] [TLE的LCT]

    题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u ...

  9. 73 QT编程入门

    0 引言 最近开始在QT下编程,记录一下遇到的问题以及解决方法. 1 安装下载及学习资料 (1)安装下载链接 安装链接: https://blog.csdn.net/qq_23473839/artic ...

  10. 排序算法(三)堆排序及有界堆排序Java实现及分析

    1.堆排序基数排序适用于大小有界的东西,除了他之外,还有一种你可能遇到的其它专用排序算法:有界堆排序.如果你在处理非常大的数据集,你想要得到前 10 个或者前k个元素,其中k远小于n,它是很有用的. ...