uniapp 實現echart 地圖功能，處理手機端geo縮放問題

這里需要去下載echart  4.2.0-rc.1版本    https://lib.baomitu.com/echarts/4.2.0-rc.1/echarts.min.js  兼容手機端縮放與點擊事件

先去http://datav.aliyun.com/tools/atlas/#&lat=22.890161256069412&lng=113.423936&zoom=7.5  下載相應的地圖，需要切割的在json里面刪除

例如我用的是廣東的大灣區的，只切了九個省份，其他的刪除后生成一個json

上實例

<template>
  <div class="map-box">
    <view  id="echartsmap" class="echart-view"></view>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {

  }
}
</script>

<script module="echarts" lang="renderjs>
 const jsonData = require('common/gd.json');

 var myChart
 export default {
  mounted() {
   if (typeof window.echarts === 'function') {
    this.mYChartmap()
   } else {
    // 動態引入較大類庫避免影響頁面展示
    const script = document.createElement('script')
    script.src = './static/echarts.min.js'
    script.onload = this.mYChartmap.bind(this)
    document.head.appendChild(script)

   }
  },
  methods: {
   mYChartmap() {
    myChart = echarts.init(document.getElementById('echartsmap'))
    echarts.registerMap('廣東', jsonData)
        let _that = this
        let newData =  function (name, data){
          return {
            name: name,
            type : 'scatter',//帶有漣漪特效動畫的散點（氣泡）圖
            coordinateSystem : 'geo',
            data : [data],
            symbol:'circle',
            symbolSize : 10,
            showEffectOn : 'render',
            rippleEffect : {
              scale : 5,
              brushType : 'stroke'
            },
            hoverAnimation : true,
            itemStyle : {
              normal : {
                color : function (e){
                  return e.data.color
                },
                shadowBlur : 10,
                shadowColor : '#fff'
              }
            },
            label : {
              normal : {
                formatter : function(a){
                  return a.name;
                },
                show : true,
                position: 'top',
                padding : 4,
                textStyle:{
                  color:'#fff'
                }
              }
            },
            zlevel : 1
          }
        }

        let optionMap = {
          //地圖坐標系必備的配置，具體的含義可以參考api
          geo : {
            roam : true,//是否開啟縮放和平移
            zoom : .9,//當前視角縮放比例
            selectedMode : 'single',//選中模式
            label : {
              normal : {
                show : true,
                textStyle : {
                  color : '#fff'
                }
              },
              emphasis : {
                show : true
              }
            },
            // 設置為一張完整經緯度的世界地圖
            map: 'world',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
            itemStyle : {//地圖區域的多邊形 圖形樣式
              hoverAnimation : true,
              normal : {
                opacity : .8,
                borderWidth: 1,
                areaColor: '#5095B3', //默認的地圖板塊顏色
                borderColor: '#5095B3',//地圖邊框顏色
              },
              emphasis : {
                areaColor: '#5095B3', //默認的地圖板塊顏色
                borderColor: '#fff',//地圖邊框顏色
                opacity : 1
              }
            }
          },
          series : []
        };
        optionMap.geo.map = '廣東';
    myChart.setOption(optionMap)
    myChart.on('click', function(data) {
          _that.navigator(data.name)
    })
   },
   navigator(data){
        uni.navigateTo({
          url: `/pages/day-list/index?city=${data}`,
        });
      }
  }
 }
</script>


<style lang="scss" scoped>
.map-box{
  margin: 30upx;
  border-radius: 12upx;
  overflow: hidden;
  box-shadow: 0px 8upx 20px 4px rgba(39, 165, 249, 0.08);
}
.echart-view{
  width: 100%;
  height: 400upx;
}
</style>

　　

 

效果圖如下

 

 

這里要注意：生成的json，echart讀取的時候有個name ，本實例用的是廣東 ，代碼里面需要把兩處名稱統一，否則地圖不出現

echarts.registerMap('廣東', jsonData)    

optionMap.geo.map = '廣東';