1. 程式人生 > 其它 >echarts 地圖正常顯示,但是 tooltip 不顯示問題

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 進行轉化,成功!

{
  "北京市": "北京",
  "天津市":"天津",
  "河北省": "河北",
  "山西省":"山西",
  "內蒙古自治區": "內蒙古",
  "遼寧省":"遼寧",
  "吉林省": "吉林",
  "黑龍江省":"黑龍江",
  "上海市": "上海",
  "江蘇省":"江蘇",
  "浙江省": "浙江",
  "安徽省":"安徽",
  "福建省": "福建",
  "江西省":"江西",
  "山東省": "山東",
  "河南省":"河南",
  "湖北省": "湖北",
  "湖南省":"湖南",
  "廣東省": "廣東",
  "廣西壯族自治區":"廣西",
  "海南省": "海南",
  "重慶市": "重慶",
  "四川省": "四川",
  "貴州省": "貴州",
  "雲南省": "雲南",
  "西藏自治區": "西藏",
  "陝西省": "陝西",
  "甘肅省": "甘肅",
  "青海省": "青海",
  "寧夏回族自治區": "寧夏",
  "新疆維吾爾自治區": "新疆",
  "臺灣省": "臺灣",
  "香港特別行政區": "香港",
  "澳門特別行政區": "澳門"
}