使用ucharts地图实现全国碳排放地图

本次使用的是秋云ucharts，在移动端及uniapp用的很不错。
ucharts官网：https://www.ucharts.cn/
阿里云的地图数据来源：http://datav.aliyun.com/tools/atlas/
中国地图数据JSON：https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
建议把json下载到本地
代码如下

<template>
	<view class="charts-box">
		<qiun-data-charts
			type="map"
			:opts="config"
			:canvas2d="true"
			:chartData="{ series: $store.state.chartsMap.mapList }"
			background="none"
		/>
	</view>
</template>
<script>
import mapData from '@/common/json/mapData.json';

export default {
	data() {
		return {
			data: mapData,
			config: {
				fontSize: 10,
				extra: { map: { mercator: true }}
			}
		}
	},
	created() {
		this.drawMap();
	},
	methods: {
		async drawMap(){
			uni.showLoading({
				title: '处理中...'
			});
			// 通过接口获取碳排量数据
			return await uniCloud
				.callFunction({
					name: 'getList'
				})
				.then(res => {
					let data = res.result.data;
					let arr = mapData.features.map(map => {
						// 未获取到数据时默认给白色，不用地图默认的颜色
						let obj = { ...map, color: '#ffffff' };
						data.forEach(item => {
							if (map.properties.adcode == item.adcode) {
								// 当adcode相等时，则是同一城市，将获取的数据塞入地图JSON mapData 中
								// color为地图填充的颜色
								obj = { ...map, ...item, color: this.addColor(item.count) };
							}
						});
						uni.hideLoading();
					})
				.catch(err => {
					uni.hideLoading();
				});
			},
		// 根据排放量添加颜色
		addColor(count) {
			if (count > 8000) {
				return '#bc3e10';
			} else if (count > 7000) {
				return '#fc5902';
			} else if (count > 5000) {
				return '#fc9c02';
			} else if (count > 4000) {
				return '#fbdb0f';
			} else if (count > 2000) {
				return '#93ce05';
			} else {
				return '#62ae02';
			}
		},
	}
}
</script>

<style lang="scss" scoped>
// 秋云ucharts必须给一个容器
.charts-box {
	width: 100%;
	height: 300px;
}
</style>

如果需要修改tooltip可以使用@getIndex获取点击x轴y轴，自己制作tooltip。