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 = '广东';