vue+echarts 地图携带参数下钻【demo二】

相关必要文件已上传个人GIT代码库，自行下载
https://gitee.com/lemon-design/EchartsMapDeepDown.git
下钻数据为假数据 中国–>辽宁–>大连
附上代码

<template>
  <div style="background: rgba(0, 0, 0, 0.2);height:900px">
    <div id="map" style="height:888px"></div>
  </div>
</template>
<script>
  import {cityMap} from '../assets/cityMap/citymap'
  import {provinces} from '../assets/cityMap/provinces'

  var echarts = require('echarts')
  export default {
    name: '',
    data() {
      return {
        mapOfIndustry: {
          backgroundColor: '#14285b',
          title: {
            text: '中国高校分布',
            subtext: '',
            top: '30',
            left: 'center',
            textStyle: {
              color: '#fff'
            },
            subtextStyle: {
              color: '#ccc',
              fontSize: 13,
              fontWeight: 'normal',
              fontFamily: 'Microsoft YaHei'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}',
            formatter: function (params) {
              // console.log(params)
              return params.seriesName + '<br/>' + params.name + ' : ' + params.value
            }
          },
          //左侧小导航图标
          visualMap: {
            show: true,
            x: 'right',
            y: 'bottom',
            splitList: [
              {
                start: 500

              }, {
                start: 400,
                end: 500
              },
              {
                start: 300,
                end: 400
              },
              {
                start: 200,
                end: 300
              },
              {
                start: 100,
                end: 200
              },
              {
                start: 0,
                end: 100
              }
            ],
            textStyle: {
              color: '#ffffff'
            },
            color: ['#5b2546', '#7d4269', '#564bab', '#335bae']
          },
          series: [{
            name: '',
            type: 'map',
            mapType: 'china',
            itemStyle: {
              normal: {
                label: {
                  show: false
                }
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            data: [
              {name: '辽宁', value: 1555},
              {name: '黑龙江', value: 1555},
              {name: '吉林', value: 1555}
            ]
          }],
          animationDuration: 1000,
          animationEasing: 'cubicOut',
          animationDurationUpdate: 1000

        },
        coData: [
          {name: '北京', value: "123"},
          {name: '天津', value: "3422"},
          {name: '上海', value: "23423"},
          {name: '重庆', value: "234"},
          {name: '河北', value: "33"},
          {name: '河南', value: "44"},
          {name: '云南', value: "322"},
          {name: '辽宁', value: "324"},
          {name: '黑龙江', value: "777"},
          {name: '湖南', value: "44"},
          {name: '安徽', value: "5345"},
          {name: '山东', value: "456"},
          {name: '新疆', value: "4532"},
          {name: '江苏', value: "456"},
          {name: '浙江', value: "145"},
          {name: '江西', value: "782"},
          {name: '湖北', value: "213"},
          {name: '广西', value: "452"},
          {name: '甘肃', value: "885"},
          {name: '山西', value: "148"},
          {name: '内蒙古', value: "356"},
          {name: '陕西', value: "975"},
          {name: '吉林', value: "964"},
          {name: '福建', value: "55"},
          {name: '贵州', value: "5452"},
          {name: '广东', value: "456"},
          {name: '青海', value: "45"},
          {name: '西藏', value: "12"},
          {name: '四川', value: "73"},
          {name: '宁夏', value: "745"},
          {name: '海南', value: "752"},
          {name: '台湾', value: "7865"},
          {name: '香港', value: "789"},
          {name: '澳门', value: "456"}
        ],
        dataProvince: [
          {value: 204, name: "沈阳市"},
          {value: 355, name: "大连市"},
          {value: 488, name: "鞍山市"},
          {value: 523, name: "抚顺市"},
          {value: 204, name: "本溪市"},
          {value: 355, name: "丹东市"},
          {value: 488, name: "锦州市"},
          {value: 523, name: "营口市"},
          {value: 204, name: "阜新市"},
          {value: 355, name: "辽阳市"},
          {value: 488, name: "盘锦市"},
          {value: 523, name: "铁岭市"},
          {value: 204, name: "朝阳市"},
          {value: 355, name: "葫芦岛市"}
        ],
        dataCity: [
          {value: 204, name: "西岗区"},
          {value: 355, name: "中山区"},
          {value: 488, name: "长海县"},
          {value: 523, name: "甘井子区"},
          {value: 204, name: "瓦房店市"},
          {value: 355, name: "普兰店市"},
          {value: 488, name: "庄河市"},
          {value: 523, name: "旅顺口区"},
          {value: 204, name: "沙河口区"},
          {value: 355, name: "金州区"}
        ],
      }
    },
    mounted() {
      this.mapCH()
    },
    methods: {
      /**
       * 地图下钻
       */
      mapCH() {
        var a = this.coData
        var b =this.dataProvince
        var c =this.dataCity
        let that = this
        var mapChart = echarts.init(document.getElementById('map'), 'dark')
        var geoCoordMap = {
          '江西公司': [117.121225, 36.66466],

          '大连公司': [121.03, 38.7],

        }
        var dataX = [
          {name: '江西公司', value: 190},

          {name: '大连公司', value: 158},

        ];
        //直辖市和特别行政区-只有二级地图，没有三级地图
        var special = ['北京', '天津', '上海', '重庆', '香港', '澳门']
        var mapdata = []
        var mappointdata = []
        //绘制全国地图
        that.axios.get('static/map/china.json').then(res => {
          var data = res.data
          var d = []
          for (var i = 0; i < data.features.length; i++) {
            d.push({
              name: data.features[i].properties.name,
            })
          }

          var point = [];
          for (var i = 0; i < dataX.length; i++) {
            var geoCoord = geoCoordMap[dataX[i].name];
            if (geoCoord) {
              point.push({
                name: dataX[i].name,
                value: geoCoord
              });
            }
          }
          mappointdata = point
          mapdata = d
          var coData=this.coData
          //注册地图
          echarts.registerMap('中国', data)
          //绘制地图
          that.renderMap('中国', d, mappointdata,a)
        }).catch(err => {
          console.log("错误1：------------------------")
          console.log(err)
        })
        //地图点击事件
        mapChart.on('click', function (params) {

          if (params.name in provinces) {
            //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
            that.axios.get('static/map/provinces/' + provinces[params.name] + '.json').then(res => {
              console.log("获取省代号id")
              var codeId=provinces[params.name]
              console.log(codeId)
              var data = res.data
              var d = []
              for (var i = 0; i < data.features.length; i++) {
                // var geoCoord = geoCoordMap[data[i].name];
                d.push({
                  name: data.features[i].properties.name,
                  value: data.features[i].properties.value,
                });
              }
              echarts.registerMap(params.name, data)
              that.renderMap(params.name, d,mappointdata,b)
            }).catch(err => {
              console.log("错误2：------------------------")
              console.log('map', err)
            })
          }
          else if (params.seriesName in provinces) {
            //如果是【直辖市/特别行政区】只有二级下钻
            if (special.indexOf(params.seriesName) >= 0) {
              // renderMap('中国', mapdata)
              // renderMap('中国', mapdata)
              //绘制全国地图
              that.axios.get('static/map/china.json').then(res => {
                var data = res.data
                var d = []
                for (var i = 0; i < data.features.length; i++) {
                  d.push({
                    name: data.features[i].properties.name,
                  })
                }

                var point = [];
                for (var i = 0; i < dataX.length; i++) {
                  var geoCoord = geoCoordMap[dataX[i].name];
                  if (geoCoord) {
                    point.push({
                      name: dataX[i].name,
                      value: geoCoord
                    });
                  }
                }
                mappointdata = point
                mapdata = d
                //注册地图
                echarts.registerMap('中国', data)
                //绘制地图
                that.renderMap('中国', d, mappointdata,a)
              }).catch(err => {
                console.log("错误4：------------------------")
                console.log(err)
              })
            }
            else {
              //显示县级地图
              that.axios.get('static/map/city/' + cityMap[params.name] + '.json').then(res => {
                console.log("获取市代号id")
                console.log(cityMap[params.name])
                var data = res.data
                console.log("地图点击事件")
                console.log(data)
                echarts.registerMap(params.name, data)
                var d = []
                for (var i = 0; i < data.features.length; i++) {
                  d.push({
                    name: data.features[i].properties.name,
                    value: data.features[i].properties.value
                  })

                }
                that.renderMap(params.name, d,mappointdata,c)
              }).catch(err => {
                console.log("错误3：------------------------")
                console.log('map', err)
              })
            }
          }
          else {
            // renderMap('中国', mapdata)
            //绘制全国地图
            that.axios.get('static/map/china.json').then(res => {
              var data = res.data
              var d = []
              for (var i = 0; i < data.features.length; i++) {
                d.push({
                  name: data.features[i].properties.name,
                })
              }

              var point = [];
              for (var i = 0; i < dataX.length; i++) {
                var geoCoord = geoCoordMap[dataX[i].name];
                if (geoCoord) {
                  point.push({
                    name: dataX[i].name,
                    value: geoCoord
                  });
                }
              }
              mappointdata = point
              mapdata = d
              //注册地图
              echarts.registerMap('中国', data)
              //绘制地图
              that.renderMap('中国', d, mappointdata,a)
            }).catch(err => {
              console.log("错误4：------------------------")
              console.log(err)
            })
          }
        })
      },
      /**
       * 地图dom渲染
       * @param map
       * @param data
       * @param mappointdata
       */
      renderMap(map, data, mappointdata,dataColor) {
        console.log("传值")
        console.log(dataColor)

        var geoCoordMap = {
          '江西公司': [117.121225, 36.66466],

          '大连公司': [121.03, 38.7],

        }
        var dataX = [
          {name: '江西公司', value: 190},

          {name: '大连公司', value: 158},

        ];
        var convertData = function (dataX) {
          var res = [];
          for (var i = 0; i < dataX.length; i++) {
            var geoCoord = geoCoordMap[dataX[i].name];
            if (geoCoord) {
              res.push({
                name: dataX[i].name,
                value: geoCoord
              });
            }
          }
          return res;
        };
        let mapOfIndustryecharts = this.$echarts.init(document.getElementById('map'))
        this.mapOfIndustry.title.subtext = map
        this.mapOfIndustry.animationDuration=1000,
          this.mapOfIndustry.animationEasing='cubicOut'
        this.mapOfIndustry.animationDurationUpdate=1000
        this.mapOfIndustry.geo = {
          name: '强',
          type: 'scatter',
          map: map,
          zoom: 1.25,
          layoutCenter: ['50%', '50%'],//距左百分比，距上百分比
          layoutSize: 850,//省份地图大小为600xp。
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#323c48',
              borderColor: '#111'
            },
            emphasis: {
              areaColor: '#2a333d'
            }
          }
        }
        this.mapOfIndustry.series = [
          /*{
            name: map,
            type: 'scatter',
            coordinateSystem: 'geo',
            aspectScale: 0.75, //长宽比
            data: convertData(dataX),
            layoutCenter: ['40%', '40%'],
// 如果宽高比大于 1 则宽度为 100，如果小于 1 则高度为 100，保证了不超过 100x100 的区域
            layoutSize: 80,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false,
                textStyle: {
                  color: '#ffffff'
                }
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: 'red'
              }
            }
          },*/

          {
            name: map,
            type: 'map',
            mapType: map,
            geoIndex: 1,
            aspectScale: 0.75, //长宽比
            zoom: 1.25,
            layoutCenter: ['50%', '50%'],//距左百分比，距上百分比
            layoutSize: 850,//省份地图大小为600xp。
            // coordinateSystem: 'geo',

            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: true,
                textStyle: {
                  color: '#ffffff'
                }
              },
              emphasis: {
                show: true
              }
            },
            // roam: true,
            itemStyle: {
              normal: {
                color: '#F4E925',
                areaColor: '#323c48',
                borderColor: 'dodgerblue'
              }
            },
            data: dataColor

          },
          /*   {
               name: map,
               type: 'map',
               mapType: map,

               coordinateSystem: 'geo',
               data: mappointdata,
               symbolSize: function(val) {
                 return val[2] / 10;
               },
               label: {
                 normal: {
                   formatter: '{b}',
                   position: 'right',
                   show: true
                 },
                 emphasis: {
                   show: true
                 }
               },
               itemStyle: {
                 normal: {
                   color: '#F4E925',
                   areaColor: '#323c48',
                   borderColor: 'dodgerblue'
                 }
               }
             },*/

        ]
        if (map == '黑龙江') {
          this.mapOfIndustry.geo.zoom = 0.75
          this.mapOfIndustry.series[0].zoom = 0.75
        } else if (map == '甘肃') {
          this.mapOfIndustry.geo.zoom = 0.5
          this.mapOfIndustry.series[0].zoom = 0.5
        } else if (map == '中国') {
          this.mapOfIndustry.geo.zoom = 1.25
          this.mapOfIndustry.series[0].zoom = 1.25
        } else {
          this.mapOfIndustry.geo.zoom = 1
          this.mapOfIndustry.series[0].zoom = 1
        }

        //渲染地图
        mapOfIndustryecharts.setOption(this.mapOfIndustry)

      }
    }
  }
</script>

<style scoped>
</style>

---

能力不足水平有限
有问题别说脏话
来学习交流就好
有问必答
email:1848199654@qq.com

---