echarts 地图正常显示,但是 tooltip 不显示问题
问题
这个问题已经不是第一次犯了,去年也犯过一次,特此记录。
echarts 配置项如下,可以正常显示地图,给 series 传入的数据格式也没有问题,数据传入后地图可以正常显示,但是鼠标移入发现 tooltip 无法显示 value 值,打印 tooltip-formatter-params 发现 value 为 NaN。最后发现是后台传入的省份名称和 china.json 名称不相等(比如后台返回:’北京市‘、china.json 中对应’北京‘)这样导致 echarts 的地图获取不到数据
mapOption: {
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(0,0,0,0.5)',
textStyle: { color: '#fff' },
formatter: function (params) { //这里等获取后台数据后在设置 }
},
series: [{
name: 'map',
type: 'map',
map: 'china',
label: { show: true, color: '#555555', fontSize: 12 },
aspectScale: 0.75,
layoutCenter: ['50%', '50%'], // 地图位置
layoutSize: '112%',
itemStyle: {
normal: {
borderColor: '#ced1d3',
borderWidth: 0.8,
areaColor: '#f0f6fc'
},
emphasis: { areaColor: '#1890ff' }
},
data: []
}]
}
解决
新建一个 JSON 文件来表明对应关系,当获取后台数据的时候,给 series 传入的参数通过 JSON 进行转化,成功!
{
"北京市": "北京",
"天津市":"天津",
"河北省": "河北",
"山西省":"山西",
"内蒙古自治区": "内蒙古",
"辽宁省":"辽宁",
"吉林省": "吉林",
"黑龙江省":"黑龙江",
"上海市": "上海",
"江苏省":"江苏",
"浙江省": "浙江",
"安徽省":"安徽",
"福建省": "福建",
"江西省":"江西",
"山东省": "山东",
"河南省":"河南",
"湖北省": "湖北",
"湖南省":"湖南",
"广东省": "广东",
"广西壮族自治区":"广西",
"海南省": "海南",
"重庆市": "重庆",
"四川省": "四川",
"贵州省": "贵州",
"云南省": "云南",
"西藏自治区": "西藏",
"陕西省": "陕西",
"甘肃省": "甘肃",
"青海省": "青海",
"宁夏回族自治区": "宁夏",
"新疆维吾尔自治区": "新疆",
"台湾省": "台湾",
"香港特别行政区": "香港",
"澳门特别行政区": "澳门"
}

开源中国博客地址:https://my.oschina.net/u/2998098/blog/1540520

浙公网安备 33010602011771号