如何在ECharts中修改鼠标悬停时X轴/Y轴名称的样式？

ECharts的nameTextStyle配置确实不支持直接为轴名称的富文本设置鼠标悬停状态样式，得通过事件监听+动态修改的方式实现，具体步骤如下：

• 第一步：给轴名称富文本添加标识
  先给目标轴的富文本块设置id或者明确的富文本标签，方便后续定位修改：

xAxis: {
  name: '{axisName|自定义轴名称}',
  nameTextStyle: {
    rich: {
      axisName: {
        fontSize: 14,
        color: '#333',
        // 这里写初始样式
      }
    }
  }
}

• 第二步：监听鼠标事件动态切换样式
  通过监听图表的mouseover和mouseout事件，判断鼠标是否在轴名称区域，再用dispatchAction修改富文本样式：

const myChart = echarts.init(document.getElementById('chart'));

// 鼠标悬停时修改样式
myChart.on('mouseover', params => {
  if (params.componentType === 'axis' && params.axisName === 'xAxis') {
    myChart.dispatchAction({
      type: 'richTextStyle',
      componentType: 'xAxis',
      name: true,
      richTextIndex: 0, // 对应富文本块的顺序索引，第一个块就是0
      style: {
        fontSize: 16,
        color: '#ff4500',
        textShadowBlur: 4,
        textShadowColor: 'rgba(0,0,0,0.3)',
        textShadowOffsetX: 1,
        textShadowOffsetY: 1
      }
    });
  }
});

// 鼠标离开时恢复初始样式
myChart.on('mouseout', params => {
  if (params.componentType === 'axis' && params.axisName === 'xAxis') {
    myChart.dispatchAction({
      type: 'richTextStyle',
      componentType: 'xAxis',
      name: true,
      richTextIndex: 0,
      style: {
        fontSize: 14,
        color: '#333'
      }
    });
  }
});

• 关键注意点：
  • 如果是Y轴，把代码里的xAxis替换成yAxis即可；
  • richTextIndex要和富文本块的顺序对应，多个富文本块需要分别设置索引；
  • 该方法需要ECharts 5.0及以上版本支持，旧版本请先升级。

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