ECharts柱状图添加点击事件

楼主^#

更多发布于：2021-01-22 15:28

参考：
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="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>
   
   您选择了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);

alert("单击了柱状图"+ params.dataIndex); //单击了第几+1 个柱状图 } // 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>

喜欢0

gogogo

管理员

UID25
粉丝0
关注0
发帖数1377

加关注写私信

沙发^#

发布于：2021-01-22 15:29

将部分内容放入到方法中，如X轴数据部分，series的data部分，方便将样式与数据进行分离。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>

<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>

您选择了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>

回复喜欢

gogogo 管理员 UID25 粉丝0 关注0 发帖数1377 加关注写私信	板凳^# 发布于：2021-01-22 15:29 https://www.cnblogs.com/huanghongbo/p/8995140.html
	回复(0) 喜欢(0)

您需要登录后才可以回帖，登录或者注册

ECharts柱状图添加点击事件

最新喜欢：