前言:
vue項目開發中,我們會使用到各種的第三方圖形庫,這里只說使用最多的echarts圖形庫。
echarts圖形庫,是百度良心之作,圖表類型豐富,定制化強,文檔齊全,是目前為止最為之作精良的H5圖表庫。
在大數據可視化的項目中,我們會或多或少的想到使用echarts,如果你選擇了使用echarts,那么你不難發現,現在的echarts地圖調用的時候,省份地圖已不存在,你想要下載,看到的是這個:echarts地圖下載 https://www.echartsjs.com/download-map.html。
由於不明原因,官方以比例不符合國家規范下架了地圖,不予下載。
可能你會說,網上地圖一大堆啊,隨便下,有什么可難的。這里我就要說明一下了:第一:網上各版本大多數是echarts地圖未下架時候的老版本,並不是最新的。第二,都知道了echarts官方以地圖不符合規范下架了地圖下載功能,你還使用這些老版本,不符合規范的地圖在項目中,em~~~~~~~,自己體會吧!!
正文:
說正事,老版本不能用怎么辦?那我們就用現成的,百度現成的在線地圖。
所以,我們需要一個地址入口就可以解決了。
第一步:
配置外部鏈接地址:打開項目如圖位置
添加如下代碼:
代碼:
// Paths assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'https://echarts.baidu.com/examples/vendors/echarts/map/json/province', //此處可以換成自己需要的地址 changeOrigin: true, pathRewrite: { '^/api': '' } } },
到此就算完成了第一步了。
第二步:
如何處理並接收。
使用 axios 請求。
終端 npm install axios 下載 axios 組件后,import引入對應頁面,或者進行全局注冊。
現在,重點來了
由於在 mounted生命周期中調用了一個處理地圖顯示的自定義方法,所以,我們在方法中,需要這樣處理:
以四川地圖為列
如圖:
不同的省份更改不同的 省份名字即可,處理都在axios處理返回后的部分里面。option 中的內容根據地圖渲染要求自行完善。
完整部分:
如圖
到此,就處理完畢了。頁面就可正常顯示了