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+,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点击柱状图时触发点击事件的更多相关文章
- [C# 基础知识系列]专题五:当点击按钮时触发Click事件背后发生的事情 (转载)
当我们在点击窗口中的Button控件VS会帮我们自动生成一些代码,我们只需要在Click方法中写一些自己的代码就可以实现触发Click事件后我们Click方法中代码就会执行,然而我一直有一个疑问的—— ...
- JS/jQuery点击某元素之外触发事件
JQuery // 第一步:点击任何地方都触发事件 $(document).click(function(){ alert("点击当前页面的任何地方都触发此点击事件:"); }); ...
- 点击input时,里面默认字体消失显示
点击input时,点击input里面默认字体消失显示: <input type="" name="" id="" value=&quo ...
- 在Echarts区域的任何位置精准触发事件
需求背景:点击Echarts区域跳转页面,跳转的区域不包括grid的坐标及标签,翻看了Echarts官网,实现触发事件之的on方法,但是此方法只能在鼠标点击某个图形上会触发,这样并不能实现需求.通 ...
- ECharts柱状图添加点击事件
参考: https://zhuanlan.zhihu.com/p/33050579 https://blog.csdn.net/sophia_xiaoma/article/details/780559 ...
- Echarts柱状图的点击事件
最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...
- 解决JavaScript拖动时同时触发点击事件的BUG
在做在线地图项目的时候,在给marker点绑定事件时,因为有点击事件click,同时又存在拖动dragEnd事件,首先没有重大缺陷,就是在用户在点击的时候,有时候本想是点击,但是他触发了drag的事件 ...
- Echarts如何添加鼠标点击事件?防止重复触发点击事件
Echarts如何添加鼠标点击事件? 1.通常我们只使用了以下代码,通过配置项和数据显示图表. var myChart = echarts.init(document.getElementById(' ...
- view.performClick()触发点击事件
1.主要作用 自动触发控件的点击事件 2.界面的布局文件 activity_main.xml <RelativeLayout xmlns:android="http://schema ...
随机推荐
- css3新增(圆角边框(border-radius),盒子阴影(box-shadow),文字阴影(text-shadow),背景缩放(background-size))
1.圆角边框 border-radius border-radius 属性用于设置元素的外边框圆角 语法:border-radius:length; 参数值可以是数值 或者 百分比 的形式 正方形, ...
- Light项目---vue搭建前端时遇见的一些问题
css样式中设置的: opacity 表示透明度 将js对象存储到localStorge中 的时候,直接存储是不行的,会变成[object Object],都是这样的数据, 需要将其进行JSON化处理 ...
- mysql添加外键语句
sql语句格式: · 添加外键约束:alter table 从表 add constraint 外键(形如:FK_从表_主表) foreign key (从表外键字段) references 主表(主 ...
- JNI intArray
JNIDemo.java public class JNIDemo { static { /* 1. load */ System.loadLibrary("native"); / ...
- Shell: 文本文件操作
文件显示和信息 wc wc 可以用于统计文件的行数和单词数. nl nl 在文件的每行内容前面加上行号. 基于行的操作 grep grep 用于筛选匹配特定字符的行. grep "Hello ...
- Centos6安装破解JIRA7.3.8
jira是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪(bug管理).客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域. 好了言归正传: 安装jira之前我 ...
- 【学术篇】CF833B TheBakery 分治dp+主席树
题目の传送门~ 题目大意: 将\(n\)个蛋糕分成恰好\(k\)份, 求每份中包含的蛋糕的种类数之和的最大值. 这题有两种做法. 第一种是线段树优化dp, 我还没有考虑. 另一种就是分治+主席树. 然 ...
- 【LeetCode】Heap
[215] Kth Largest Element in an Array [Medium] 给个无序数组,返回第K大的数字. 方法1. 直接使用优先队列 priority_queue class S ...
- 初撩RESTful
1. 什么是RESTful? 一种软件架构风格,设计风格,用于客户端和服务端交互类的架构. 一组架构约束条件和原则 2. 什么是RESTful架构? 客户端通过http动词(get/post等)对服务 ...
- 异步ajax请求数据处理
jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...