echarts地图分色

1.根据权限获取不同的地图边界数据
2.Ec.registerMap(mapName, mapJson);注册地图
3.初始化地图
visualMap 分色 设置 seriesIndex: 0,表示对哪个series进行分色
geo 设置两个series: map及scatter
4.添加点击事件，根据点击的类型确定触发的事件。点击地图进行下钻，点击气泡进行弹出详情。

   initmapchart(aliasName, data) {
      var _this = this;
      let mapConfig = require('@/constants/scjson/s_s_qx.json');
      let geoCoordMap = mapConfig[0];
      let initSeriesData = function(data) {
        var temp = [];
        if (!data) data = [];
        for (let i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            temp.push({
              alias: data[i].alias,
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
              avgNum:data[i].avgNum,
              currentNum:data[i].currentNum,
              futureAvgNum: data[i].futureAvgNum,
              futureNum1:data[i].futureNum1,
              futureNum2:data[i].futureNum2,
              futureNum3:data[i].futureNum3
            });
          }
        }
        return temp;
      };
      let userorg = this.userinfo.orgId.substring(0, 6);
      const option = {
        grid: {
          left: 10,
          right: 10,
          top: 90,
          bottom: 14,
          containLabel: true
        },
        toolbox: {
          show: aliasName != '510000' && userorg == '510000' ? true : false,
          top: 'top',
          right: 'right',
          feature: {
            myTool1: {
              show: true,
              title: '返回',
              icon:
                'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAABM0lEQVQ4ja3UvytFYRjA8c/lGi4ZSMJwFyXFZEbKblD8AcrKJizKJoMwWHRL/gKZrH4MFgab4W6GW8hASriG95y6nXtdXOdbb6f3POf9nuc973mezEShLEEGc9F1Pxn8iabEfBinkajrr7JKYRs2cI3RRkQxmYlCeQq7yCdij3j6Zt0b7nCOPZTiQFb4VrXojMZ3DGISi1jAIWHLRxjCJt4rFqxEL6s1sujHGlpwgNlYCM9Ywggu6mQV84Ei1jGOF+Egu5OnfIMxzOPhF2K4wjLasZCp8R82Qi5K4DaZYaO8CrsbSEsI98ilKSxTXXr/Jk1hB97SEjYLlVNMSzgtlOlJGsI8toWy3fmPsAUzQqn2YhXFbMUDZ+j7g7AHrfgUmsQmoWvE5FX3xHqUcIwtXMY3vwAx8TZDiqvq4AAAAABJRU5ErkJggg==',
              onclick: function() {
                _this.initdata('510000');
              }
            }
          }
        },
        tooltip: {
          show: true,
          trigger: 'item',
          // alwaysShowContent: true,
          backgroundColor: 'rgba(50,50,50,0.7)',
          hideDelay: 100,
          // triggerOn: "mousemove",
          enterable: true,
          // position: [0, '86%'],
          formatter: function(params, ticket, callback) {
            return (
              '地区：' +
              params.data.name +
              '<br/>' +
              '当前数量：' +
              params.data.currentNum +
              '<br/>' +
              '30日平均数：' +
              params.data.avgNum +
              '<br/>' +
              '未来1日数量：' +
              params.data.futureNum1 +
              '<br/>' +
              '未来2日数量：' +
              params.data.futureNum2 +
              '<br/>' +
              '未来3日数量：' +
              params.data.futureNum3 +
              '<br/>' +
              '未来3日平均数：' +
              params.data.futureAvgNum
            );
          }
        },
        visualMap: {
          show:true,
          type: 'piecewise',
          orient: 'horizontal',
          pieces: [
            { value: 4, label: '紧急' },
            { value: 3, label: '重大' },
            { value: 2, label: '重要' },
            { value: 1, label: '一般' }
          ],
          inRange: {
            color: ['green', 'yellow', 'DarkOrange', 'red']
          },
          seriesIndex: 0,
          left: 'center',
          top: 'top',
          textStyle: {
            color: '#fff'
          }
        },
        geo: {
          show: true,
          map: aliasName,
          label: {
            normal: {
              show: true
            },
            emphasis: {
              show: false
            }
          },
          roam: true,
          itemStyle: {
            emphasis: {
              label: { show: true, color: 'white' },
              areaColor: '#245fa6'
            }
          }
        },
        series: [
          {
            type: 'map',
            roam: true,
            map: aliasName,
            geoIndex: 0, //map 和 其他 series（例如散点图）就可以共享一个 geo 组件了
            // selectedMode: "multiple",
            data: data,
            itemStyle: {
              emphasis: {
                label: { show: true, color: 'white' },
                areaColor: '#245fa6'
              }
            }
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbol: 'pin', //气泡
            symbolSize: 20,
            itemStyle: {
              normal: {
                color: '#caa1a1' //标志颜色
              }
            },
            zlevel: 100,
            data: initSeriesData(data)
          }
        ]
      };
      if (!barscase) {
        barscase = Ec.init(document.getElementById('ycchart'));
      }
      barscase.setOption(option, true);
      // 添加事件
      barscase.on('click', function(params, data, d) {
        let mapname = params.data.alias;
        //点击的是 行政区划----需要下钻
        if (params.componentSubType == 'map') {
          _this.initdata(mapname);
        } else if (params.componentSubType == 'scatter') {
          _this.tyctitle = params.name;
          _this.openyclist(mapname);
        }
      });
    },
    //获取地图数据
    getGeoJson: function(mapcode) {
      let jsonPac = '';
      if (mapcode.substr(4, 2) != '00') {
        jsonPac = mapcode.substr(0, 4) + '00';
      } else {
        jsonPac = mapcode;
      }
      return new Promise((resolve, reject) => {
        const mapJson = require(`@/constants/scjson/${jsonPac}.json`);
        if (mapJson) {
          if (mapcode.substr(4, 2) != '00') {
            let returnJson = {
              type: 'FeatureCollection',
              features: []
            };

            mapJson.features.find(feature => {
              if (feature.properties.id == pacode) {
                returnJson.features.push(feature);
              }
            });
            resolve(returnJson);
          } else {
            resolve(mapJson);
          }
        } else {
          reject('获取地图边界数据失败');
        }
      });
    },