echarts省份标注加散点效果

这个是安徽的效果图，鼠标移到红色标注或者对应的市区位置都会显示对应的数值。

先直接上代码：

import anhuiMapJson from './anhui.json'
getCoords: function(city) {
      var res = [];
      if (city != null) {
        for (var c in this.cityMap.features) {
          if (this.cityMap.features[c].properties.name == city) {
            res = this.cityMap.features[c].properties.cp;
            break;
          }
        }
        return res;
      } else {
        return res;
      }
    },
    convertData: function(data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.getCoords(data[i].name);
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    },
    loadMapAH() {
      var data = [];
      this.getPost("xxxx/xxxxx", this.queryParams).then(
        response => {
          var result = response.data;
          if (result.returnCode == "0") {
            data = result.data.list;
            var max = 480, min = 9; // todo 
            var maxSize4Pin = 100, minSize4Pin = 20;
            this.e3.registerMap('anhui', anhuiMapJson);
            let main1 = this.e3.init(document.getElementById("main1"));
            let option = {

              tooltip: {
                trigger: 'item',
                formatter: function(params) {
                  if (typeof (params.value)[2] == "undefined") {
                    if(isNaN(parseInt(params.value))){
                      return params.name + ' : ' + '-';
                    }else {
                      return params.name + ' : ' + params.value;
                    }
                  } else {
                    return params.name + ' : ' + params.value[2];
                  }
                 
                }
              },
              legend: {
                orient: 'vertical',
                y: 'bottom',
                x: 'right',
                data: ['pm2.5'],
                textStyle: {
                  color: '#fff'
                }
              },
              visualMap: {
                show: false,
                min: 0,
                max: 500,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'], // 文本，默认为数值文本
                calculable: true,
                seriesIndex: [1],
                inRange: {

                }
              },
              geo: {
                show: true,
                map: 'anhui',
                label: {
                  normal: {
                    show: false
                  },
                  emphasis: {
                    show: false,
                  }
                },
                left:'45%', //调整地图初始化位置
                roam: true,
                itemStyle: {
                  normal: {
                    areaColor: 'transparent',
                    borderColor: '#3fdaff',
                    borderWidth: 2,
                    shadowColor: 'rgba(63, 218, 255, 0.5)',
                    shadowBlur: 30
                  },
                  emphasis: {
                    areaColor: '#2B91B7',
                  }
                }
              },
              series: [

                {
                  type: 'map',
                  map: 'anhui',
                  geoIndex: 0,
                  aspectScale: 0.75, //长宽比
                  showLegendSymbol: false, // 存在legend时显示
                  label: {
                    normal: {
                      show: false
                    },
                    emphasis: {
                      show: false,
                      textStyle: {
                        color: '#fff'
                      }
                    }
                  },
                  roam: true,
                  itemStyle: {
                    normal: {
                      areaColor: '#031525',
                      borderColor: '#FFFFFF',
                    },
                    emphasis: {
                      areaColor: '#2B91B7'
                    }
                  },
                  animation: false,
                  data: data
                },
                {
                    name: '点',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol: 'pin',
                    symbolSize: function (val) {
                        var a = (maxSize4Pin - minSize4Pin) / (max - min);
                        var b = minSize4Pin - a*min;
                        b = maxSize4Pin - a*max;
                        return a*val[2]+b;
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                                color: '#fff',
                                fontSize: 9,
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#F62157', //标志颜色
                        }
                    },
                    zlevel: 6,
                    data: this.convertData(data)
                },
                {
                  name: 'Top 5',
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: this.convertData(data.sort(function(a, b) {
                    return b.value - a.value;
                  })),
                  symbolSize: function(val) {
                    return val[2] / 5;
                  },
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke'
                  },
                  hoverAnimation: true,
                  label: {
                    normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: true
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: '#F4E925',
                      shadowBlur: 10,
                      shadowColor: '#05C3F9'
                    }
                  },
                  zlevel: 1
                },

              ]
            };
            setTimeout(() => {
              main1.setOption(option);
              main1.resize();
            }, 10);
          }
        });

import 导入的是安徽对应的json地图文件，然后getCoords方法是自己写的，根据后端请求的数据去跟json文件中的市名字比对，返回对应的地理坐标系。
需要后端返回的数据格式为

data = [
     {name: '海门', value: 9},
     {name: '鄂尔多斯', value: 12},
     {name: '招远', value: 12}]

注意：后端返回的数据一定要跟地图名称的对应，如果返回其他省份地市的名字数据会有可能导致数据显示异常。