echarts 地图正常显示,但是 tooltip 不显示问题
问题
这个问题已经不是第一次犯了,去年也犯过一次,特此记录。
echarts 配置项如下,可以正常显示地图,给 series 传入的数据格式也没有问题,数据传入后地图可以正常显示,但是鼠标移入发现 tooltip 无法显示 value 值,打印 tooltip-formatter-params 发现 value 为 NaN。最后发现是后台传入的省份名称和 china.json 名称不相等(比如后台返回:’北京市‘、china.json 中对应’北京‘)这样导致 echarts 的地图获取不到数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | 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 进行转化,成功!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | { "北京市" : "北京" , "天津市" : "天津" , "河北省" : "河北" , "山西省" : "山西" , "内蒙古自治区" : "内蒙古" , "辽宁省" : "辽宁" , "吉林省" : "吉林" , "黑龙江省" : "黑龙江" , "上海市" : "上海" , "江苏省" : "江苏" , "浙江省" : "浙江" , "安徽省" : "安徽" , "福建省" : "福建" , "江西省" : "江西" , "山东省" : "山东" , "河南省" : "河南" , "湖北省" : "湖北" , "湖南省" : "湖南" , "广东省" : "广东" , "广西壮族自治区" : "广西" , "海南省" : "海南" , "重庆市" : "重庆" , "四川省" : "四川" , "贵州省" : "贵州" , "云南省" : "云南" , "西藏自治区" : "西藏" , "陕西省" : "陕西" , "甘肃省" : "甘肃" , "青海省" : "青海" , "宁夏回族自治区" : "宁夏" , "新疆维吾尔自治区" : "新疆" , "台湾省" : "台湾" , "香港特别行政区" : "香港" , "澳门特别行政区" : "澳门" } |
开源中国博客地址:https://my.oschina.net/u/2998098/blog/1540520
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类