echarts 地圖正常顯示,但是 tooltip 不顯示問題
阿新 • • 發佈:2022-12-08
問題
這個問題已經不是第一次犯了,去年也犯過一次,特此記錄。
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 進行轉化,成功!
{ "北京市": "北京", "天津市":"天津", "河北省": "河北", "山西省":"山西", "內蒙古自治區": "內蒙古", "遼寧省":"遼寧", "吉林省": "吉林", "黑龍江省":"黑龍江", "上海市": "上海", "江蘇省":"江蘇", "浙江省": "浙江", "安徽省":"安徽", "福建省": "福建", "江西省":"江西", "山東省": "山東", "河南省":"河南", "湖北省": "湖北", "湖南省":"湖南", "廣東省": "廣東", "廣西壯族自治區":"廣西", "海南省": "海南", "重慶市": "重慶", "四川省": "四川", "貴州省": "貴州", "雲南省": "雲南", "西藏自治區": "西藏", "陝西省": "陝西", "甘肅省": "甘肅", "青海省": "青海", "寧夏回族自治區": "寧夏", "新疆維吾爾自治區": "新疆", "臺灣省": "臺灣", "香港特別行政區": "香港", "澳門特別行政區": "澳門" }