eCharts xAxis标签单击事件

Question

我正在寻找一种在xAxis标签上注册点击事件的方法。用户应该能够点击xAxis标签(而不是系列(，我们应该能够调用一个函数。

无论是直接方式还是间接方式都可以。

Answer 1

您几乎可以监听任何事件。只需启用Axis事件并按参数筛选事件。也就是说，你需要做：

1. 启用xAxis事件：

option = {
// ...
xAxis: {
// ...
triggerEvent: true
}
}

2. 开始侦听图表实例中的click事件，并检查targetType以获取标签的所有事件：

myChart.on('click', params => {
if(params.targetType === 'axisLabel'){
if(params.value === 'MyLabel #3'){
console.log("Hello, is it me you're looking for");
// Do something ...
}
}
})

此外，您还可以使用游击手并放下if:

myChart.on('click', { targetType: 'axisLabel', value: 'Category1' }, params => {
console.log(params.value);
})

var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts'
},
tooltip: {},
xAxis: {
data: ["Category1","Category2","Category3"],
triggerEvent: true
},
yAxis: {},
series: [{
name: 'Series',
type: 'bar',
data: [5, 20, 36]
}]
};
myChart.setOption(option);

myChart.on('click', params => {
	if(params.targetType === 'axisLabel'){
console.log(params.value);    	
}
})

<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>

• 强烈推荐有关事件和操作的官方教程
• 事件的API文档