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>