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 进行转化,成功!

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

  

 

posted @ 2022-12-08 16:42  大笛子  阅读(2611)  评论(0编辑  收藏  举报