Vue Apex横向柱状图如何实现Y轴标签hover时显示完整名称的tooltip

方案1：极简实现（原生title属性，推荐优先使用） #

仅需修改2处Y轴标签配置即可实现，无需额外逻辑：

1. 在yaxis.labels配置中新增useHtml: true，开启标签HTML渲染支持
2. 修改原有截断逻辑，返回带完整文本title属性的span标签

修改后的Y轴配置代码：

yaxis: {
  show: true,
  labels: {
    show: true,
    align: 'left',
    minWidth: 50,
    maxWidth: 300,
    useHtml: true, // 新增：开启HTML渲染支持
    style: {
      fontSize: '12px',
    },
    offsetX: 10,
    offsetY: 0,
    rotate: 0,
    title : "jhashvcshacas  sagfuasf ashdgaug ",
    formatter: (value) => { 
      const showText = value.length > 11 ? value.slice(0,11)+'..' : value
      // 完整文本存到原生title属性中，hover时自动弹出
      return `<span title="${value}">${showText}</span>`
    },
  },
},

方案2：自定义tooltip（可自由调整样式，适合对交互效果有要求的场景） #

如果对原生title的弹出延迟、样式不满意，可通过自定义DOM+事件绑定实现：

1. 模板中新增全局tooltip容器，默认隐藏：

<md-card class="bpmt_card mb-15">
  <div id="chartTeamProgress">
    <apexchart
      ref="realtimeChart"
      type="bar"
      height="400"
      :options="teamsOverviewOptions"
      :series="teamsOverviewSeries"
    ></apexchart>
  </div>
</md-card>
<!-- 新增自定义tooltip容器 -->
<div id="yAxisCustomTooltip" style="position: fixed; display: none; background: rgba(0,0,0,0.8); color: #fff; padding: 6px 10px; border-radius: 4px; font-size: 12px; z-index: 9999; pointer-events: none;"></div>

2. data中新增变量存储完整未截断的Y轴标签：

data() {
  return {
    fullYAxisLabels: [], // 存储完整Y轴标签文本
    // 原有其他变量保持不变
  }
}

3. 图表配置中新增渲染事件监听：

chart: {
  type: "bar",
  height: 456,
  stacked: true,
  stackType: "100%",
  // 新增事件配置
  events: {
    mounted: (chart) => {
      this.bindYLabelTooltip()
    },
    updated: (chart) => {
      // 数据更新后重新绑定事件
      this.bindYLabelTooltip()
    }
  }
},

4. methods中新增事件绑定方法，同时在接口请求时给fullYAxisLabels赋值：

methods: {
  bindYLabelTooltip() {
    const tooltipEl = document.getElementById('yAxisCustomTooltip')
    // 获取所有Y轴标签DOM元素
    const yLabels = document.querySelectorAll('.apexcharts-yaxis-label text')
    yLabels.forEach((label, idx) => {
      label.addEventListener('mouseenter', (e) => {
        const fullText = this.fullYAxisLabels[idx]
        if (fullText.length <= 11) return
        tooltipEl.innerText = fullText
        tooltipEl.style.left = `${e.clientX + 12}px`
        tooltipEl.style.top = `${e.clientY + 12}px`
        tooltipEl.style.display = 'block'
      })
      label.addEventListener('mouseleave', () => {
        tooltipEl.style.display = 'none'
      })
    })
  },
  // 原有接口请求方法中新增赋值逻辑
  loadTeamOverview() {
    // 你的原有接口请求逻辑
    const deptList = /* 接口返回的部门数组 */
    this.fullYAxisLabels = this.departmentArray(deptList)
    this.teamsOverviewOptions.xaxis.categories = [...this.fullYAxisLabels]
    // 其他原有赋值逻辑保持不变
  },
  // 原有其他方法保持不变
}

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