如何实现ECharts仅让坐标轴首尾标签可点击触发事件？

ECharts本身没有直接的配置项实现仅首尾坐标轴标签可点击并显示hover指针样式，但可以通过自定义标签样式+事件拦截的组合方案实现，具体步骤如下：

1. 自定义坐标轴标签样式，区分可点击状态 #

通过axisLabel的rich富文本样式，给首尾标签设置pointer鼠标指针，其他标签保留默认样式，让用户直观区分可点击元素：

xAxis: {
  triggerEvent: true,
  type: 'category',
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  axisLabel: {
    // 定义富文本样式
    rich: {
      clickable: {
        cursor: 'pointer'
      },
      normal: {
        cursor: 'default'
      }
    },
    // 根据索引判断标签样式
    formatter: function(value, index) {
      const isFirstOrLast = index === 0 || index === this.data.length - 1;
      return isFirstOrLast ? '{clickable|' + value + '}' : '{normal|' + value + '}';
    }
  }
}

2. 拦截点击事件，仅响应首尾标签 #

开启triggerEvent后，所有标签都会触发点击事件，需要在事件回调里过滤非首尾标签的点击操作：

// 假设myChart是你的ECharts实例
myChart.on('click', function(params) {
  // 只处理x轴标签的点击
  if (params.componentType === 'xAxis') {
    const axisData = myChart.getOption().xAxis[0].data;
    const isFirstOrLast = params.dataIndex === 0 || params.dataIndex === axisData.length - 1;
    if (isFirstOrLast) {
      // 这里执行你的设置最小值/最大值逻辑
      console.log('触发首尾标签操作:', params.value);
    }
    // 非首尾标签直接忽略
  }
});

Y轴的适配方案 #

如果是数值型Y轴，逻辑类似：

• 通过axisLabel.formatter判断当前标签是否为轴的最小/最大值（或对应索引为0和最后一个）
• 事件回调中同样过滤仅处理首尾标签的点击事件

内容的提问来源于stack exchange，提问作者Stefan