ECharts中axisTick的interval设置：非首项周一前显示间隔线

要实现仅当'Mon'不是X轴首个元素时，在其前方显示间隔线的需求，你只需要修改axisTick.interval的回调函数，同时判断两个条件：当前值为'Mon'，且'Mon'在X轴数据数组中不是第一个元素。

修改后的核心逻辑 #

interval: (index, value) => {
  // 获取Mon在X轴数据中的索引，判断是否为首个元素
  const monIndex = option.xAxis[0].data.indexOf('Mon');
  return value === 'Mon' && monIndex !== 0;
}

完整配置代码 #

const option = {
  xAxis: [
    {
      type: 'category',
      data: ['Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
      axisTick: {
        interval: (index, value) => {
          const monIndex = option.xAxis[0].data.indexOf('Mon');
          return value === 'Mon' && monIndex !== 0;
        },
        inside: true,
        length: 500
      }
    }
  ],
  yAxis: {
    type: 'value',
    show: false
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

逻辑说明 #

• 通过option.xAxis[0].data.indexOf('Mon')获取'Mon'在X轴数据中的位置，判断是否为0（首个元素）。
• 只有当当前轴刻度的值是'Mon'，且'Mon'不是第一个元素时，才返回true，触发该位置的长间隔线显示。
• 如果后续X轴数据变化（比如'Mon'变成第一个元素），间隔线会自动隐藏，完全匹配需求。

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