ECharts柱状图添加点击事件
参考：
https://zhuanlan.zhihu.com/p/33050579
https://blog.csdn.net/sophia_xiaoma/article/details/78055947
http://www.jb51.net/article/125820.htm
https://www.cnblogs.com/zhzhair-coding/p/6953982.html?utm_source=itdadao&utm_medium=referral
对于ECharts生成的图表数据，series区域默认已添加了开启了点击方法，但是需要自己的定义函数。
X轴和Y轴默认未开启点击事件，需要开启。
triggerEvent:true
本示例实现了以下功能：
1.点击柱状图时会刷新数据，但不刷新页面。
2.数据部分可以通过ajax函数生成。
3.点击刷新更新柱状图内容。
具体代码如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- <script src="http://echarts.baidu.com/dist/echarts.min.js"></script> -->
<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
您选择了X轴的标签[<span id="xAxisTag"></span>],他的值为[<span id="barValue"></span>]
<input type="submit" name="" value="刷新" onclick="refresh()">
<div id="main" style="width: 600px;height:400px;"></div> </body>
<script type="text/javascript">
function getSeriesData(){ //根据js方法本身的加载顺序，此方法需要定义在myChart前面
//此处可以通过后台生成数据，这样后台就无需返回整个option，只需要返回动态的数据部分即可
// $.ajax({
// type: 'GET',
// url: "getSeriesData",
// cache: false,
// async : false,
// dataType: 'json',
// success: function (result) {
// seriesdata = result;
// },
// error: function (result, XMLHttpRequest, textStatus, errorThrown) {
// // 状态码
// // console.log(XMLHttpRequest.status);
// // console.log(XMLHttpRequest.toLocaleString());
// // 状态
// // console.log(XMLHttpRequest.readyState);
// // 错误信息
// // console.log(textStatus);
// }
// }); var n1 = Math.floor(Math.random()*50+1);
var n2 = Math.floor(Math.random()*50+1);
var n3 = Math.floor(Math.random()*50+1);
var n4 = Math.floor(Math.random()*50+1);
var n5 = Math.floor(Math.random()*50+1);
var n6 = Math.floor(Math.random()*50+1);
seriesdata = [n1, n2, n3, n4, n5, n6]; return seriesdata;
}
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// var n1 = Math.floor(Math.random()*50+1);
// var n2 = Math.floor(Math.random()*50+1);
// var n3 = Math.floor(Math.random()*50+1);
// var n4 = Math.floor(Math.random()*50+1);
// var n5 = Math.floor(Math.random()*50+1);
// var n6 = Math.floor(Math.random()*50+1);
//var seriesdata = [n1, n2, n3, n4, n5, n6]; var seriesdata ;
seriesdata=getSeriesData();
console.log("seriesdata getSeriesData is "+seriesdata); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
triggerEvent:true,
axisTick: {
alignWithLabel: true //坐标值是否在刻度中间
} },
yAxis: {triggerEvent:true},
series: {
name: '销量',
type: 'bar',
//data: [n1, n2, n3, n4, n5, n6],
data : seriesdata,
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];
//若返回的list长度不足，不足部分自动显示为最后一个颜色
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top'
}
}
}
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.on('click', function (params) {
// 当componentType == "xAxis"或者 ==“yAxisx”时，取被点击时坐标轴的值params.value
// alert("单击了"+params.componentType+"x轴标签"+params.value);
// if(params.componentType == "xAxis"){
// alert("单击了"+params.value+"x轴标签");
// }else if (params.componentType == "yAxis") {
// alert("单击了"+params.value+"y轴标签");
// }
// else{
// alert("单击了"+params.name+"柱状图"+params.value);
// } // invalid start
// 获取data长度
// alert(option.series[0].data.length);
// 获取地N个data的值
// alert(option.series[0].data[3]);
// 获取series中param.dataIndex事件对应的值
// alert(params.dataIndex);
// alert(option.series[params.seriesIndex].data[params.dataIndex]);
//invalid end // alert(param.value);
// 获取xAxis当前点击事件索引对应的值，可以用作传参
// alert("test "+option.xAxis.data[params.dataIndex]);
//param.dataIndex 获取当前点击索引，
// alert(param.dataIndex);
// 当前点击事件位于series中的索引
// alert(param.seriesIndex);
//param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232
updatePage(option.xAxis.data[params.dataIndex],params.value); refresh();
});
</script> <script type="text/javascript">
function updatePage(tag, value){
var xAxisTag = $("#xAxisTag");
xAxisTag.html(tag);
var barValue = $("#barValue");
barValue.html(value);
}; function refresh(){
// 刷新页面
// location.reload();
//window.location.reload(); //局部刷新main内容
//此处没有用常用的刷新div等方法，而是直接改变了option的值，然后重新赋值给myChart
console.log("refresh");
option.title.text='入门';
// option.series.data[0] = Math.floor(Math.random()*50+1);
// option.series.data[1] = Math.floor(Math.random()*50+1);
// option.series.data[2] = Math.floor(Math.random()*50+1);
// option.series.data[3] = Math.floor(Math.random()*50+1);
// option.series.data[4] = Math.floor(Math.random()*50+1);
// option.series.data[5] = Math.floor(Math.random()*50+1); //console.log(option.series.data[0]);
//var v1 = Math.floor(Math.random()*50+1);
//option.series.data[0] = v1; //简化方法，调用getSeriesData更新数据。
option.series.data = getSeriesData(); myChart.setOption(option);
}; </script>
</html>
将部分内容放入到方法中，如X轴数据部分，series的data部分，方便将样式与数据进行分离。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- <script src="http://echarts.baidu.com/dist/echarts.min.js"></script> -->
<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
您选择了X轴的标签[<span id="xAxisTag"></span>],他的值为[<span id="barValue"></span>]
<input type="submit" name="" value="刷新" onclick="refresh()">
<div id="main" style="width: 600px;height:400px;"></div> </body>
<script type="text/javascript">
function getSeriesData(){ //根据js方法本身的加载顺序，此方法需要定义在myChart前面
//此处可以通过后台生成数据，这样后台就无需返回整个option，只需要返回动态的数据部分即可
// $.ajax({
// type: 'GET',
// url: "getSeriesData",
// cache: false,
// async : false,
// dataType: 'json',
// success: function (result) {
// seriesdata = result;
// },
// error: function (result, XMLHttpRequest, textStatus, errorThrown) {
// // 状态码
// // console.log(XMLHttpRequest.status);
// // console.log(XMLHttpRequest.toLocaleString());
// // 状态
// // console.log(XMLHttpRequest.readyState);
// // 错误信息
// // console.log(textStatus);
// }
// }); var n1 = Math.floor(Math.random()*50+1);
var n2 = Math.floor(Math.random()*50+1);
var n3 = Math.floor(Math.random()*50+1);
var n4 = Math.floor(Math.random()*50+1);
var n5 = Math.floor(Math.random()*50+1);
var n6 = Math.floor(Math.random()*50+1);
seriesdata = [n1, n2, n3, n4, n5, n6]; return seriesdata;
} function getxAxisData(){
//同样适用以ajax的方式从后台获取数据
xAxisData = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];
return xAxisData;
} function getSaleOption(){
saleOption = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
// data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
data : getxAxisData(),
triggerEvent:true,
axisTick: {
alignWithLabel: true //坐标值是否在刻度中间
} },
yAxis: {triggerEvent:true},
series: {
name: '销量',
type: 'bar',
//data: [n1, n2, n3, n4, n5, n6],
// data : seriesdata,
data : getSeriesData(),
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];
//若返回的list长度不足，不足部分自动显示为最后一个颜色
return colorList[params.dataIndex]
},
label: {
show: true,
position: 'top'
}
}
}
}
}; return saleOption;
} </script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据
var option = getSaleOption();
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.on('click', function (params) {
//param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232
updatePage(option.xAxis.data[params.dataIndex],params.value); refresh();
});
</script> <script type="text/javascript">
function updatePage(tag, value){
var xAxisTag = $("#xAxisTag");
xAxisTag.html(tag);
var barValue = $("#barValue");
barValue.html(value);
}; function refresh(){ //局部刷新series内容
//此处没有用常用的刷新div等方法，而是直接改变了option的值，然后重新赋值给myChart //简化方法，调用getSeriesData更新数据。
option.series.data = getSeriesData(); myChart.setOption(option);
}; </script>
</html>
ECharts柱状图添加点击事件的更多相关文章
- Echarts柱状图的点击事件
最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...
- echarts对每个data[i]的图片添加点击事件
1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...
- ECharts问题--散点图中对散点添加点击事件
1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...
- echart字符云之添加点击事件
// 路径配置 require.config({ paths : { echarts : 'jquery/echarts-2.2.7/build/dist' } }); // 使用EChart.js画 ...
- echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
- echarts雷达图点击事件 包含（2.x，3.85，4.02）测试
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...
- iOS开发小技巧 - label中的文字添加点击事件
Label中的文字添加点击事件 GitHub地址:https://github.com/lyb5834/YBAttributeTextTapAction 以前老师讲过类似的功能,自己懒得回头看了,找了 ...
- 【Swift 2.1】为 UIView 添加点击事件和点击效果
前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...
- ThinkPHP框架下，给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
随机推荐
- dRMT: Disaggregated Programmable Switching, SIGCOMM17
Reference: dRMT, SIGCOMM 2017 今年的SIGCOMM17会议上,Cisco System和MIT的团队针对RMT模型现有的问题,合作发表了这篇"dRMT: Dis ...
- 小文笔记 - phantomjs
小文笔记 - phantomjs 视频推荐: http://www.intalesson.com/compedium/phantom 2017-05-13 第一节:安装 Windows安装: 下载解压 ...
- 如何让浏览器不解析html？
原问题: 在页面中,除了xmp,textarea以及js转义外,还有什么办法可以让html标签在不被浏览器解析而正常显示呢? 答: 要符合“内部的html标签不被解析”,我们根据HTML5的标准,分元 ...
- Angular CLI命令
ng 基础命令 npm install –g @angular/cli npm install -g @angular/cli@latest ng serve –prot –aot 启动项目并压缩项目 ...
- 【译】第21节---Fluent API
原文:http://www.entityframeworktutorial.net/code-first/fluent-api-in-code-first.aspx 在前面的学习中.我们已经看到不同的 ...
- springmvc处理过程理解（一）
DispatcherServlet前端控制器:接收request,进行response HandlerMapping处理器映射器:根据url查找Handler.(可以通过xml配置方式,注解方式) H ...
- Missing artifact com.oracle:ojdbc6:jar:10.2.0.4.0问题解决 ojdbc包pom.xml出错
遇到的问题:ojdbc.jar包出错 原因:因为oracle的ojdbc.jar是收费的,所以maven的中央仓库中没有这个资源,只能通过配置本地库才能加载到项目中去. 解决办法: (前提是安装好了m ...
- 要使用myConfig.properties配置文件作为实体类的映射文件的话,格式要用=,最关键的要和实例类中通过反射获取值的KEY要一样,不样会反射取不到值
ABC=https://fsdfsdf.iy.comABCId=L2345345ZhP345ABCKey=sfdf4234f234dhE6Ut0aABCName=Gassd010 上面是myConfi ...
- 力扣（LeetCode）191. 位1的个数
编写一个函数,输入是一个无符号整数,返回其二进制表达式中数字位数为 '1' 的个数(也被称为汉明重量). 示例 1: 输入:00000000000000000000000000001011 输出:3 ...
- 力扣 （LeetCode）657. 机器人能否返回原点
在二维平面上,有一个机器人从原点 (0, 0) 开始.给出它的移动顺序,判断这个机器人在完成移动后是否在 (0, 0) 处结束. 移动顺序由字符串表示.字符 move[i] 表示其第 i 次移动.机器 ...