Echarts河南地图下钻

 

var parentJson = null;
var parentInfo = [{
  cityName: '河南',
  level: 'city',
  code: 410000,
},
];
getGeoJson(410000);
var timeFn = null;
// 利用高德api获取行政区边界geoJson
// adcode 行政区code 编号
function getGeoJson(adcode) {
  AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
    var districtExplorer = new DistrictExplorer();
    districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
      if (error) {
        console.error(error);
        return;
      }
      let Json = areaNode.getSubFeatures();
      if (Json.length > 0) {
        parentJson = Json;
      } else if (Json.length === 0) {
        Json = parentJson.filter((item) => {
          if (item.properties.adcode == adcode) {
            return item;
          }
        });
        if (Json.length === 0) return;
      }
      proceData(Json);
    });
  });
}

//处理数据
function proceData(Json) {
  let mapData = [{
    name: '郑州市',
    cityCode: '410100',
    value: '460',
  },
    {
      name: '开封市',
      cityCode: '410200',
      value: '1372',
    },
    {
      name: '洛阳市',
      cityCode: '410300',
      value: '851',
    },
    {
      name: '平顶山市',
      cityCode: '410400',
      value: '720',
    },
    {
      name: '安阳市',
      cityCode: '410500',
      value: '1139',
    },
    {
      name: '鹤壁市',
      cityCode: '410600',
      value: '772',
    },
    {
      name: '新乡市',
      cityCode: '410700',
      value: '8143',
    },
    {
      name: '焦作市',
      cityCode: '410800',
      value: '723',
    },
    {
      name: '濮阳市',
      cityCode: '410900',
      value: '705',
    },
    {
      name: '许昌市',
      cityCode: '411000',
      value: '448',
    },
    {
      name: '漯河市',
      cityCode: '411100',
      value: '1194',
    },
    {
      name: '三门峡市',
      cityCode: '411200',
      value: '560',
    },
    {
      name: '南阳市市',
      cityCode: '411300',
      value: '373',
    },
    {
      name: '商丘市',
      cityCode: '411400',
      value: '4543',
    },
    {
      name: '信阳市',
      cityCode: '411500',
      value: '716',
    },
    {
      name: '周口市',
      cityCode: '411600',
      value: '521',
    },
    {
      name: '驻马店市',
      cityCode: '411700',
      value: '1075',
    },
    {
      name: '济源市',
      cityCode: '419001',
      value: '285',
    },
    
  ];
  Json.map((item) => {
    mapData.forEach((ele) => {
      if (item.properties.adcode == ele.cityCode) {
        ele.level = item.properties.level;
      }
    });
  });
  let mapJson = {};
  //geoJson必须这种格式
  mapJson.features = Json;

  //去渲染echarts
  initEcharts(mapData, mapJson);
}

function initEcharts(mapData, mapJson) {
  let valArr = [];
  mapData.map(function (i) {
    valArr.push(i.value);
  });
  // 计算数据最大与最小值用于数据映射组件
  let max = Math.max.apply(null, valArr);
  let min = Math.min.apply(null, valArr);
  //注册
  echarts.registerMap('Map', mapJson);

  //这里加true是为了让地图重新绘制，不然如果你有筛选的时候地图会飞出去
  myChart.setOption(
    {
      backgroundColor: 'rgb(20,28,52)',
      tooltip: {
        trigger: 'item',
      },
      visualMap: {
        type: 'piecewise',
        min: min,
        max: max,
        splitNumber: 5,
        left: 35,
        bottom: 50,
        itemWidth: 21,
        itemHeight: 8,
        showLabel: false,
        orient: 'horizontal',
        text: ['高', '低'],
        itemGap: 2,
        textStyle: {
          color: '#fff',
        },
        inRange: '',
        color: [
          'rgba(7, 83, 114,0.8)',
          'rgba(24, 100, 141,0.9)',
          'rgba(33, 122, 168,0.8)',
          'rgba(28, 138, 187,0.7)',
          'rgba(34, 156, 199,0.8)',
        ],
        show: true,
      },

      series: [{
        name: '地图',
        type: 'map',
        map: 'Map',
        roam: true, //是否可缩放
        zoom: 1, //缩放比例
        aspectScale: 0.9, //长宽比0.75
        data: mapData,
        itemStyle: {
          normal: {
            show: true,
            areaColor: '#2E98CA',
            borderColor: 'rgb(185, 220, 227)',
            borderWidth: '1',
          },
        },
        label: {
          normal: {
            show: true, //显示省份标签
            textStyle: {
              color: 'rgb(249, 249, 249)', //省份标签字体颜色
              fontSize: 12,
            },
          },
          emphasis: {
            //对应的鼠标悬浮效果
            show: true,
            textStyle: {
              color: '#000',
            },
          },
        },
      },
      ],
    },
    true
  );
  // 单击下钻
}

//echarts点击事件
myChart.on('click', (params) => {
  clearTimeout(timeFn);
  timeFn = setTimeout(function () {
    // 无下级地图数据时不下钻
    if (!params.value) {
      alert('暂无数据');
      return;
    }
    //如果当前是最后一级，那就直接return
    if (parentInfo[parentInfo.length - 1].code == params.data.cityCode) {
      return;
    }
    let data = params.data;
    parentInfo.push({
      cityName: data.name,
      level: data.level,
      code: data.cityCode,
    });
    getGeoJson(data.cityCode);
  },
    250);
});

// 绑定双击事件，返回上级地图
myChart.on('dblclick', function (params) {
  clearTimeout(timeFn);
  if (parentInfo.length < 1) {
    return;
  }
  if (parentInfo.length === 1) {
    getGeoJson(parentInfo[parentInfo.length - 1].code);
    return;
  }
  parentInfo.pop();
  getGeoJson(parentInfo[parentInfo.length - 1].code);
});