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 ...
随机推荐
- Shell内置命令——declare
- 学习记录:@Transactional 事务不生效
测试时使用spring boot2.2.0,在主类中调用,@Transactional 不起作用,原代码如下: @SpringBootApplication @Slf4j @Component pub ...
- 第3篇K8S集群部署
一.利用ansible部署kubernetes准备: 集群介绍 本系列文档致力于提供快速部署高可用k8s集群的工具,并且也努力成为k8s实践.使用的参考书:基于二进制方式部署和利用ansible- ...
- k8s-1.16 二进制安装
环境机器配置: 172.16.153.70 master 172.16.77.121 node1 172.16.77.122 node2 系统初始化 [root@iZbp1c31t0jo4w553hd ...
- WPF ItemControl的源与选择项问题
具体场景: datagrid的行中有个combox 每个行是一个实例A 每个行中的SelectedItem是实例A的一个属性B 我希望实现datagrid的复制Command,具体做法是A序列化反序列 ...
- mac终端命令--自动补全
1.打开nano编辑器 输入命令 nano .inputrc,回车,打开nano编辑器 2.在nano编辑器中输入如下命令: set completion-ignore-case on set sho ...
- SQL 在表中插入
SQL INSERT INTO 语句(在表中插入) INSERT INTO 语句用于向表中插入新记录. SQL INSERT INTO 语句 INSERT INTO 语句用于向表中插入新记录. SQL ...
- AcWing 202. 最幸运的数字 (欧拉定理)打卡
8是中国的幸运数字,如果一个数字的每一位都由8构成则该数字被称作是幸运数字. 现在给定一个正整数L,请问至少多少个8连在一起组成的正整数(即最小幸运数字)是L的倍数. 输入格式 输入包含多组测试用例. ...
- js类数组转数组的方法(ArrayLike)
1. 什么是类数组ArrayLike(类数组 就是一个普通的 js对象) 类数组对象必须含有 length 属性,且元素属性名必须是数值或者可转换为数值的字符. 类数组对象不是数组对象,所以没有数 ...
- (转)数字证书, 数字签名, SSL(TLS) , SASL
转:http://blog.csdn.net/xueshanfeihu0/article/details/9154219 因为项目中要用到TLS + SASL 来做安全认证层. 所以看了一些网上的资料 ...