ECharts地图鼠标悬停显示NaN值：数据处理与匹配问题分析
在使用ECharts绘制地图时，常需实现鼠标悬停显示区域数据的交互效果。然而，数据处理或匹配错误可能导致显示NaN值。本文分析ECharts地图鼠标悬停显示数据异常问题，并提供排查方法。
问题描述：
用户使用ECharts绘制中国地图，期望鼠标悬停在省份区域时显示该省份的业务操作统计数据。但数据赋值到series.data后，value值为空，显示NaN。代码已设置tooltip，但效果不佳。initMap函数负责地图初始化和数据绑定。
代码片段：
function initMap(dataObj) {
mapChart = echarts.init(document.getElementById('map-chart'));
let option = {
// ... (tooltip, visualMap, geo配置省略)...
series: [{
name: '业务操作统计',
type: 'map',
map: mapArea,
// ... (其他series配置省略)...
data: dataObj
}]
};
mapChart.setOption(option);
// ... (其他代码省略)...
}
问题原因及解决方法：
问题很可能出现在dataObj变量上。即使代码已将dataObj赋值给series.data，dataObj本身可能存在问题，导致value值为NaN。
需检查dataObj结构是否符合ECharts地图组件要求。dataObj应为数组，每个元素为对象，包含name（省份名称）和value（业务操作统计数据）两个属性。例如：
dataObj = [{
name: '北京',
value: 100
}, {
name: '上海',
value: 200
// ... 其他省份数据
}];
若dataObj结构不正确，或value属性值为undefined、null或非数值类型，都将导致显示NaN。务必仔细检查dataObj的数据来源和格式，确保符合ECharts地图组件的数据要求。
此外，需确认mapArea是否正确定义地图区域，以及dataObj中省份名称与mapArea中省份名称是否完全一致。名称不一致将导致数据无法正确匹配到地图区域。
建议：
-
检查
dataObj赋值过程： 确保数据正确传递和处理。使用console.log(dataObj)打印dataObj内容，检查其结构和数据是否正确。 -
检查数据来源和处理逻辑： 若
dataObj为空数组或包含无效数据，需检查数据获取和处理逻辑。 -
确保名称一致性： 仔细核对
dataObj中的省份名称与mapArea中定义的名称，确保大小写完全一致。 -
数据类型检查： 确保
value属性的值为数值类型，避免出现undefined、null或其他非数值类型。
通过以上步骤，可以有效排查ECharts地图数据异常问题，确保地图数据正确显示。
