中国地图下钻式echarts图表数据处理

首先加载全国路线图

findMap(){
        let _this = this,
          param = {}
          _this.chinaOpt = echarts.init(document.getElementById('chinaflag'));
          _this.chinaOpt.clear()
        _this.$store.dispatch("url", {param}).then(res=>{
          let res={
            "meta": {"msg": "success","code": 0,"success": true,"timestamp": "2020-09-03 13:45:55"
            },
            "data": {//本例数据格式
              "list": [["北京","保定","石家庄","邯郸","上海","深圳","保定","武汉"]]
            }
          }
          if(res.meta.success){
            axios.get('./china_full.json').then((data) => {
              //重置图表
              echarts.registerMap('china', data.data);
              let geoCoordName=[]//存储路线到达点
              res.data.list[0].map(item=>{
                let temp=false
                for (let index = 0; index < geoinfo.length; index++) {
                  const districts = geoinfo[index];
                  if(districts.name.indexOf(item)>=0){
                    temp=true
                    geoCoordName.push(districts.name)
                    break
                  }else{
                    for (let num = 0; num < districts.districts.length; num++) {
                      const element = districts.districts[num];
                      if(element.name.indexOf(item)>=0){
                        temp=true
                        geoCoordName.push(districts.name)
                      }
                      if(temp){
                        break
                      }
                    }
                  }
                  if(temp){
                    break
                  }
                }
              })
              let mapOptions = _this.$utils.initMapScatterOpt()
              var geoCoordMap = {
                '北京': [116.4551, 40.2539],
                '天津': [117.4219, 39.4189],
                '上海': [121.4648, 31.2891],
                '重庆': [106.557165, 29.563206],
                '河北': [114.508958, 38.066606],
                '河南': [113.673367, 34.748062],
                '云南': [102.721896, 25.047632],
                '辽宁': [123.445621, 41.806698],
                '广东': [113.5107, 23.2196],
                '湖南': [112.950888, 28.229114],
                '安徽': [117.300842, 31.887672],
                '山东': [117.029895, 36.677424],
                '江苏': [118.814345, 32.061445],
                '浙江': [120.16991, 30.272236],
                '江西': [115.904962, 28.674132],
                '湖北': [114.290138, 30.595623],
                '甘肃': [103.851217, 36.061978],
                '山西': [112.549248,37.857014],
                '陕西': [108.960062, 34.285251],
                '吉林': [126.572746, 43.86785],
                '福建': [119.319713, 26.072564],
                '贵州': [106.557165, 29.563206],
                '广东': [113.238778, 23.161621],
                '青海': [101.787147, 36.621234],
                '四川': [104.082256, 30.652565],
                '海南': [109.910757, 19.108187],
                '黑龙江': [126.655705, 45.759581],
                '西藏': [91.154492, 29.665953],
                '内蒙古': [111.670801,40.818311],
                '广西': [108.381781, 22.815042],
                '宁夏': [106.234805, 38.487468],
                '新疆': [87.616327, 43.800508],
                '香港': [114.168545, 22.36641],
                '澳门': [113.549978, 22.1943],
                '台湾': [121.098613, 23.778734]
              }
              
              var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {
                  var dataItem = data[i];
                  var fromCoord = geoCoordMap[dataItem[0].name];
                  var toCoord = geoCoordMap[dataItem[1].name];
                  if (fromCoord && toCoord) {
                    res.push({
                      fromName: dataItem[0].name,
                      toName: dataItem[1].name,
                      coords: [fromCoord, toCoord],
                      value: 1
                    });
                  }
                }
                return res;
              };
              mapOptions.series[0].data = convertData(geoCoordName)
              
              var KMData = [];
              geoCoordName.map(item=>{
                if(item!='北京'){
                  KMData.push(
                    //替换名称不符规则系列
                    [{name:'北京'}, {name:item.replace(/省|市|自治区|壮族自治区|维吾尔自治区|回族自治区|特别行政区/g, ''),value:1}]
                  )
                }
              })
              var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

              var color = ['#a6c84c', '#ffa022', '#46bee9'];
              var series = [];
              [['北京', KMData]].forEach(function (item, i) {
                  series.push(
                  {
                    name: item[0],
                    type: 'lines',//路线
                    zlevel: 2,
                    effect: {
                      show: true,
                      period: 10,
                      trailLength: 0,
                      symbol: planePath,
                      symbolSize: 15
                    },
                    lineStyle: {
                      normal: {
                        color: color[i],
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.2
                      }
                    },
                    data: convertData(item[1])
                  },
                  {
                    name: item[0],
                    type: 'effectScatter',//散点图 到达城市
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                      brushType: 'stroke'
                    },
                    label: {
                      normal: {
                        show: true,
                        position: 'right',
                        formatter: '{b}'
                      }
                    },
                    symbolSize: function (val) {
                      return val[2]>0?(val[2]/9):0.1;
                    },
                    itemStyle: {
                      normal: {
                        color: color[i]
                      }
                    },
                    data: item[1].map(function (dataItem) {
                      return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                      };
                    })
                  });
              });
              mapOptions.geo.zoom=1
              mapOptions.series=series
              _this.chinaOpt.setOption(mapOptions)
              _this.chinaOpt.on('click', function (param) {
                _this.chinaMapClick(param)//地图点击事件
              })
            })
          }
        })
      }

初始化地图路线图后点击某一区域查看当前省份地图数据

chinaMapClick(v){
        let _this=this;
        var name = v.name; //地区name
        var mapCode = _this.provinces[name]; //地区的json数据  城市代号
        let center=[]
        let nameList=[]
        let valList=[]
        if (!mapCode) {
          return;
        }
        let temp=false
        for (let index = 0; index < geoinfo.length; index++) {
          const districts = geoinfo[index];
          if(districts.name.indexOf(name)==0){
            center=districts.center.split(',')//省份中心
            for (let num = 0; num < districts.districts.length; num++) {
              const element = districts.districts[num];
              nameList.push({//市区信息
                name:element.name,
                value:element.center.split(','),
              })
              if(Math.random()>0.5){
                valList.push({
                  name:element.name,
                  value:element.center.split(','),
                })
              }
            }
            temp=true
          }
          if(temp){
            break
          }
        }
        _this.loadMap(mapCode, name,center,nameList,valList);
      }

然后调用地图重新渲染点击的省份

loadMap(mapCode, name,center,nameList,valList) {
        let _this=this
        _this.chinaOpt = echarts.init(document.getElementById('chinaflag'));
        _this.chinaOpt.clear()
        axios.get('../../../../../static/json/'+mapCode+'_full.json').then((data) => {
          if (data) {         
            echarts.registerMap(name, data.data);
            var opt={
              geo: {
                map: name,
                zoom: 1, //当前视角缩放比例      
              },
              series: [
                {
                  data: nameList,
                  type: 'map',//渲染地图
                  mapType: name,
                  selectedMode: 'false',
                  label: {
                    normal: {
                      show: true,
                      color:'#fff'
                    },
                    emphasis: {
                      show: true,
                      color:'#fff'
                    }
                  },
                  itemStyle: {
                    normal: {
                      areaColor: '#03035a',
                      borderColor: '#00f9ff',
                      shadowColor: '#092f8f', //外发光
                      shadowBlur: 20
                    },
                    emphasis: {
                      areaColor: '#03035a', //悬浮区背景
                    }
                  }
                },
                {
                  name: 'Top',//地图上标记点信息
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  symbol: 'pin',
                  symbolSize: [20, 20],
                  itemStyle: {
                    normal: {
                      color: '#D8BC37', //标志颜色
                    }
                  },
                  data: valList,
                },
              ]
            };
            _this.chinaOpt.setOption(opt)
          } else {
            alert('无法加载该地图');
          }
        })
      }