首先，小程序开发定制在实现地图之前，小程序开发定制需要实现地图的json文件（小程序开发定制包含各省份和整个中国地图），小程序开发定制文件可从下载网址：
小程序开发定制在这个页面右侧可选择下载json文件或者api引入，在这里建议选择下载下来。
接下来继续具体实现代码：
第一步：
1.定义一个id唯一的div容器
2.把中国总地图，china.json文件粘贴到项目中后，import到vue文件中，
// 在script便签内importimport chinaJson from '../../js/china.json'// 在template内定义<div id="mapChart"></div>- 1
- 2
- 3
- 4
第二步：
在data中定义option，注意option不要写在方法里边因为我们这里的option以及图表都是会变化的，因为我们稍后要实现数据下钻嘛
data() { return { myChart: null, // 图表 mapName: 'china', // 当前map名称 // 地图配置项 option: { visualMap: { min: 1, max: 1000, text: ['高', '低'], realtime: false, calculable: true, inRange: { color: ['lightskyblue', 'yellow', 'orangered'] } }, geo: { map: "china", roam: false,// 一定要关闭拖拽 zoom: 1.25, // center: [105, 36], // 调整地图位置 label: { normal: { show: true, //省份名展示 fontSize: "10", color: "rgba(0,0,0,0.7)" }, emphasis: { show: false } } }, series: [ { type: "map", map: "china", geoIndex: 0, // 解决设置geo后地图重影问题 zoom: 1.25, //这里是关键，一定要放在 series中 // silent: false, //鼠标移入区域变色 如果设置为true则无法高亮 // 鼠标移入高亮区域属性 itemSytle: { emphasis: { show: true, areaColor: 'blue', //鼠标滑过区域颜色 color: 'blue', //鼠标滑过区域颜色 } }, data: [ // 这里我写的是静态数据，测试用的，具体情况按你们接口拿到的数据来 {name:'河南省',value:666}, {name:'山东省',value:999} ] } ] } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
第三步：
在methods中定义如下方法（ps:注释写的很详细，大家读一下代码就能理解了）
// 在这里调用，就会展示一张中国地图啦mounted() { // 如果你不需要数据下钻，可以不写后两个方法 this.getMapChart() }, methods： {// 地图echarts getMapChart () { this.myChart = this.$echarts.init(document.getElementById("mapChart")) // 注册默认全国地图的json，这里一定要小写的china!!! this.$echarts.registerMap('china', chinaJson) // 绘制图表 this.myChart.setOption(this.option) // 设置点击事件 this.myChart.on('click', (e)=>{ this.mapName = e.name if (e.componentSubType == 'map') { this.getDownData(e.name) } }) }, // 点击某个省份/区县模块，下钻数据 async getDownData (name) { // 获取到下钻的json数据 let newMapJson = await this.getMapJson(name) // 注册新下钻数据的map this.$echarts.registerMap(name, newMapJson) // 把option中map设置为最新下钻的map名称 this.option.series[0].map = name this.option.geo.map = name // 设置更改后的配置项 this.myChart.setOption(this.option) }, // 根据点击动态获取对应下钻的json数据 async getMapJson (name) { let jsonData = await import('../../js/'+ name +'.json') return jsonData } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
第四步：
如果你也想数据下钻之后返回中国地图，则需要搞个button，下钻到某个省市区之后，点击“全国”按钮返回中国地图。
<el-button v-show="mapName !== 'china'" @click="getChinaChart()">全国</el-button> ...... // 点击全国按钮触发 getChinaChart () { this.mapName = null // 注册默认全国地图的json this.$echarts.registerMap('china', chinaJson) // 绘制图表 this.myChart.setOption(this.option) // 把option中map设置为'china'名称 this.option.series[0].map = 'china' this.option.geo.map = 'china' }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
最终实现效果：
点击四川省，则显示四川省地图并显示全国按钮
写在最后：如果大家想要调地图的大小鸭，样式鸭，鼠标滑过的样式啊等等，可以搜一下，印象也会更深刻，这里就不赘述了，因为作者我也得随用随搜嘿嘿嘿
最后，如果对你有帮助就留个三连，支持一下作者把~