当然可以实现！这在ApexCharts里通过针对性的配置就能轻松搞定，我给你拆解具体的实现思路和代码示例：

核心思路 #

我们需要分两步配置：

1. 控制X轴标签显示：通过X轴的标签格式化函数，只渲染偶数的刻度标签
2. 保留Tooltip的原始值：自定义Tooltip的X值格式化逻辑，确保显示数据里的原始X值（不管是否为偶数）

完整代码示例 #

// 你的系列数据
const seriesData = [
  { "x": 0, "y": 100 }, 
  { "x": 0.5, "y": 200 }, 
  { "x": 1, "y": 300 }, 
  { "x": 1.5, "y": 400 }
];

const chartOptions = {
  series: [{
    data: seriesData
  }],
  chart: {
    type: 'line', // 这里用折线图举例，其他类型同样适用
    height: 350
  },
  xaxis: {
    type: 'numeric', // 因为你的X值是数值型，必须设置这个
    labels: {
      // 关键：只显示偶数的X轴标签
      formatter: (val) => {
        // 判断当前刻度值是否为偶数，是则返回值，否则返回空字符串隐藏标签
        return val % 2 === 0 ? val : '';
      }
    },
    // 可选优化：让刻度线仅在偶数位置生成（如果需要的话）
    tickPlacement: 'on',
    tickAmount: Math.floor((Math.max(...seriesData.map(item => item.x)) - Math.min(...seriesData.map(item => item.x))) / 2) + 1
  },
  tooltip: {
    x: {
      // 关键：Tooltip显示原始的X值，不受X轴标签过滤影响
      formatter: (val) => val
    }
  }
};

// 初始化并渲染图表
const chart = new ApexCharts(document.querySelector('#your-chart-container'), chartOptions);
chart.render();

配置说明 #

• X轴标签控制：xaxis.labels.formatter函数会对每个刻度值进行判断，只有当值是偶数时才返回内容，非偶数的位置会隐藏标签。
• 刻度线优化（可选）：如果不想让非偶数位置出现刻度线，可以通过tickAmount计算出偶数刻度的数量，配合tickPlacement: 'on'让刻度精准落在偶数点上。
• Tooltip原始值保留：tooltip.x.formatter直接返回原始的X值，所以不管X轴是否显示该值，鼠标hover到对应数据点时，Tooltip都会显示真实的X数值（比如0.5、1.5这些非偶数）。

这个方案适用于任何数值型X轴的场景，即使你的X值范围扩大（比如到10、20），逻辑依然能正常工作。

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