如何在Echarts的雷达图Radar指标项中添加Tooltip提示框

ECharts 官方未提供 radar.indicator 直接配置 tooltip 的能力，你之前的写法无法生效是因为该配置项不会被ECharts识别。
可通过以下方案实现悬浮指标文字弹出提示的效果：

实现步骤 #

1. 开启雷达图组件的事件触发能力，给 radar 配置项添加 triggerEvent: true，同时给每个 indicator 新增自定义字段存储提示内容
2. 监听图表的 mouseover 事件，识别悬浮目标是否为雷达轴标签，匹配到对应提示内容后手动触发tooltip显示

完整可运行代码 #

option = {
    title: {
        text: '基础雷达图'
    },
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    tooltip: {
        trigger: 'item'
    },
    radar: {
        // 开启雷达组件事件触发
        triggerEvent: true,
        indicator: [
            // 新增自定义tooltipText字段存储提示内容
            { name: '销售（Sales）', max: 6500, tooltipText:"tooltipText"},
            { name: '管理（Administration）', max: 16000, tooltipText:"tooltipText"},
            { name: '信息技术（Information Technology）', max: 30000, tooltipText:"tooltipText"}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        data: [
            {
                value: [4200, 3000, 20000],
                name: '预算分配（Allocated Budget）'
            },
            {
                value: [5000, 14000, 28000],
                name: '实际开销（Actual Spending）'
            }
        ]
    }]
};

// 图表实例初始化后添加事件监听（这里的myChart是你初始化ECharts返回的实例对象）
myChart.on('mouseover', function (params) {
    // 判断悬浮目标是否为雷达图的轴标签
    if (params.componentType === 'radar' && params.targetType === 'axisLabel') {
        // 匹配当前悬浮指标对应的提示文本
        const currentIndicator = option.radar.indicator.find(item => item.name === params.name);
        if (currentIndicator?.tooltipText) {
            // 手动触发tooltip显示
            myChart.dispatchAction({
                type: 'showTip',
                position: params.event.offset,
                // 自定义tooltip显示内容
                formatter: () => currentIndicator.tooltipText
            });
        }
    }
});

// 可选：鼠标移出后隐藏tooltip
myChart.on('mouseout', function () {
    myChart.dispatchAction({
        type: 'hideTip'
    });
});

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