ECharts饼图需求：鼠标悬停图例时显示对应扇区数据信息

嘿，这个需求我刚好折腾过！ECharts默认图例悬停确实只会选中扇区并上浮，要让它也显示系列名称、数值、百分比这些Tooltip信息，其实用事件监听加手动触发就能搞定，下面给你一步步来：

核心思路 #

ECharts没有自带图例悬停显示Tooltip的功能，所以我们需要手动补全这个逻辑：

• 监听图例的legendmouseover（鼠标悬停）和legendmouseout（鼠标离开）事件
• 在鼠标悬停图例时，手动触发对应数据项的Tooltip显示
• 在鼠标离开图例时，隐藏Tooltip

完整可运行代码示例 #

基于你提到的简单饼图示例修改，直接就能用：

// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// 饼图原始数据
var pieData = [
    {value: 335, name: '直接访问'},
    {value: 310, name: '邮件营销'},
    {value: 234, name: '联盟广告'},
    {value: 135, name: '视频广告'},
    {value: 1548, name: '搜索引擎'}
];

// 提前计算总数值，方便后续算百分比
var totalValue = pieData.reduce((sum, item) => sum + item.value, 0);

// 饼图配置项
var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: pieData.map(item => item.name)
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 40,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: pieData
        }
    ]
};

// 加载配置项
myChart.setOption(option);

// 监听图例鼠标悬停事件
myChart.on('legendmouseover', function(params) {
    // 找到当前悬停图例对应的数据项索引
    const targetIndex = pieData.findIndex(item => item.name === params.name);
    // 手动触发Tooltip显示
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0, // 饼图系列的索引（这里只有一个系列，所以是0）
        dataIndex: targetIndex,
        // 可选：自定义Tooltip位置，让它靠近图例
        position: [params.event.offsetX + 15, params.event.offsetY]
    });
});

// 监听图例鼠标离开事件
myChart.on('legendmouseout', function() {
    // 隐藏Tooltip
    myChart.dispatchAction({
        type: 'hideTip'
    });
});

关键细节解释 #

• 事件监听：通过myChart.on()给图例挂上两个事件钩子，捕获用户操作图例的动作
• 手动触发Tooltip：用dispatchAction执行showTip命令，指定对应的系列和数据索引，就能让Tooltip显示对应扇区的完整信息
• 位置自定义：如果觉得Tooltip默认位置不合适，可以通过position参数调整，比如示例里让它偏移一点，贴在图例旁边更直观

这样修改后，当你鼠标悬停在图例名称上时，就会弹出和悬停扇区完全一样的Tooltip啦！

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