如何在ECharts多折线图中设置仅底部显示cross轴指示器标签？

可以实现这个需求，核心思路是通过全局配置AxisPointer实现跨图表联动，再针对单个图表的X轴AxisPointer单独控制标签显示状态：

具体修改步骤 #

1. 全局配置AxisPointer联动
   在ECharts的option中添加全局的axisPointer配置，设置为cross模式并联动所有X轴：

   option = {
     axisPointer: {
       type: 'cross',
       link: { xAxisIndex: 'all' } // 联动所有X轴
     },
     // 其他全局配置...
     series: [...]
   };
   

2. 控制单个图表的AxisPointer标签显示
   对中间的图表，在其X轴配置中隐藏AxisPointer标签；对底部的图表，保持标签显示：

   • 中间图表的X轴配置：

     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       axisPointer: {
         label: {
           show: false // 隐藏标签
         }
       }
     }
     

   • 底部图表的X轴配置：

     xAxis: {
       type: 'category',
       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       axisPointer: {
         label: {
           show: true // 显示标签
         }
       }
     }
     

效果说明 #

通过以上配置，所有图表的AxisPointer会同步联动显示十字线，但只有底部图表的X轴会展示对应的刻度标签，中间图表仅显示十字线而无标签，完全符合预期效果。

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