echarts可以通过点击事件获取每项的值：myChart.on(‘click‘, function (param) { } // myChart为自定义变量：var myChart = echarts.init(document.getElementById(‘echartBox‘));
可以通过param获取如下：
//param参数包含的内容有：
//param.name：X轴的值
//param.data：Y轴的值
//param.value：Y轴的值
//param.type：点击事件均为click
//param.seriesName：legend的名称
//param.seriesIndex：系列序号（series中当前图形是第几个图形第几个）
//param.dataIndex：数值序列（X轴上当前点是第几个点）
//alert(param.seriesName); //legend的名称
也可以在option的series里面自定义参数，然后通过option.series[param.seriesIndex].barIds[param.dataIndex])获取自定义的参数(barIds为自定义的参数)，如下
option = { series:{ name:‘蒸发量‘, type:‘bar‘, barIds: [‘1月1‘,‘2月2‘,‘3月3‘,‘4月4‘,‘5月5‘,‘6月6‘,‘7月7‘,‘8月8‘,‘9月9‘,‘10月10‘,‘11月11‘,‘12月12‘], //添加了barIds参数（自定义的） data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3] } } myChart.on(‘click‘, function (param) {
alert(option.series[param.seriesIndex].barIds[param.dataIndex])//获取自定义变量barIds的值,barIds要和option的series里自定义的一样
});
全部代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>点击echarts圆柱体事件</title> <script type="text/javascript" src="js/echarts.min.js"></script> </head> <body> <div id="echartBox" style="width: 800px;height: 400px;margin: 50px auto;border: 1px solid #ccc;"></div> </body> <script type="text/javascript"> window.onload = function(){ var myChart = echarts.init(document.getElementById(‘echartBox‘)); option = { title : { text: ‘某地区蒸发量‘, subtext: ‘纯属虚构‘ }, tooltip : { trigger: ‘axis‘ }, legend: { data:[‘蒸发量‘] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: [‘line‘, ‘bar‘]}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : ‘category‘, data : [‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘,‘8月‘,‘9月‘,‘10月‘,‘11月‘,‘12月‘] } ], yAxis : [ { type : ‘value‘ } ], series : [ { name:‘蒸发量‘, type:‘bar‘, barIds: [‘1月1‘,‘2月2‘,‘3月3‘,‘4月4‘,‘5月5‘,‘6月6‘,‘7月7‘,‘8月8‘,‘9月9‘,‘10月10‘,‘11月11‘,‘12月12‘], //添加了rawdate参数（自定义的） data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], markPoint : { data : [ {type : ‘max‘, name: ‘最大值‘}, {type : ‘min‘, name: ‘最小值‘} ] }, markLine : { data : [ {type : ‘average‘, name: ‘平均值‘} ] } } ] }; myChart.setOption(option, true); myChart.on(‘click‘, function (param) { //param参数包含的内容有： //param.name：X轴的值 //param.data：Y轴的值 //param.value：Y轴的值 //param.type：点击事件均为click //param.seriesName：legend的名称 //param.seriesIndex：系列序号（series中当前图形是第几个图形第几个） //param.dataIndex：数值序列（X轴上当前点是第几个点） //alert(param.seriesName); //legend的名称 alert(param.name); //X轴的值 alert(option.series[param.seriesIndex].barIds[param.dataIndex]);//获取自定义的值 }); } </script> </html>
原文：https://www.cnblogs.com/zzwlong/p/11496439.html