eCharts xAxis 标签点击事件

Question

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

直接或间接方式都可以。

Answer 1

您几乎可以收听任何活动。只需启用 Axis 事件并按参数过滤事件。即，您需要做：

启用 xAxis 事件：

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

开始监听来自图表实例的 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>

强烈推荐官方tutorial for events and actions.
API Events

eCharts xAxis 标签点击事件

eCharts xAxis labels click event

echarts