vue+echarts 地圖攜帶參數下鑽【demo一】

相關必要文件已上傳個人GIT代碼庫，自行下載
https://gitee.com/lemon-design/EchartsMap.git
個人鼓搗了快一週了
本文地圖下鑽部分通過watch監控返回數據,進而進行地圖渲染
附上代碼

<template>
  <div class="backgroundImg">
    <div class="line"></div>
    <el-row>
      <el-col :span="24" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.2)">
        <div id="map"
             style="width: 96.5%;height:730px;margin-left: 20px;margin-right: 10px;margin-bottom: 20px"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  var echarts = require('echarts')
  export default {
    name: 'industry-distribution',

    data: function() {
      return {

        industryCode: '',
        industryCodeOptions: [],
        coData: [],
        dataProvince: [],
        dataCity: [],
        mapLoading: true,
        multipleSelection: [],
        mapOfIndustry: {
          backgroundColor: '#040C3D',
          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) {
              return params.name + '</br>'
                + '區域公司總數:&nbsp;' + 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']
          },
          /*          dataRange: {
                      show: true,
                      min: 0,
                      max: 200000,
                      x: 'left',
                      y: 'bottom',
                      text: ['高', '低'], // 文本，默認爲數值文本
                      calculable: true,
                      color: ['#0000FF', '#00BFFF', '#87CEEB']
                    },*/
          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
        },
        provinceId: '',
        provinceName: '',
        cityId: '',
        areaId: '',
        provinceIdTemp: '',
        cityIdTemp: '',
        areaIdTemp: '',
        mapFlag1: '',
        mapFlag2: '',
        mapFlag3: '',
        mapData1: [],
        mapData2: [],
        mapData3: []
      }
    },
    mounted() {
      this.industrySelect()
    },
    beforeMount() {
    },
    watch: {
      mapFlag1: function(newmapFlag1, oldmapFlag1) {
        this.mapFlag1 = newmapFlag1
      },
      mapFlag2: function(newmapFlag2, oldmapFlag2) {
        this.mapFlag2 = newmapFlag2
      },
      mapFlag3: function(newmapFlag3, oldmapFlag3) {
        this.mapFlag3 = newmapFlag3
      },
      coData: function(newcoData, oldcoData) {
        var d = []
        for (var i in newcoData) {
          d.push({
            name: newcoData[i].name,
            value: newcoData[i].value
          })
        }
        this.renderMap(this.mapFlag1, 0, 0, d)
        this.showTableData()
        this.loading = false
        this.provinceIdTemp = this.provinceId
        this.cityIdTemp = this.cityId
        this.areaIdTemp = this.areaId
      },
      dataProvince: function(newValue, oldValue) {
        var d = []
        for (var i in newValue) {
          d.push({
            name: newValue[i].name,
            value: newValue[i].value
          })
        }
        this.renderMap(this.mapFlag2, 0, 0, d)
        this.showTableData()
        this.loading = false
        this.provinceIdTemp = this.provinceId
        this.cityIdTemp = this.cityId
        this.areaIdTemp = this.areaId
      },
      dataCity: function(newdataCity, olddataCity) {
        var d = []
        for (var i in newdataCity) {
          d.push({
            name: newdataCity[i].name,
            value: newdataCity[i].value
          })
        }
        this.renderMap(this.mapFlag3, 0, 0, d)
        this.showTableData()
        this.loading = false
        this.provinceIdTemp = this.provinceId
        this.cityIdTemp = this.cityId
        this.areaIdTemp = this.areaId
        this.provinceId = ''
        this.cityId = ''
        this.areaId = ''
      }
    },
    methods: {
      /**
       *查詢行業code
       */
      industrySelect() {
        selectAllIndustry().then(response => {
          var optionIndustry = []
          for (let i = 0; i < response.data.data.length; i++) {
            optionIndustry.push({
              value: response.data.data[i].id,
              label: response.data.data[i].industryName
            })
          }
          this.industryCodeOptions = optionIndustry
          this.industryCode = 1
          this.HIndustryDistributionNum(0, 0)
          this.mapCH()
          // this.showTableData()
        })
      },

      /**
       * 通過行業ID、省編號、市編號、區編號查詢區域公司總數
       */
      HIndustryDistributionNum(tmp, val) {
        var industry = this.industryCode

        if (tmp === 1) {
          this.provinceId = val
        } else if (tmp === 2) {
          this.cityId = val
        } else if (tmp === 0) {
        }
        var params = {

          industryId: industry,
          provinceId: this.provinceId,
          cityId: this.cityId,
          areaId: this.areaId
        }
        HIndustryDistributionNum(params).then(res => {
          // this.coData = res.data.data.coData
          if (this.provinceId === '' && this.cityId === '') {
            this.coData = res.data.data.coData
          } else if (this.provinceId !== '' && this.cityId === '') {
            this.dataProvince = res.data.data.coData
            // this.renderMap(provinces[provinceId], this.dataProvince)
          } else if (this.provinceId !== '' && this.cityId !== '') {
            this.dataCity = res.data.data.coData
          }
        })
      },
      /**
       * 地圖下鑽
       */
      mapCH() {
        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 = []
          this.mapData1 = data
          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
          that.mapFlag1 = '中國'
          //  查全國數據
          // that.HIndustryDistributionNum(0, 4)
          //註冊地圖
          echarts.registerMap('中國', data)
          //繪製地圖
          that.renderMap('中國', d, mappointdata, this.coData)
        }).catch(err => {
          console.log('全國地圖加載錯誤：------------------------')
          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 => {
              var data = res.data
              var d = []
              for (var i = 0; i < data.features.length; i++) {
                d.push({
                  name: data.features[i].properties.name
                })
              }
              this.mapData1 = data
              that.mapFlag2 = params.name
              this.provinceId = provinces[params.name]
              that.HIndustryDistributionNum(1, this.provinceId)
              //註冊地圖
              echarts.registerMap(params.name, data)
              //繪製地圖
              // that.renderMap(params.name, d, mappointdata, b)
            }).catch(err => {
              console.log('省下鑽錯誤：------------------------')
              console.log('map', err)
            })
          }
          else if (params.seriesName in provinces) {
            //如果是【直轄市/特別行政區】只有二級下鑽
            if (special.indexOf(params.seriesName) >= 0) {
              that.axios.get('static/map/china.json').then(res => {
                that.provinceId = ''
                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
                that.HIndustryDistributionNum(0, 4)
                //註冊地圖
                echarts.registerMap('中國', data)
                //繪製地圖
                that.renderMap('中國', d, mappointdata, this.coData)
              }).catch(err => {
                console.log('市返回全國錯誤：------------------------')
                console.log(err)
              })
            }
            else {
              //顯示縣級地圖
              that.axios.get('static/map/city/' + cityMap[params.name] + '.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,
                    value: data.features[i].properties.value
                  })
                }
                this.mapData2 = data
                this.cityId = cityMap[params.name]
                that.mapFlag3 = params.name
                that.HIndustryDistributionNum(2, this.cityId)
                //註冊地圖
                echarts.registerMap(params.name, data)
                //繪製地圖
                // that.renderMap(params.name, d, mappointdata, c)
              }).catch(err => {
                console.log('市下鑽錯誤：------------------------')
                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
              that.HIndustryDistributionNum(0, 4)
              //註冊地圖
              echarts.registerMap('中國', data)
              //繪製地圖
              that.renderMap('中國', d, mappointdata, this.coData)
            }).catch(err => {
              console.log('市返回全國錯誤：------------------------')
              console.log(err)
            })
          }
        })
      },
      /**
       * 地圖dom渲染
       * @param map
       * @param data
       * @param mappointdata
       */
      renderMap(map, data, dataPoint, 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: 600,//省份地圖大小爲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: 600,//省份地圖大小爲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>

  .backgroundImg {
    background-color: #010C31;
    border-radius: 13px 13px 13px 13px;
    color: white;
    border: 1px;
    border-color: #102864;
    height: 800px;
  }

</style>

---

能力不足水平有限
有問題別說髒話
來學習交流就好
有問必答
email:[email protected]

---