uni-app微信小程序上使用ucharts地图时踩过的一些坑

地图注意事项

1、使用的地图json文件从http://datav.aliyun.com/tools/atlas/下载后不要随意修改，改下城市名称（不想显示全称的可以改一下）就差不多了，不然会引发后续一系列问题（我就是嫌地图文件太大，怕加载慢所以在网上找了一份简洁的，但是被教做人最后还是乖乖用回最初的）
2、不要在scrollView里使用地图！不要在scrollView里使用地图！不要在scrollView里使用地图，当然如果你用了没问题就当我没说，如果获取不到正确的currentIndex，那就是scrollView的问题，不要怀疑了
3、如果你的图表布局什么的都没问题，但是页面滚动时，部分图表会固定在页面上，可能是用了v-if的原因，加了canvasId没用的话，就真机或者发布体验版看一下，可能真机上是正常的（如果没用的话，就自己想办法解决吧，解决后顺便评论区说一下解决办法，谢谢大佬了）
4、在后续添加新需求时，改动了一下外部容器的布局，加了一个position，导致getIndex方法获取currentIndex变成了-1，有问题的小伙伴可以参考排查一下，后来用flex布局替代后就正常了

地图的一些用法

1、自定义tooltip：
step1: 组件上添加 :tooltipShow="false"以及绑定事件getIndex
step2: 引入config-ucharts.js文件
step3: 定义你想要的tooltip

2、地图的颜色随着返回的数据进行一个梯度的展示

3、地图是没有图例的，想要的话就自己根据设置的colors数组写一个，太简单了就不说了
主要代码：

// template里的代码
<qiun-data-charts 
	type="map" 
	:canvas2d="true" 
	canvasId="housesMapData"
	:opts="optsMap"
	:chartData="housesMapData"
	:tooltipShow="false"
	@getIndex="getIndex"/>

// script里的代码

// 引入uCharts对象，用来操作地图
import uCharts from '@/components/u-charts/config-ucharts.js'

onLoad: {
         uni.request({
			url: mapUrl,
				method: 'POST',
				success: (mapres) => {
					this.provinces = mapres.data.res.features // 地图json文件，太大了，放在后台获取
					// docFilter是我自己封装的一个处理数据的js文件，请根据自己的数据格式进行处理
					docFilter.getNumData('地区用户数', 'cloumn').then((res) => {
						let nums = docFilter.getNumsArr(res) // 把所有的value值放在一个数组里
						this.cusDatas = docFilter.getTotalArr(res, true) // 获取到后台数据，处理成大概[{name: '城市', value: 0}]这样子
						this.customMapData.series = that.detailMapData(this.cusDatas, this.provinces, nums)
					})
				}
			})
},
methods: {
            
          detailMapData(data, prov, numArr) { // 处理地图数据，把后台获取的数据和地图json文件合并
				let that = this
				let colors = this.colors // 设置一个颜色梯度数组，我这里是6个，由深到浅
				let max = parseInt(Math.max.apply(null, numArr)) // 获取数组的最大值
				let num = Math.ceil(max / 6) // 根据最大值，求出每个区间的大小
				let percents = docFilter.getProvPercentInCountry(data) // 全国占比
				return prov.map(item => {
					for (var i = 0; i < data.length; i++) {
						let color = "#ffffff"
						let value = Number(data[i].value)
						if (value === 0) {
							color = "#ffffff"
						} else if (value > 0 && value <= num) {
							color = colors[5]
						} else if (value > num && value <= num * 2) {
							color = colors[4]
						} else if (value > num * 2 && value <= num * 3) {
							color = colors[3]
						} else if (value > num * 3 && value <= num * 4) {
							color = colors[2]
						} else if (value > num * 4 && value <= num * 5) {
							color = colors[1]
						} else {
							color = colors[0]
						}
						data[i].percent = percents[i] // 把得到的占比也放进数据里
						if (data[i].name === item.properties.name) {
							return {...item, ...data[i], color} // 把json文件的数据，后台返回的数据，颜色值进行拼接
						}
					}
					return item // 返回拼接好的新对象
				})
				
			},
            getIndex(e) { // 点击地图进行操作
                //uCharts.instance[e.id]代表当前的图表实例（除APP端，APP不可在组件外调用uCharts的实例）
                //uCharts.option[e.id]代表当前的图表的opts（除APP端，APP不可在组件外调用uCharts的实例）
				let categories = uCharts.option[e.id].categories
				let series = uCharts.option[e.id].series
				let index = e.currentIndex // 获取当前点击地区的索引值，地图放在scrollView可能会导致获取出错，所以尽量别放在scrollView里
				let textList =  [
						{text: series[index].name, color: null },
					    {text: "用户数:" + series[index].value + "人", color: series[index].color},
						{text: "全国占比:" + series[index].percent + "%", color: series[index].color}
					]
				//changedTouches是点击的坐标值
				uCharts.instance[e.id].showToolTip(
				  { changedTouches: [e.event] },
				  {
				    index: index,
				    textList: textList
				  }
				)

                // 以下代码是我用来刷新相关图表的，如果有省份变化了，图标数据也要变化的需求可以用类似操作，没有需求略过就可以了
				docFilter.getNumData('省市区楼盘数', 'cloumn').then((res) => {
					this.loupanDangwei = docFilter.getProvHouseDistribution(res, this.curProvince)
				})
				
			}
		}
}		

下面是效果图