uni-app微信小程序上使用ucharts地图时踩过的一些坑
地图注意事项1、使用的地图json文件从http://datav.aliyun.com/tools/atlas/下载后不要随意修改,改下城市名称(不想显示全称的可以改一下)就差不多了,不然会引发后续一系列问题(我就是嫌地图文件太大,怕加载慢所以在网上找了一份简洁的,但是被教做人最后还是乖乖用回最初的)2、不要在scrollView里使用地图!不要在scrollView里使用地图!不要在scroll
地图注意事项
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)
})
}
}
}
下面是效果图
更多推荐
所有评论(0)