<!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>
通过添加
myChart.on('click', function (param) {
alert(option.series[param.seriesIndex].barIds[param.dataIndex])//获取自定义变量barIds的值,barIds要和option的series里自定义的一样
});
通过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的名称