Apex饼图：鼠标悬停图例时启用默认Tooltip的实现方法

ApexCharts本身没有提供直接配置图例悬停触发默认Tooltip的选项，需要通过图表实例的方法手动触发，具体实现步骤如下：

1. 给ApexChart组件添加ref，用于获取图表实例
2. 修改legend的onItemHover回调，在hover图例时调用图表的showTooltip方法
3. 可选：处理鼠标离开图例隐藏Tooltip，避免Tooltip残留

完整代码示例 #

模板部分

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

脚本部分

export default {
  data() {
    return {
      // 替换为你的实际系列数据
      series: [44, 55, 13, 43, 22],
      chartOptions: {
        chart: {
          width: 380,
          type: 'pie',
        },
        labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
        responsive: [{
          breakpoint: 480,
          options: {
            chart: {
              width: 200
            },
          }
        }],
        legend: {
          show: true,
          onItemClick: {
            toggleDataSeries: true
          },
          onItemHover: (chart, legendItem, index) => {
            // 饼图只有一个系列，所以seriesIndex固定为0
            chart.showTooltip({ seriesIndex: 0, dataPointIndex: index });
          },
        },
        tooltip: {
          enabled: true,
        },
      },
    };
  },
  mounted() {
    const chartInstance = this.$refs.pieChart.chart;
    // 监听图例容器的鼠标离开事件，自动隐藏Tooltip
    const legendContainer = chartInstance.wrapper.querySelector('.apexcharts-legend');
    if (legendContainer) {
      legendContainer.addEventListener('mouseleave', () => {
        chartInstance.hideTooltip();
      });
    }
  },
};

关键说明 #

• onItemHover回调里的index参数，对应当前悬停图例的索引，和饼图数据点的索引一一匹配
• showTooltip方法需要传入seriesIndex（饼图只有单个系列，固定为0）和dataPointIndex（即当前图例的索引）
• 添加mouseleave监听是为了在鼠标离开整个图例区域时自动隐藏Tooltip，避免Tooltip残留影响体验

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