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

上实例

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<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>