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
{
  "北京市": "北京",
  "天津市":"天津",
  "河北省": "河北",
  "山西省":"山西",
  "内蒙古自治区": "内蒙古",
  "辽宁省":"辽宁",
  "吉林省": "吉林",
  "黑龙江省":"黑龙江",
  "上海市": "上海",
  "江苏省":"江苏",
  "浙江省": "浙江",
  "安徽省":"安徽",
  "福建省": "福建",
  "江西省":"江西",
  "山东省": "山东",
  "河南省":"河南",
  "湖北省": "湖北",
  "湖南省":"湖南",
  "广东省": "广东",
  "广西壮族自治区":"广西",
  "海南省": "海南",
  "重庆市": "重庆",
  "四川省": "四川",
  "贵州省": "贵州",
  "云南省": "云南",
  "西藏自治区": "西藏",
  "陕西省": "陕西",
  "甘肃省": "甘肃",
  "青海省": "青海",
  "宁夏回族自治区": "宁夏",
  "新疆维吾尔自治区": "新疆",
  "台湾省": "台湾",
  "香港特别行政区": "香港",
  "澳门特别行政区": "澳门"
}

  

 

posted @   大笛子  阅读(3658)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· AI与.NET技术实操系列(六):基于图像分类模型对图像进行分类
点击右上角即可分享
微信分享提示