vue項目使用 echarts 對國內各省份地圖的在線調用解決方法(詳解)


前言:

    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 中的內容根據地圖渲染要求自行完善。

        完整部分:

        如圖

        

        到此,就處理完畢了。頁面就可正常顯示了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM