echarts地图如何实现一个地图两个series [一个地图两个类型散点]

先看上图↑
大家可以看到有两个类型的散点图！
至于 颜色的话下一篇再细说
需要每个省份坐标（包括东莞），有需要的话可以私信小编 免费提供哦！

来来上代码

series = [
          {   //第一个series数据  可设置大小 未设置
            type: "scatter", //类型
            coordinateSystem:'geo',
            data: convertData(this.chartData),  //数据 
            symbolSize: 20,
            markPoint:{
              symbol:'pin',
            },
            dimensions:['name','value','long','lat'],
            encode: {
              lng: 'long',
              lat: 'lat',
            },
            label: {
              normal: {
                // formatter: '{c}:{@[1]}',
                position: "right",
                show: false
              },
              emphasis: {
                label:{
                  // show: true,
                  // formatter:"{c}",
                  position: "right",
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#1174E3"
              }
            },
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem:'geo',
            data: colldata(this.chartData), // 第二个series的数据  可设置大小
            symbolSize: function (val,params) { //设置大小
                if(val[1]<=500){
                  return  10
                }
                else if(val[1]<=1000 && val[1]>500){
                  return  20
                }
                else if(val[1]<=2000 && val[1]>1000){
                  return  25
                }
                else if(val[1]<=3000 && val[1]>2000){
                  return  30
                }
                else if(val[1]<=4000 && val[1]>3000){
                  return  35
                }
                else{
                  return  40
                }
            },
            dimensions:['name','value','long','lat'],
            encode: {
              lng: 'long',
              lat: 'lat',
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke"
            },
            hoverAnimation: true,
             label: {
              normal: {
                // formatter: '{@name}:{@value}',
                position: "right",
                // show: true
              },
              emphasis: {
                label:{
                  // show: true,
                  // formatter:"{@value}",
                  position: "right",
                }
              }
            },
            itemStyle: {
              normal: {
                color: "#6DC8EC",
                shadowBlur: 10,
                shadowColor: "#333"
              }
            },
            zlevel: 1
          }
        ];

大家可看到我的数据用了一个函数

var convertData = function (data) {
        if(data){
          var res = [];
        for (var i = 0; i < data.length; i++) {
          var r = [];
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            r.push(data[i].name,data[i].value,geoCoordMap[data[i].name][0],geoCoordMap[data[i].name][1],data[i].exdata)
            res.push(r)
          }
        }
        console.log(556,res)
        return res;
        }
      };
      var colldata = function(data){
        if(data){
          var res = [];
          for (var i = 0; i < data.length; i++) {
            // console.log(68,data[i])
            for(var k=0;k<data[i].exdata.columns.length; k++){
              var r = [];
              var geoCoord = geoCoordMap[data[i].name];
              if (geoCoord) {
                r.push(data[i].name,data[i].exdata.row[2],geoCoordMap[data[i].name][0]+0.3,geoCoordMap[data[i].name][1]+0.3,data[i].exdata)
              }
          }
          console.log(557,res)
            res.push(r)
        }
        return res;
        }
      }

可以看一下 我第一个打印信息 就是第一个是 series里面的数据

数据格式就是套数组 然后第一个是省份 第二个是信息 第三个第四个都是坐标

打印的第二个信息就是第二个是 series里面的数据

数据格式都是一样的 只要不破坏前四个 后面随便写
因为第二个信息的坐标 我是在第一个信息的坐标 的基础上加了点坐标
因为不可能同样的数据写两边还都是不一样的东西
有点费时间 对客户不太友好！