本文參考https://blog.csdn.net/lightpass/article/details/81457410
源碼下載 https://pan.baidu.com/s/1b858a-r34PPJv5o2qzj9Fg
提取碼：a072
參考代碼(注意：jquery版本，echarts版本會有差異，推薦上方源碼下載)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts數據少無法點擊</title>
</head>
<body>
<div id="echarts_test" style="width:600px;height:400px;border: 1px solid red;"></div>
</body>
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//初始化容器，顯示loading
var myChart = echarts.init(document.getElementById('echarts_test'), 'green');
echarts_init(myChart);
//等待1秒後，賦值數據，並監聽點擊事件
var data1 = ["張三", "李四", "王二", "李芳", "張強", "麻子", "宋強", "王五"];
var data2 = [16, 114, 197, 435, 754, 1170, 2080, 2394];
setTimeout(function(){
echarts_setdata(myChart, data1, data2);
echarts_click_monitor();
}, 1000);
function echarts_init(myChart){
var option = {};
myChart.setOption(option, true);
myChart.showLoading();
}
function echarts_setdata(myChart, data1, data2){
var option = {
title: {
text: 'Echarts數據測試',
x:'center'
},
color: ["#FFC000"],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: data1
},
series: [
{
name: '總數',
type: 'bar',
label: {
normal: {
position: 'right',
show: true
}
},
data: data2
}
]
};
myChart.hideLoading();
myChart.setOption(option);
}
function echarts_click_monitor(){
myChart.getZr().off('click');
myChart.getZr().on('click',function (params) {
var pointInPixel= [params.offsetX, params.offsetY];
if (myChart.containPixel('grid',pointInPixel)) {
/*單擊圖標X軸數據，打開詳情*/
var xIndex = myChart.convertFromPixel({seriesIndex:0},pointInPixel)[1];
alert("下標："+xIndex+"\n名稱："+data1[xIndex]+"\n總數："+data2[xIndex]);
}
});
/*圖標內，鼠標變成'可點擊小手'*/
myChart.getZr().on('mousemove',function (params) {
var pointInPixel= [params.offsetX, params.offsetY];
if (myChart.containPixel('grid',pointInPixel)) {
myChart.getZr().setCursorStyle('pointer');
};
});
}
</script>
</html>