本文介紹了用vue2結(jié)合echarts實(shí)現(xiàn)一個地圖的效果。之前用echarts都是直接從官網(wǎng)上找示例然后復(fù)制粘貼，改改配置就直接用了，但是前段時間的大屏任務(wù)需要制作3D地圖，由于沒有示例并且內(nèi)容比較繁瑣在，所以自己還是摸索了一下如何制作。這一期先分享如何用vue和echarts實(shí)現(xiàn)一個地圖，最終效果圖如下

大家有需要源碼的可以去Gitee上面下載,后續(xù)會持續(xù)更新實(shí)現(xiàn)3D效果。

https://gitee.com/guoJunJia/vue-charts-implement-maps.git

老樣子，按照慣例，去官網(wǎng)找示例，但是地圖的示例很粗糙 ，所以這里就一步一步的來構(gòu)建自己的基礎(chǔ)地圖。

首先肯定就是基礎(chǔ)部分，先創(chuàng)建一個容器，來容納我們的地圖

<div ref="chart" style="width:900px;height:600px; " />

接著就是將我們自己的容器初始化成為一個echarts的容器，這樣才能在容器中顯示echarts圖表。這里我們需要使用echarts庫提供的一些實(shí)例和方法。使用前需要下載echarts庫

npm install echarts --save

import * as echarts from 'echarts';

// 在mounted函數(shù)中書寫
const myChart = echarts.init(this.$refs.chart);

在書寫具體代碼之前，我們需要自己準(zhǔn)備一個地圖的JSON文件，為構(gòu)建想要的地圖做準(zhǔn)備。這里給大家提供一個鏈接，可以去下載各市區(qū)的JSON文件。當(dāng)然如果自己有其他好的途徑也可以，JSON文件都大差不大。

https://hxkj.vip/demo/echartsMap/

這里我以荊州的JSON為例來構(gòu)建地圖。獲取到的JSON文件保存下來，使用的時候必須使用echarts的registerMap方法進(jìn)行注冊，否則是不能用的。傳入兩個參數(shù)，第一個是你后續(xù)在配置項(xiàng)中給map 的名稱，第二個是你的JSON文件。

import jingzhouMap from "./jingzhouMap.json";


// 在mounted函數(shù)中書寫
echarts.registerMap("jingzhouMap", jingzhouMap);

echarts中最重要的就是書寫配置項(xiàng)，他的官方文檔中也有配置項(xiàng)的詳細(xì)內(nèi)容和使用場景，這里我就不一一贅述，我只描述一些關(guān)鍵的配置項(xiàng)，代碼中相應(yīng)的也會有注釋說明。

itemStyle配置的是每一個區(qū)域塊的樣式，這也是我們主要需要配置的一項(xiàng)，在里面可以設(shè)置地圖的顏色、邊框、文字等等內(nèi)容。其中分為主要分為normal和emphasis兩個對象，前者就是基本的設(shè)置，對所有的區(qū)域快都有效，emphasis則是當(dāng)鼠標(biāo)移入某個地圖塊后會對其進(jìn)行高亮顯示，用于設(shè)置高亮的特殊樣式。

    // 設(shè)置初始化的地圖樣式
    // 在mounted函數(shù)中書寫
      const option = {
        series: [
          {
            type: "map",       // 設(shè)置圖表類型為地圖
            map: "jingzhouMap",     // 地圖要加載的JSON文件
            zoom: 1.32,        // 地圖縮放大小，這個根據(jù)自己需求，默認(rèn)是1，不縮放
            layoutCenter: ["50%", "46%"],   //  定義地圖中心在屏幕中的位置
            // 如果寬高比大于 1 則寬度為 100，如果小于 1 則高度為 100，保證了不超過 100x100 的區(qū)域
            layoutSize: 650,
            aspectScale: 0.9, // 長寬比
            roam: false,
            itemStyle: {       // 這里就是設(shè)置item 的樣式，也就是地圖中每個區(qū)塊的樣式（區(qū)塊就是JSON文件中包含經(jīng)緯度信息的對象，獲取的地圖JSON文件中應(yīng)該有一個數(shù)組，其中的每一個對象就對應(yīng)一個區(qū)塊）
              normal: {        // 區(qū)塊的基本樣式
                borderColor: "#41b8ff",   // 區(qū)塊的邊界（邊框）顏色
                borderWidth: 3,           // 區(qū)塊的邊界（邊框）寬度
              },
              emphasis: {         // 區(qū)塊高亮?xí)r的樣式（鼠標(biāo)移入的時候可以選中進(jìn)行高亮顯示）
                borderColor: "#fff",
                shadowBlur: 10,   // 模糊度
                shadowColor: "rgba(0,255,244,0.6)",  // 模糊陰影的顏色
                borderWidth: 4,
                color: "#41b8ff",    // 鼠標(biāo)選擇區(qū)域顏色
              },
            },
          },
        ],
      };

配置好option之后，使用echarts實(shí)例上的setOption方法即可將我們寫的配置傳入到echarts容器中

myChart.setOption(option);

那么到目前為止，基本的地圖就已經(jīng)制作完成了，只是它看起來很粗糙丑陋，接下來要做的就是對我們的地圖進(jìn)行樣式的優(yōu)化。需要注意的是，echarts是不支持CSS修改樣式的，想要修改樣式只能通過添加或者修改配置項(xiàng)來實(shí)現(xiàn)。

例如修改地圖的顏色，我們可以在itemStyle的normal中配置areaColor選項(xiàng)，可以直接設(shè)置顏色，如

normal: {
     areaColor: "blue",
},

這樣可以很方便的去改變地圖的顏色，但是展現(xiàn)的效果不美觀，也不能很好的展示地圖的紋理，所以這里推薦使用第二種，傳入圖片作為地圖的背景色，但是需要注意的是，不能直接給圖片的地址，而是要傳入一個DOM元素才行，否則會出錯不顯示。以下是官網(wǎng)上面關(guān)于紋理填充的說明。

底圖可以從我的項(xiàng)目中直接獲取使用，也可以自己去尋找自己覺得好看的底圖。同樣為了修改高亮的樣式，我也在emphasis中設(shè)置了紋理圖片。整體效果如下。

接下來，我們來給每個區(qū)塊地圖顯示地名，讓地圖看起來不那么單調(diào)，這里我們需要使用的配置的是label屬性。label的本意就是標(biāo)簽的意思，與原生是一個行內(nèi)元素，所以我們在設(shè)置的時候不能設(shè)置寬高，并且里面只能放置文字，其包含的屬性大多也都是設(shè)置文字樣式的，如字體大小fontSize、字體顏色color等。

例如我們可以在normal中添加以下代碼，來設(shè)置label的樣式，這樣在我們的地圖中就能顯示地名信息

label: {
     show: true,     // 是否顯示label
     fontSize: 14,   // 字體大小
     color: "#fff",  // 字體顏色
},

效果如下

那么，我們?nèi)绻虢olabel設(shè)置背景色并且設(shè)置寬高要怎么實(shí)現(xiàn)呢？前面說過label是行內(nèi)元素，不能設(shè)置寬高，所以我們直接設(shè)置是不行的，所以就要使用其他的方法。echarts為了滿足開發(fā)者的需求，提供了formatter（標(biāo)簽內(nèi)容格式器）和rich（富文本標(biāo)簽）來讓開發(fā)者實(shí)現(xiàn)更多的效果。

formatter支持字符串模板和回調(diào)函數(shù)兩種形式，不管是哪種形式，都可以使用"\n"進(jìn)行換行。如果是模板字符串，一共有三個變量{a},,{c}。其中{a}：系列名。：數(shù)據(jù)名。{c}：數(shù)據(jù)值?？梢灾苯佑脕碚故?，例如這里是顯示地名。那么就是使用變量，有其他顯示需求的可以自己根據(jù)三個變量進(jìn)行自定義。

formatter: "",

formatter只能提供數(shù)據(jù)層面的操作，比如數(shù)據(jù)的重建、組合等等，想要更加炫酷的樣式就要結(jié)合rich來使用?？梢酝ㄟ^在rich中書寫對象，通過給對象書寫樣式來使用。使用rich才可以給label設(shè)置寬高等樣式，否則是不行的。rich可以相當(dāng)于是一個具有條件選擇的富文本標(biāo)簽，可以通過選擇想要的對象來使用對象中的屬性。

使用rich的時候，formatter中就要使用回調(diào)函數(shù)，該函數(shù)自帶的參數(shù)就是當(dāng)前區(qū)域塊的信息

formatter: function (params) { console.log(params) }

在控制臺打印結(jié)果如下

可以看到參數(shù)params中包含了很多信息，其中name就是我們要展示的label文字，我們就可以通過return來返回params.name達(dá)到顯示label的效果

formatter: function (params) {
         const areaname = params.name;
         return `${areaname}`;
},

結(jié)合rich使用，就可以給label設(shè)置更多的樣式，需要注意的是，在書寫屬性的時候不能使用連字符 '-' ,要使用小駝峰的命名方式，否則會報錯，如font-size應(yīng)寫為fontSize。rich中的基本寫法如下

 label: {
     show: true, // 是否顯示label
     fontSize: 14, // 字體大小
     color: "#fff", // 字體顏色
     formatter: function (params) {
         const areaname = params.name;
         return `{a|${areaname}}`; // |前代表選擇的rich項(xiàng)，后面代表要展示的部分
     },
     rich: {
         a: {     // a代表就是分類，通過在formatter中進(jìn)行選擇，就代表使用a對象下的屬性
              color: "#fff",
              padding: 8,
              width: 35,
              height: 8,
              fontSize: 14,
              fontWeight: "normal",
              fontFamily: "Adobe Heiti Std",
              position: "left",
              backgroundColor: "#ccc",
            },
         b: {     
              color: "red",
              padding: 8,
              width: 35,
              height: 8,
              fontSize: 14,
              fontWeight: "normal",
              fontFamily: "Adobe Heiti Std",
              position: "left",
              backgroundColor: "blue",
            },
      },
},

在formatter和rich的組合中，rich提供了一系列的可選項(xiàng)，可選項(xiàng)的名稱可以自己定義（如以上代碼的a，b）formatter在使用的時候，返回的時候可以選擇系列，使用|進(jìn)行分配系列，當(dāng)然也可以在返回值中有多個系列去控制不同屬性的樣式。如

formatter: function (params) {
      const areaname = params.name;
      const index = params.dataIndex;
      return `{a|${areaname}}{b|${index}}`; 
},

和areaColor一樣，label的背景色backgroundColor也可以設(shè)置為圖片，只是這里的圖片不需要是個DOM元素，只要填入圖片的路徑即可，書寫規(guī)范如下

backgroundColor: { image: '這里書寫你的圖片路徑' },

同樣我們也可以在emphasis中書寫label的配置項(xiàng)，給高亮選擇的區(qū)塊設(shè)置不同的樣式，來滿足不同的功能需求。

最后，給整個頁面添加一個背景色，讓我們的地圖看起來更加的美觀，整體的地圖效果如下：

以上就是vue2結(jié)合echarts實(shí)現(xiàn)一個地圖的效果的詳細(xì)內(nèi)容，更多關(guān)于vue2 echarts地圖效果的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論