Vue 2集成ApexCharts实现Rangebar图表永久显示Tooltip

ApexCharts本身没有直接提供让tooltip永久显示的布尔配置项，但可以通过两种可靠的方式实现需求：

方法一：利用ApexCharts API触发并保持Tooltip显示 #

这种方法基于原生tooltip功能，通过API主动触发显示并修改样式阻止隐藏：

实现步骤 #

1. 给ApexCharts组件添加ref，以便获取图表实例
2. 在图表渲染完成后，遍历所有数据点调用showTooltip方法
3. 强制修改tooltip元素的样式，移除隐藏类并保持可见

代码示例 #

<template>
  <apexchart ref="rangeBarChart" :options="chartOptions" :series="series"></apexchart>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        tooltip: {
          enabled: true,
          custom: ({ seriesIndex, dataPointIndex, w }) => {
            const data = w.globals.initialSeries[seriesIndex].data[dataPointIndex]
            return `
              <div style="background-color: #ECEBED; padding: 5px 16px; display: flex;">
                <div style="margin-right: 5px;"><b>Б: ${data.budget} р.; </b></div>
                <div style="margin-right: 5px;"><b>Д: </b> <span style="color: green">${data.finance_profit} р.;</span></div>
                <div style="margin-right: 5px;"><b>Р: </b> <span style="color: red">${data.finance_expense} р.;</span></div>
                <div style="margin-right: 5px;"><b>ДЗ: </b> ${data.budget - data.finance_profit} р.; </div>
                <div style="margin-right: 5px;"><b>M: </b> ${Math.round((data.finance_profit * 100) / data.budget)}%</div>
              </div>
            `
          }
        },
        // 其他图表配置（x轴、y轴等）
      },
      series: [] // 你的数据系列
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.showPermanentTooltips()
      // 监听图表实例，数据更新后重新渲染tooltip
      this.$refs.rangeBarChart.$watch('chart', (chart) => {
        chart && setTimeout(() => this.showPermanentTooltips(), 100)
      })
    })
  },
  methods: {
    showPermanentTooltips() {
      const chart = this.$refs.rangeBarChart.chart
      if (!chart) return

      // 遍历所有系列和数据点，触发tooltip显示
      chart.series.forEach((_, seriesIndex) => {
        chart.w.globals.initialSeries[seriesIndex].data.forEach((_, dataPointIndex) => {
          chart.showTooltip({ seriesIndex, dataPointIndex })
          
          // 修改tooltip样式，强制保持可见
          const tooltipEl = chart.el.querySelector('.apexcharts-tooltip')
          if (tooltipEl) {
            tooltipEl.style.opacity = '1'
            tooltipEl.style.pointerEvents = 'none' // 避免干扰图表交互
            tooltipEl.classList.remove('apexcharts-hidden')
          }
        })
      })
    }
  }
}
</script>

方法二：自定义HTML标签模拟Tooltip（更稳定） #

放弃原生tooltip，直接渲染自定义标签并通过图表API定位到每个bar旁，完全可控：

实现步骤 #

1. 用相对定位容器包裹图表和自定义tooltip容器
2. 调用getPointCoordinates获取每个数据点的坐标
3. 动态创建并定位自定义tooltip元素

代码示例 #

<template>
  <div class="chart-wrapper" style="position: relative;">
    <apexchart ref="rangeBarChart" :options="chartOptions" :series="series"></apexchart>
    <div ref="tooltipContainer" class="custom-tooltips" style="position: absolute; top: 0; left: 0; pointer-events: none;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartOptions: {
        tooltip: { enabled: false }, // 关闭原生tooltip
        // 其他图表配置
      },
      series: []
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.renderCustomTooltips()
      this.$refs.rangeBarChart.$watch('chart', (chart) => {
        chart && setTimeout(() => this.renderCustomTooltips(), 100)
      })
    })
  },
  methods: {
    renderCustomTooltips() {
      const chart = this.$refs.rangeBarChart.chart
      const tooltipContainer = this.$refs.tooltipContainer
      if (!chart || !tooltipContainer) return

      tooltipContainer.innerHTML = '' // 清空旧tooltip

      chart.series.forEach((_, seriesIndex) => {
        chart.w.globals.initialSeries[seriesIndex].data.forEach((data, dataPointIndex) => {
          const coords = chart.getPointCoordinates(seriesIndex, dataPointIndex)
          if (!coords) return

          // 创建自定义tooltip元素
          const tooltipEl = document.createElement('div')
          tooltipEl.style.cssText = `
            position: absolute;
            left: ${coords.x + 10}px;
            top: ${coords.y}px;
            transform: translateY(-50%);
            background-color: #ECEBED;
            padding: 5px 16px;
            display: flex;
            white-space: nowrap;
          `
          tooltipEl.innerHTML = `
            <div style="margin-right: 5px;"><b>Б: ${data.budget} р.; </b></div>
            <div style="margin-right: 5px;"><b>Д: </b> <span style="color: green">${data.finance_profit} р.;</span></div>
            <div style="margin-right: 5px;"><b>Р: </b> <span style="color: red">${data.finance_expense} р.;</span></div>
            <div style="margin-right: 5px;"><b>ДЗ: </b> ${data.budget - data.finance_profit} р.; </div>
            <div style="margin-right: 5px;"><b>M: </b> ${Math.round((data.finance_profit * 100) / data.budget)}%</div>
          `
          tooltipContainer.appendChild(tooltipEl)
        })
      })
    }
  }
}
</script>

为什么直接设置opacity:1无效？ #

ApexCharts的tooltip显示逻辑不仅依赖opacity，还会通过添加apexcharts-hidden类、修改display属性或JS事件监听控制隐藏，仅修改opacity无法覆盖这些内部逻辑。

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