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 ...
随机推荐
- LeetCode Array Easy169. Majority Element
Description Given an array of size n, find the majority element. The majority element is the element ...
- LeetCode Array Easy 167. Two Sum II - Input array is sorted
Description Given an array of integers that is already sorted in ascending order, find two numbers s ...
- Boost Doc Home
{ //http://charette.no-ip.com:81/programming/doxygen/boost/group__async__read.html#gafe3e905a43504bd ...
- jQuery冒泡事件阻止
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- 【Flutter学习】之VSCode下Flutter常用终端命令行
Flutter 常用命令行 相关项目操作 查看Flutter版本 查看当前版本 flutter --version 查看所有版本 flutter version 打印所有命令行用法信息 flutter ...
- 127.0.0.1和localhost不能正确映射的问题
可能引起的问题: 检查:分别ping一下127.0.0.1和localhost 以上是正确演示,不匹配的话,ping localhost会返回: 解决方案: 可能1: 在浏览器中打开http://12 ...
- JavaScript 原生事件
1.原生事件的绑定:https://www.cnblogs.com/shsxt/p/7903216.html a.DOM0级事件: 1. 行内事件 2. 元素.on事件名=函数 b.DOM2级事件:a ...
- DOS和DDOS攻击
1.什么是DOS攻击 首先注意这里是DOS(Denial Of Service)攻击,并非DoS.DoS是微软早期的系统版本. DoS即Denial Of Service,拒绝服务的缩写.DoS是指故 ...
- (¥1011)->(一千零一拾一元整)输出
public class RenMingBi { /** * @param args add by zxx ,Nov 29, 2008 */ private static final char[] d ...
- monkeyrunner 进行多设备UI测试
monkeyrunner进行多设备UI测试 首先你要连接好多个手机设置好已经连接好的手机的ip列表ipp = ['192xxx','192xxx']杀掉之前所有appium进程subprocess. ...