想通過echarts得到一份這樣的地圖（此處為新疆地圖），首先需要一份新疆地區的json數據，還有就是echarts地圖代碼。

1、json數據

可以通過阿里云數據化可視平臺得到：阿里云數據可視化平臺

2、echarts代碼如下

<template>
  <div class="map_content">
    <div id="map-box"></div>
  </div>
</template>

<script>
export default {
  props: {
    // 地圖區域數據
    gisData: Array,
  },
  data() {
    return {
　　　　// 城市經緯度坐標
      geoCoordMap : {
        阿勒泰地區: [88.13963, 47.848393],
        塔城地區: [82.985732, 46.746301],
        克拉瑪依市: [84.873946, 45.595886],
        博爾塔拉蒙古: [81.984105, 44.569962],
        伊犁哈薩克自治州: [80.226151, 42.713006],
        阿克蘇地區: [80.265068, 41.170712],
        克孜勒蘇柯爾克孜自治州: [74.172825, 39.713431],
        喀什地區: [75.989138, 37.467664],
        和田地區: [79.92533, 37.110687],
        巴音郭楞蒙古自治州: [84.150969, 38.768552],
        哈密市: [93.51316, 42.833248],
        烏魯木齊市: [87.497106, 42.740062],
        吐魯番市: [87.871523, 43.513961],
        昌吉回族自治州: [89.315669, 44.790604]
      }
    };
  },
  mounted() {
    // dom加載完畢之后執行js
    let This = this;
    setTimeout(function() {
      This.drawChart(); // 展示地圖
    }, 500);
  },
  methods: {
    // 處理地區展示數據
    convertData(data) {
      let res = [];
      // 拿到key值
      let geoCoordMapKeys = Object.keys(this.geoCoordMap);
      geoCoordMapKeys.forEach(item => {
        // 與傳入的值相匹配
        data.forEach(sItem => {
          if(sItem.name == item) {
            res.push({
              name: sItem.name,
              dccId: sItem.dccId,
              value: this.geoCoordMap[item],
              capacityValue: sItem.value
            });
          }
        });
      });
      return res;
    },
    // 地圖配置 geoCoordMap地區圖層  data地區展示數據
    drawChart() {
      let This = this;
      let data = This.convertData(This.gisData);

      let option = {};
      let myChart = This.$echarts.init(document.querySelector("#map-box"));
      This.$echarts.registerMap("mapBox", require("./xinjiang.json"));
      myChart.clear();
      myChart.off("click"); // 解綁事件處理函數。為了解決地圖下鉆會重復觸發點擊事件的問題
      option = {
        geo: {
          map: "mapBox",
          aspectScale: 0.75,
          zoom: 1.2,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "#bcf9dc"
                  },
                  {
                    offset: 1,
                    color: "#7ae0b1"
                  }
                ],
                globalCoord: true
              },
              shadowColor: "#7ae0b1",
              shadowOffsetX: 10,
              shadowOffsetY: 11
            },
            emphasis: {
              areaColor: "#bcf9dc",
              borderWidth: 0,
              color: "green",
              label: {
                show: false
              }
            }
          }
        },
        series: [
          // 默認
          {
            map: "mapBox",
            type: "map",
            roam: false,
            zoom: 1.2,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                borderColor: "#5cd59c",
                borderWidth: 1,
                areaColor: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 0.8,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#bcf9dc" // 0% 處的顏色
                    },
                    {
                      offset: 1,
                      color: "#bcf9dc" // 100% 處的顏色
                    }
                  ],
                  globalCoord: true // 缺省為 false
                }
              },
              emphasis: {
                borderColor: "#1aa563",
                areaColor: "#30c47e",
                borderWidth: 2
              }
            }
          },
          // 城市
          {
            name: "城市",
            coordinateSystem: "geo",
            type: "effectScatter",
            symbolSize: 0.1,
            // showEffectOn: "render",
            // rippleEffect: {
            //   brushType: "stroke"
            // },
            label: {
              normal: {
                formatter: function (params) {
                  return data.find(item => item.name == params.name) == undefined ? '' : params.name + '\n\r' + params.data.capacityValue + 'MV';
                },
                position: "right",
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: "#03552E",
                shadowBlur: 10,
                shadowColor: "#333",
              }
            },
            data: data
          },
          // 自定義圖標
          {
            name: "logo",
            type: "custom", // 配置顯示方式為用戶自定義
            coordinateSystem: "geo",
            renderItem: function (params, api) {
              //具體實現自定義圖標的方法{
              return This.addImage(
                  require("./33.png"),
                  params,
                  api,
                  data
              );
            },
            data: data,
          },
        ]
      };
      myChart.setOption(option, true);
      myChart.off('click');
      myChart.on("click", function (params) {
        let dataIndex = This.gisData.findIndex(item => item.name == params.name);
        if(dataIndex > -1) {
          if(This.gisData[dataIndex].dccId == undefined) {
            // 跳轉到地理信息頁
            $router.push({
              path: '/services/geographicInfo'
            });
          } else {
            // 返回dccId
            This.$emit('clickMap', This.gisData[dataIndex]);
          }
        }
      });
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 地圖展示自定義圖標
    addImage(url, params, api, realData) {
      return {
        type: "image",
        style: {
          image: url,
          x: api.coord([
            realData[params.dataIndex].value[0]-0.8,
            realData[params.dataIndex].value[1]
          ])[0],
          y: api.coord([
            realData[params.dataIndex].value[0],
            realData[params.dataIndex].value[1]+0.3
          ])[1],
           15,
          height: 14
        }
      };
    },
  }
};
</script>

<style lang="scss" scoped>
.map_content {
   100%;
  height: 330px;
  #map-box {
     100%;
    height: 100%;
  }
}
</style>

　　其中gisData的數據格式如下：

gisData: [
        {
          name: '烏魯木齊市',
          value: 123456
        },
        {
          name: '克拉瑪依市',
          value: 223456
        },
],

　　

總結

以上是生活随笔為你收集整理的echarts地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。