因為工作原因用到echarts，需要實現三個功能國家到省級的地圖下鑽和散點分佈以及熱力圖顯示

網上資料蠻少的，記錄一個給後面的小夥伴一些參考，如果幫到你請點贊d=====(￣▽￣*)b

demo效果如下

中國地圖下顯示為熱力圖，顯示精確分佈點只是demo所以資料是自己寫的假資料只有幾條

點選進入省份地圖，在地圖之外還有那個小箭頭是資料的原因不是bug改下資料就好 

demo程式碼如下

下鑽到市級縣級道理也是如此

mapfun(name){ 
      console.log(this.chartNum)
      // 注意檔案路徑 
      this.$http.get('static/province/'+name+'.json').then(res => { 
        echarts.registerMap(name, res.body)
        let data = [];
        res.body.features.forEach(item => {
            data.push({
                name:item.properties.name
            })
        })
        this.chartNum !== 1 ? this.myChart.dispose() : ''  // 建立新例項之前一定要銷燬上一個例項，否則重複多次點選無數的例項導致記憶體爆滿
        this.chartNum++
        this.myChart = echarts.init(document.getElementById('myChart'))
        this.myChart.showLoading()
        this.myChart.setOption({
          title: { // 標題
            text: "分佈圖",
            left: "center",
            padding: 30,
            textStyle: {
              color: "#fff",
              fontSize: "30"
            }
          },
          visualMap: { // 熱力圖顏色顯示
            default:'piecewise ',
            default: 5,
            calculable:true,
            textStyle:{
              color: '#fef420'
            },
            inRange: {
                color: ['#fef420', '#df383e','#379fdf'],
            },
          },
          geo: [{ // 地圖
            type: 'map',  
            map: name,  // 地區名字，重要引數
            itemStyle: {
                areaColor: "#d7bed9",
                borderColor: "#111",
            },
            emphasis: {
              label:{
                show: false
              },
              itemStyle: {
                areaColor: "#f5d4f8"
              }
            },
            data: data,  // 資料，重要引數
            label: {    // 標籤的顯示
              normal: { show: false },
              emphasis: { show: true }
            },
          }],
          series: [{ // 散點分佈
              roam: true,
              type: name === 'china' ? "heatmap" : "scatter", // 中國地圖下顯示熱力圖，省級地圖下顯示精確分佈點
              coordinateSystem: "geo",
              data: [['116.347927', '39.948795', 100],
                    ['100.06376', '30.554698', 75],
                    ['104.05325', '29.646273', 50],['104.05325', '25.646273', 25],['94.05325', '30.646273', 1]],
              blurSize: 20,
              symbolSize: 20,
              symbol: 'arrow',  
              minOpacity: 0.1,
              maxOpacity: 1,
          }]
          
        }) 
        setTimeout(() => { 
           this.myChart.hideLoading()
        }, 1000)
        this.myChart.on('click', params => { // 點選函式
          name === 'china' ? this.mapfun(params.name) : this.mapfun('china')
        })
    })
    }
  }
 

若對你有幫助或喜歡本文請點贊 o(￣▽￣)ｄ
如有不足、需要改善或者還能優化的地方歡迎指出不勝感激，歡迎留言交流  (´▽`ʃ♡ƪ)