ECharts 地图下钻后 tooltip 不显示数据怎么办？

这种情况我遇到过太多次了，大部分时候都不是代码写错了，而是数据对不上号。ECharts 的地图交互非常依赖 name 属性的精确匹配，差一个字都不行。

这里分三步来排查，基本能解决你的问题。

第一步，也是最容易被忽略的一步，检查你的数据名称和地图 GeoJSON 里的名称是否完全一致。很多时候我们以为数据里写的是“广州市”，但地图文件里存的可能是“广州”或者带空格的“广州 市”。一旦名字对不上，ECharts 就认为这个区域没有数据，hover 上去自然就没有 tooltip 提示了。

你可以在控制台把 GeoJSON 打印出来看看里面的 name 到底是什么。或者你可以先写个循环遍历一下地图的 features，把所有区域名称列出来，对比一下你的 data 数组。

第二步，确认下钻的时候有没有正确注册地图。你代码里写了 map: 'guangdong'，这要求你必须在 setOption 之前，用 echarts.registerMap('guangdong', geoJson) 注册过对应的 GeoJSON 数据。如果没注册或者注册的 map 名字不对，地图可能根本没渲染出来，或者渲染了但数据绑定不上。

第三步，显式配置 tooltip 的 trigger。虽然地图通常是默认的，但有时候配置合并的时候会出现意外。强制指定 trigger: 'item' 会稳妥很多。

下面给你写个完整的示例，包含如何调试名称匹配，以及正确的配置写法。

// 假设你已经通过 fetch 或其他方式获取了广东地图的 GeoJSON 数据

// const geoJson = ...;



// 1. 先注册地图，这一步必须在 setOption 之前做

// 注意：第一个参数 'guangdong' 必须和 option.series[0].map 的值一致

echarts.registerMap('guangdong', geoJson);



// 2. 调试技巧：打印出地图里所有的区域名称，看看和你数据里的名字一不一样

// 这一步排查时很有用，跑通了可以删掉

const mapNames = geoJson.features.map(feature => feature.properties.name);

console.log('地图里的区域名列表：', mapNames); 

// 如果控制台打印的是 ['广州', '深圳']，而你数据里是 ['广州市', '深圳市']，那就挂了



// 3. 重新配置 option

const option = {

  // 这里建议显式配置 trigger

  tooltip: {

    show: true,

    trigger: 'item', // 地图通常用 item，虽然默认也是这个，但写上更保险

    formatter: function(params) {

      // 这里的 params.data 只有在名称匹配成功时才会有值

      // 如果 params.data 是 undefined，说明名字没对上

      return params.name + ' : ' + (params.data ? params.data.value : '无数据');

    }

  },

  series: [{

    type: 'map',

    map: 'guangdong', // 必须和 registerMap 的第一个参数一致

    roam: true, // 允许缩放和平移

    label: {

      show: true

    },

    // 如果你的数据名字和地图名字实在对不上，可以用 nameMap 做映射

    // 比如地图里是"广州"，数据里是"广州市"

    // nameMap: {

    //   '广州': '广州市',

    //   '深圳': '深圳市'

    // },

    data: [

      // 这里的 name 必须和 GeoJSON 里的 name 完全一模一样

      { name: '广州市', value: 100 }, 

      { name: '深圳市', value: 200 }

    ]

  }]

};



// 4. 设置选项

myChart.setOption(option);

这里需要注意，如果发现地图里的名字和你数据库里的名字确实对不上，有两种改法。一种是改你的数据源，一种是利用 ECharts 的 nameMap 属性做一个映射，把地图里的名字映射成你数据里的名字，这样不用动后台数据。

另外，如果你下钻的时候使用了 setOption(option, true) 或者 notMerge: true，记得要把 tooltip 配置重新带上，否则新地图可能会继承不到 tooltip 的配置。

试试上面的方法，重点看第一步的名字匹配，十有八九是这个问题。