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'等，但是我们可以自己设置图片，上面代码中我们就是引入了自定义的图片。