ECharts 保留 tooltip.trigger: 'axis'的情况下 实现markPoint tooltip独立自定义悬浮框 功能

在 ECharts 中实现该需求，可以通过以下步骤完成：

核心思路

1. 保留全局 axis 触发器 ：保持原有 tooltip.trigger: 'axis' 配置
2. 为 markPoint 单独配置 tooltip：在 markPoint 配置项中覆盖全局 tooltip 行为
3. 使用 formatter 自定义内容：通过函数式 formatter 实现完全自定义内容
4. 独立触发机制 ：通过 trigger: 'item' 让 markPoint 的 tooltip 独立触发

完整实现代码

option = {
  tooltip: {
    trigger: 'axis', // 全局保持 axis 触发
    axisPointer: {
      type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    type: 'line',
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    markPoint: {
      data: [{
        type: 'max',
        name: '最大值',
        // 单独配置 markPoint 的 tooltip
        tooltip: {
          trigger: 'item', // 关键配置：独立触发
          formatter: (params) => {
            return `自定义内容<br/>
                    值：${params.value}<br/>
                    类型：${params.seriesName}<br/>
                    坐标：${params.name}`;
          },
          // 可选：自定义样式
          backgroundColor: 'rgba(50,50,50,0.7)',
          borderColor: '#333',
          textStyle: { color: '#fff' }
        }
      }]
    }
  }]
};

关键配置说明

1. 双触发器共存：

   • 全局 tooltip.trigger: 'axis' 保持原有行为
   • markPoint 内部通过 tooltip.trigger: 'item' 创建独立触发域

2. 内容隔离：

   • 轴触发器显示系列数据（通过 axis 触发）
   • markPoint 触发器显示自定义内容（通过 item 触发）

3. 样式控制：

   • 可以通过 tooltip.backgroundColor 等属性完全自定义样式
   • 使用模板字符串实现多行内容布局

效果验证

• 当鼠标悬停在轴上时：显示 axis 级别的 tooltip
• 当鼠标悬停在标记点时：显示完全自定义的独立 tooltip
• 两者可以同时存在且互不干扰

高级扩展

如需更复杂的交互，可以结合以下配置：

// 在 markPoint 的 tooltip 配置中添加
extraCssText: 'box-shadow: 0 0 3px rgba(0,0,0,0.3);', // 添加阴影
enterable: true, // 允许鼠标进入 tooltip 区域
transitionDuration: 0.2 // 动画过渡时间

这种方法充分利用了 ECharts 的层级配置机制，通过局部配置覆盖全局行为，既保持了原有功能，又实现了精准的局部自定义需求。