一文教會(huì)你從零開(kāi)始畫echarts地圖

更新時(shí)間：2022年04月21日 10:07:56 作者：cRack_cLick

ECharts是一個(gè)使用JavaScript實(shí)現(xiàn)的開(kāi)源可視化庫(kù),涵蓋各行業(yè)圖表,滿足各種需求,下面這篇文章主要給大家介紹了如何從零開(kāi)始畫echarts地圖的相關(guān)資料,需要的朋友可以參考下

echarts地圖制作

離線地圖下載地址https://datav.aliyun.com/tools/atlas/index.html

echarts文檔地址https://echarts.apache.org/zh/option.html

基于VUE編寫，其他框架請(qǐng)自行轉(zhuǎn)換，大同小異

基礎(chǔ)配置

先讓地圖內(nèi)容出來(lái)，npm安裝步驟省略，請(qǐng)參考官方文檔，創(chuàng)建的div必須設(shè)置寬度和高度，關(guān)于圖表的寬高自適應(yīng)，參考我的另一篇文章

<template>
  <div class="content">
    <div ref="charts" style="width: 1000px; height: 800px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import zhongguo from "@/assets/mapJson/data-city.json"
export default {
  created () {
    this.$nextTick(() => {
      this.initCharts();
    })
  },
  methods: {
    initCharts() {
      const charts = echarts.init(this.$refs["charts"]);
      const option = {
        // 背景顏色
        backgroundColor: "#404a59",
        // 提示浮窗樣式
        tooltip: {
          show: true,
          trigger: "item",
          alwaysShowContent: false,
          backgroundColor: "#0C121C",
          borderColor: "rgba(0, 0, 0, 0.16);",
          hideDelay: 100,
          triggerOn: "mousemove",
          enterable: true,
          textStyle: {
            color: "#DADADA",
            fontSize: "12",
            width: 20,
            height: 30,
            overflow: "break",
          },
          showDelay: 100
        },
        // 地圖配置
        geo: {
          map: "china",
          label: {
            // 通常狀態(tài)下的樣式
            normal: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            // 鼠標(biāo)放上去的樣式
            emphasis: {
              textStyle: {
                color: "#fff",
              },
            },
          },
          // 地圖區(qū)域的樣式設(shè)置
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 處的顏色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 處的顏色
                  },
                ],
                globalCoord: false, // 缺省為 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            // 鼠標(biāo)放上去高亮的樣式
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
        },
      };
      // 地圖注冊(cè)，第一個(gè)參數(shù)的名字必須和option.geo.map一致
      echarts.registerMap("china",zhongguo)
      charts.setOption(option);
    },
  },
};
</script>

這是最基礎(chǔ)的配置，外加了一些我自己寫的樣式，使地圖美觀一些，如果你完全的復(fù)制，并且china.json文件也引入了，那么你會(huì)看到如下的內(nèi)容

這其中比較有意思的是，如果你注冊(cè)地圖時(shí)，還有option.geo.map的名字用的是china，南海諸島會(huì)如上圖以縮略圖展示，但是以此之外來(lái)命名地圖，則不會(huì)展示縮略圖。

再次聲明，如果二者名字不一致，將會(huì)導(dǎo)致異常，致使地圖無(wú)法顯示

數(shù)據(jù)渲染

實(shí)際開(kāi)發(fā)中，往往需要將后臺(tái)的數(shù)據(jù)渲染到地圖里，我們?cè)趏ption里添加series屬性，以下是我的兩個(gè)示例，僅做參考：

series: [
    {
        type: "scatter",
        coordinateSystem: "geo",
        symbol: "pin",
        legendHoverLink: true,
        symbolSize: [60, 60],
        // 這里渲染標(biāo)志里的內(nèi)容以及樣式
        label: {
            show: true,
            formatter(value) {
                return value.data.value[2];
            },
            color: "#fff",
        },
        // 標(biāo)志的樣式
        itemStyle: {
            normal: {
                color: "rgba(255,0,0,.7)",
                shadowBlur: 2,
                shadowColor: "D8BC37",
            },
        },
        // 數(shù)據(jù)格式，其中name,value是必要的，value的前兩個(gè)值是數(shù)據(jù)點(diǎn)的經(jīng)緯度，其他的數(shù)據(jù)格式可以自定義
        // 至于如何展示，完全是靠上面的formatter來(lái)自己定義的
        data: [
            { name: "西藏", value: [91.23, 29.5, 2333] },
            { name: "黑龍江", value: [128.03, 47.01, 1007] },
        ],
        showEffectOn: "render",
        rippleEffect: {
            brushType: "stroke",
        },
        hoverAnimation: true,
        zlevel: 1,
    },
    // {
    //   type: "effectScatter",
    //   coordinateSystem: "geo",
    //   effectType: "ripple",
    //   showEffectOn: "render",
    //   rippleEffect: {
    //     period: 10,
    //     scale: 10,
    //     brushType: "fill",
    //   },

    //   hoverAnimation: true,
    //   itemStyle: {
    //     normal: {
    //       color: "rgba(255, 235, 59, .7)",
    //       shadowBlur: 10,
    //       shadowColor: "#333",
    //     },
    //   },
    //   zlevel: 1,
    //   data: [
    //     { name: "西藏", value: [91.23, 29.5, 2333] },
    //     { name: "黑龍江", value: [128.03, 47.01, 1007] },
    //   ],
    // },
],

兩種渲染方式如下：

使用備注的部分時(shí)，需要在option.tooltip里添加formatter屬性，我寫的如下：

const option = {
    // ...
    tooltip: {
    // ...
        formatter(params) {
            return `地區(qū)：${params.name}</br>數(shù)值：${params.value[2]}`;
        }
    }
}

更多的方式還要自己多試驗(yàn)，這是個(gè)費(fèi)時(shí)且需要耐心的活，你甚至可以將柱狀圖放上去。有更花里胡哨的效果，也請(qǐng)分享給我。

嵌入文字

使用option.graphic可以實(shí)現(xiàn)簡(jiǎn)單的水印效果

const option = {
    // ...
    graphic:{
        // 水印類型
        type: 'text',
        // 相對(duì)于容器的位置
        left:'10%',
        top: '10%',
        // 樣式設(shè)置
        style: {
            // 文本內(nèi)容
            text: "create by cRack_cLick",
            // 字體粗細(xì)、大小、字體
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            // 字體顏色
            fill: "#fff"
        }
    }
}

效果如下：

利用graphic的type=“group”,還可以組合出一些有意思的效果（抄官方文檔的效果）：

        graphic: {
          type: "group",
          rotation: Math.PI / 4,
          bounding: "raw",
          left: 110,
          top: 110,
          z: 100,
          children: [
            {
              type: "rect",
              left: "center",
              top: "center",
              z: 100,
              shape: {
                width: 400,
                height: 50,
              },
              style: {
                fill: "rgba(0,0,0,0.3)",
              },
            },
            {
              type: "text",
              left: "center",
              top: "center",
              z: 100,
              style: {
                fill: "#ddd",
                text: "create by cRack_cLick",
                font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
              },
            },
          ],
        },

地圖下鉆

往往還有一種需求，在我們點(diǎn)擊一個(gè)省的時(shí)候，需要切換到這個(gè)省的詳細(xì)地圖，甚至還可以下鉆到市、縣等等。

為了試下點(diǎn)擊下鉆，我們需要先了解echarts中的點(diǎn)擊事件，文檔參考

以目前的功能來(lái)說(shuō)，我們暫時(shí)不需要加入其它的業(yè)務(wù)邏輯以及省級(jí)的數(shù)據(jù)渲染，僅僅只做地圖的切換，所以點(diǎn)擊事件里我們需要實(shí)現(xiàn)獲取點(diǎn)擊的省份名稱，然后根據(jù)省份名稱，來(lái)選擇地圖的JSON文件，最后重新渲染echarts圖表，下面是我的簡(jiǎn)單示例：

// 新增加北京的地圖JSON文件
import beijing from "@/assets/mapJson/data-beijing.json";
// ...

initCharts(){
    const charts = echarts.init(this.$refs["charts"]);
// ...
// 注意這里是echarts的實(shí)例對(duì)象，而不是echarts組件本身。
    charts.on('click', ({name}) => {
        if (name === "北京") {
            // 修改option的配置，可以繼續(xù)自定義
            option.geo.zoom = 0.8
            // 就像上面提到的，這里必須要和注冊(cè)地圖時(shí)的名字一致
            option.geo.map = "beijing"
            // 注冊(cè)地圖
            echarts.registerMap("beijing", beijing)
            // 重新渲染
            charts.setOption(option, true)
        }
    })
}

需要注意的是，在重新setOption的時(shí)候，我們加入了第二個(gè)參數(shù)，按照官方文檔的說(shuō)法：

參數(shù)：

調(diào)用方式：

chart.setOption(option, notMerge, lazyUpdate);

或者

chart.setOption(option, {
    notMerge: ...,
    lazyUpdate: ...,
    silent: ...
});

option

圖表的配置項(xiàng)和數(shù)據(jù)。

notMerge

可選，是否不跟之前設(shè)置的 option 進(jìn)行合并，默認(rèn)為 false，即合并。

lazyUpdate

可選，在設(shè)置完 option 后是否不立即更新圖表，默認(rèn)為 false，即立即更新。

silent

可選，阻止調(diào)用 setOption 時(shí)拋出事件，默認(rèn)為 false，即拋出事件。

第二個(gè)從參數(shù)設(shè)置為true來(lái)讓圖表重新渲染，而不合并配置，當(dāng)然，這一點(diǎn)具體需要看你顯示開(kāi)發(fā)的需求，我在這里僅是為了演示。~~絕不是偷懶~~

另外在echarts v3.x的版本里，切換地圖默認(rèn)是有過(guò)渡動(dòng)畫的，而v4.x和v5.x的版本里則沒(méi)有過(guò)渡動(dòng)畫，如果知道怎么加上的，可以私信我。

上面雖然可以實(shí)現(xiàn)地圖切換，但很顯然開(kāi)發(fā)中這么寫要被打死。下鉆三十多個(gè)地圖要寫三十多個(gè)if,顯然是一種不理智的開(kāi)發(fā)方式。一種方式我們可以通過(guò)axios或者ajax異步請(qǐng)求，但是這樣需要你在生產(chǎn)環(huán)境和運(yùn)維協(xié)商好，否則會(huì)導(dǎo)致請(qǐng)求不到JSON文件。

下面是我在前端寫的一個(gè)簡(jiǎn)單的工具方法，僅供參考：

import zhongguo from "@/assets/mapJson/data-city.json";
import neimenggu from "@/assets/mapJson/data-neimenggu.json";
import beijing from "@/assets/mapJson/data-beijing.json";
// ...

const mapDict = {
  "北京": "beijing",
  "內(nèi)蒙古": "neimenggu",
  // ...
}

const mapData = {
  beijing,
  neimenggu,
  // ...
}

export function getMap(mapName) {
  const cityName = mapDict[mapName]
  if(cityName){
    return [cityName, mapData[cityName]]
  }
  return ['china', zhongguo]
}

需要建立兩個(gè)字典，一個(gè)是漢字和拼音的對(duì)照映射，一個(gè)是拼音和JSON文件的映射，這個(gè)可靈活配置，并非唯一。

優(yōu)化一下上面的的代碼：

// 刪除地圖json文件的引用，修改為上面的工具方法
import { getMap } from "./maputil";
methods: {
    initCharts() {
        const charts = echarts.init(this.$refs["charts"]);
        const option = {
            // ...
        };
        // 不傳name默認(rèn)會(huì)返回中國(guó)地圖
        const [mapName, mapJson] = getMap();
        option.geo.map = mapName;
        // 地圖注冊(cè)，第一個(gè)參數(shù)的名字必須和option.geo.map一致
        echarts.registerMap(mapName, mapJson);

        charts.setOption(option);

        charts.on("click", ({ name }) => {
            // 這里和上面一樣，其實(shí)還可以再優(yōu)化一下。為了方便閱讀，這里不再封裝。
            const [mapName, mapJson] = getMap(name);
            option.geo.zoom = 0.8;
            option.geo.map = mapName;
            echarts.registerMap(mapName, mapJson);
            charts.setOption(option, true);
        });
    }
}

效果如下：

結(jié)合水印制作級(jí)聯(lián)效果

現(xiàn)在的地圖可以下鉆了，但是似乎操作起來(lái)還有些別扭。

我們現(xiàn)在想要的效果是：我們需要每下鉆一層，水印部分就會(huì)加上當(dāng)前地區(qū)的名稱。點(diǎn)擊水印地區(qū)的名稱，就會(huì)跳轉(zhuǎn)到當(dāng)前地區(qū)的地圖，我們要來(lái)改造一下echarts示例的click事件。

首先option.graphic的默認(rèn)值修改為中國(guó)地圖，這里為了方便閱讀，僅使用text格式演示：

// ...
graphic: [
    {
        type: "text",
        left: "10%",
        top: "10%",
        style: {
            text: "中國(guó)",
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: "#fff",
        },
    },
],

以數(shù)組的形勢(shì)編寫后，思路就明顯了，只要在click事件的時(shí)候，將下鉆地圖的信息push進(jìn)來(lái)，并且為了防止重合，稍微移動(dòng)一下定位即可，我的示例如下：

charts.on("click", ({ name }) => {
    const [mapName, mapJson] = getMap(name);
    option.geo.zoom = 0.8;
    option.geo.map = mapName;
    // 為了重新定位，這里使用了length
    const idx = option.graphic.length + 1;
    option.graphic.push({
        type: "text",
        left: `${idx * 10}%`,
        top: "10%",
        style: {
            text: name,
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: "#fff",
        },
    });
    echarts.registerMap(mapName, mapJson);
    charts.setOption(option, true);
});

點(diǎn)擊后效果如下：

現(xiàn)在還有問(wèn)題，就是點(diǎn)擊地區(qū)名字沒(méi)有響應(yīng)，所以我們還要為option.graphic子元素加上click事件

這個(gè)click事件功能也類似，獲取地圖名稱，獲取地圖數(shù)據(jù)，重新渲染。但是這個(gè)click事件需要注意，比如我點(diǎn)擊了北京，那么在數(shù)組里是需要將密云區(qū)的元素刪除掉的，同理，點(diǎn)擊中國(guó)，則后面的元素都要?jiǎng)h除。在這里我就不把相同的部分抽離出來(lái)了：

// 防止graph里頻繁添加click事件，在添加click事件之前先全部清空掉。
charts.off()
charts.on("click", ({name}) => {
    // 如果option.graphic里已經(jīng)有了城市名稱，則不進(jìn)行任何操作，防止頻繁點(diǎn)擊
    const index = option.graphic.findIndex(i => i.style.text === name);
    if (!name || index !== -1) return
    const [mapName, mapJson] = getMap(name);
    option.geo.zoom = 0.8;
    option.geo.map = mapName;
    // 為了重新定位，這里使用了length
    const idx = option.graphic.length + 1;
    option.graphic.push({
        type: "text",
        left: `${idx * 10}%`,
        top: "10%",
        style: {
            text: name,
            font: 'bolder 1.5rem "Microsoft YaHei", sans-serif',
            fill: "#fff",
        },
        onclick: () => {
            // 利用函數(shù)的作用域，可以直接拿上面的name來(lái)用
            const [grahpName, graphJson] = getMap(name);
            const index = option.graphic.findIndex(i => i.style.text === name);
            // 點(diǎn)擊元素之后的所有元素全部刪除
            option.graphic.splice(index + 1);
            // 很多操作重復(fù)了，你可以將公共部分抽離出來(lái)
            option.geo.map = mapName;
            echarts.registerMap(grahpName, graphJson);
            charts.setOption(option, true);
        },
    });
    echarts.registerMap(mapName, mapJson);
    charts.setOption(option, true);
});

這里會(huì)有個(gè)坑，在給graph添加click事件后，點(diǎn)擊時(shí)會(huì)同時(shí)觸發(fā)我們上面charts.on的click事件，想了很久也沒(méi)有找到好一點(diǎn)的方式來(lái)解決這個(gè)事件沖突，最后只好判斷了一下name是否為空來(lái)暫時(shí)解決。如果有更好的辦法，也請(qǐng)留言。最終效果如下：

至此繪制地圖已經(jīng)完畢，更多是依靠自己的業(yè)務(wù)需求來(lái)進(jìn)行更靈活的配置和渲染，它的API沒(méi)有什么太復(fù)雜的，只是我們?nèi)鄙倭艘稽c(diǎn)耐心去實(shí)驗(yàn)。

visualMap

首先來(lái)看效果

增加visualMap來(lái)讓地圖的數(shù)據(jù)渲染更有層次感，實(shí)現(xiàn)起來(lái)也很簡(jiǎn)單，只需要在option里增加visualMap配置即可：

const option = {
    // ...
    visualMap: {
        // 是否展示左下角，即是是false，也僅是不顯示，不影響數(shù)據(jù)的映射
        show: true,
        // 上下端文字
        text: ["高", "低"],
        // 最小值和最大值，必須指定
        min: 0,
        max: 6000,
        // 位置
        left: "10%",
        bottom: "10%",
        // 是否展示滑塊
        calculable: true,
        // 指定映射的數(shù)據(jù)，對(duì)應(yīng)的是option.series，這里根據(jù)自己的實(shí)際需要進(jìn)行配置
        seriesIndex: [0],
        // 從下到上的顏色
        inRange: {
            color: ['#00467F', '#A5CC82'],
        },
        //字體顏色
        textStyle: {
            color: "#fff",
            map: "china",
        },
    }
}

如果你的代碼是跟著我從上面一直寫下來(lái)的，那么此時(shí)你應(yīng)該發(fā)現(xiàn)只是定位的圖標(biāo)變了，相應(yīng)的地圖區(qū)域并未變色，所以我們還要把地圖的數(shù)據(jù)映射上去，所以在option.series里再加一個(gè)元素，使其type=“map”，內(nèi)容與geo一致即可，但是要多加data屬性，渲染的數(shù)據(jù)和定位圖標(biāo)一致。并將seriesIndex的索引做好映射，即可實(shí)現(xiàn)。

const option = {
    // ...
    visualMap: {
        // 是否展示左下角，即是是false，也僅是不顯示，不影響數(shù)據(jù)的映射
        show: true,
        // 上下端文字
        text: ["高", "低"],
        // 最小值和最大值，必須指定
        min: 0,
        max: 6000,
        // 位置
        left: "10%",
        bottom: "10%",
        // 是否展示滑塊
        calculable: true,
        // 指定映射的數(shù)據(jù)，對(duì)應(yīng)的是option.series，這里根據(jù)自己的實(shí)際需要進(jìn)行配置
        seriesIndex: [0],
        // 從下到上的顏色
        inRange: {
            color: ['#00467F', '#A5CC82'],
        },
        //字體顏色
        textStyle: {
            color: "#fff",
            map: "china",
        },
    }
}

如果出現(xiàn)了縮放重影，說(shuō)明生成了兩個(gè)地圖組件，需要在新的series里加上geoIndex屬性，值是geo里的索引，這樣就只會(huì)共享一個(gè)組件，不會(huì)出現(xiàn)縮放重影的問(wèn)題了

以下為源文檔：

默認(rèn)情況下，map series 會(huì)自己生成內(nèi)部專用的 geo 組件。但是也可以用這個(gè) geoIndex 指定一個(gè) geo組件。這樣的話，map 和其他 series（例如散點(diǎn)圖）就可以共享一個(gè) geo組件了。并且，geo組件的顏色也可以被這個(gè) map series 控制，從而用 visualMap來(lái)更改。

當(dāng)設(shè)定了 geoIndex 后，series-map.map屬性，以及 series-map.itemStyle等樣式配置不再起作用，而是采用 geo中的相應(yīng)屬性。