Eachart地圖上添加自定義圖標

Echarts是開發過程中常用的可視化工具，可以滿足日常開發的大部分需求。但是有時候會遇到些復雜的要求，比如：在地圖上插上標記。

我們先來看一下最終實現的效果圖：

 

 

 

一、實現思路：

       在官方文檔中，我們可以看到在 ECharts 3 中不再建議在地圖類型的圖表使用 markLine 和 markPoint。如果要實現點數據或者線數據的可視化，可以使用在地理坐標系組件上的散點圖和線圖。

      所以我們可以通過地理坐標系組件繪制地圖，然后我們利用散點圖series[i]-scatter屬性中的symbol，來添加我們自己的圖例就可以了。

二、實現方案：

第一步：建立地理坐標系

 geo: {
            map: 'china',
            zoom: 1.18,
            scaleLimit: {
              min: 1.18,
              max: 2,
            },
            label: {
              show: true,

            },
            itemStyle: {   //普通狀態下樣式
              areaColor: '#d7effd',
            },
            emphasis: {   //懸停樣式
              itemStyle: {
                scale: false,
                areaColor: '#598AF7',
                borderColor: '#FFF',
              },
            },
          },

 

第二步：series配置

1.map的配置如下：

 series: [
            {
              name: this.seriesName,
              map: 'china',
              geoIndex: 0,
              formatter: function(val) {
                var area_content = val.name + '-' + val.value
                return area_content.split('-').join('\n')
              }, //讓series 中的文字進行換行
              data: data,
            },
         ]  

   默認情況下，map series 會自己生成內部專用的 geo 組件。但是也可以用這個 geoIndex 指定一個geo組件。這樣的話，map 和 其他 series（例如散點圖）就可以共享一個geo組件了。

     注意：當設定了 geoIndex 后，series-map.map 屬性，以及 series-map.itemStyle等樣式配置不再起作用，而是采用geo中的相應屬性。

2. 散點圖的配置如下：

 series: [
              ...
           {
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.convertData(data),
              symbolSize: 17,
              symbol: this.redImage,//自定義圖標引入

            },
         ]   
  data() {
    return {
      redImage: 'image://' + require('@/assets/img/red-flag2.png'),
      geoCoordMap: {
        廣西: [108.33, 23.84],
        河南: [113.65, 34.76],
        黑龍江: [127.63, 48],
        湖南: [112.2, 28.9],
        山東: [118.05, 36.8],
        天津: [117.5, 39.6],
      },
    }
  },

  methods: {
    convertData(data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            id: data[i].id,
            value: geoCoord.concat(data[i].value),
            percentage: data[i].percentage,
          })
        }
      }
      return res
     },
  }

        散點圖可以應用在直角坐標系，極坐標系，地理坐標系上。直角坐標系上的散點圖可以用來展現數據的 x，y 之間的關系，如果數據項有多個維度，其它維度的值可以通過不同大小的 symbol 展現成氣泡圖，也可以用顏色來表現。

       將coordinateSystem的值設置為geo,指定選用地理坐標系組件。

       symbol表示標記的圖形，文檔中ECharts 提供的標記類型包括'circle', 'rect', 'roundRect', 'triangle', 'diamond',  'arrow'等，但是我們可以自己設置圖片，上面代碼中我們就是引入了自定義的圖片。