uniapp+Echarts微信小程序实现中国地图

在uni-app项目引用Echarts

参考文章链接: https://www.jianshu.com/p/5537e5053dc1
先在uni-app新建项目，然后在命令行管理中进入到该目录下，执行

npm init

然后安装依赖

npm install echarts mpvue-echarts --save

将下载后的三个库从node_modules剪切到项目的根目录下。

开始在项目中使用echarts。

替换最新的 mpvue-echarts 组件echarts.vue 。源码地址：https://github.com/dcloudio/hello-uniapp/blob/master/components/mpvue-echarts/src/echarts.vue
替换后在最新的echart.vue小作修改

init() {
...
this.$emit('onInit', {
    canvas: this.canvas,
    width: res.width,
    height: res.height
});
...
},

使用Echarts

在pages/index/index.vue引用

import * as echarts from 'echarts'; /*echarts.min.js为在线定制*/
import * as chinaJson from '../../echarts/map/json/china.json'; /*echart.min.js为在线定制*/
import mpvueEcharts from 'mpvue-echarts';

参考官网Echarts格式写

地图实现：

<template>
	<view>
		<view class="wrap">
			<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="renderMap" />
		</view>
		<view>123</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts'; /*echarts.min.js为在线定制*/
	import * as chinaJson from '../../echarts/map/json/china.json'; /*echart.min.js为在线定制*/
	import mpvueEcharts from 'mpvue-echarts';


	export default {
		data() {
			return {
				echarts,
				data: [{
						name: "南海诸岛",
						value: this.randomValue()
					},
					{
						name: '北京',
						value: this.randomValue()
					},
					{
						name: '天津',
						value: this.randomValue()
					},
					{
						name: '上海',
						value: this.randomValue()
					},
					{
						name: '重庆',
						value: this.randomValue()
					},
					{
						name: '河北',
						value: this.randomValue()
					},
					{
						name: '河南',
						value: this.randomValue()
					},
					{
						name: '云南',
						value: this.randomValue()
					},
					{
						name: '辽宁',
						value: this.randomValue()
					},
					{
						name: '黑龙江',
						value: this.randomValue()
					},
					{
						name: '湖南',
						value: this.randomValue()
					},
					{
						name: '安徽',
						value: this.randomValue()
					},
					{
						name: '山东',
						value: this.randomValue()
					},
					{
						name: '新疆',
						value: this.randomValue()
					},
					{
						name: '江苏',
						value: this.randomValue()
					},
					{
						name: '浙江',
						value: this.randomValue()
					},
					{
						name: '江西',
						value: this.randomValue()
					},
					{
						name: '湖北',
						value: this.randomValue()
					},
					{
						name: '广西',
						value: this.randomValue()
					},
					{
						name: '甘肃',
						value: this.randomValue()
					},
					{
						name: '山西',
						value: this.randomValue()
					},
					{
						name: '内蒙古',
						value: this.randomValue()
					},
					{
						name: '陕西',
						value: this.randomValue()
					},
					{
						name: '吉林',
						value: this.randomValue()
					},
					{
						name: '福建',
						value: this.randomValue()
					},
					{
						name: '贵州',
						value: this.randomValue()
					},
					{
						name: '广东',
						value: 20
					},
					{
						name: '青海',
						value: this.randomValue()
					},
					{
						name: '西藏',
						value: 0
					},
					{
						name: '四川',
						value: this.randomValue()
					},
					{
						name: '宁夏',
						value: this.randomValue()
					},
					{
						name: '海南',
						value: this.randomValue()
					},
					{
						name: '台湾',
						value: this.randomValue()
					},
					{
						name: '香港',
						value: this.randomValue()
					},
					{
						name: '澳门',
						value: this.randomValue()
					}
				]
			};
		},
		components: {
			mpvueEcharts
		},
		onLoad() {

		},
		methods: {
			randomValue() {
				return Math.round(Math.random() * 25);
			},
			renderMap(e) {
				const that = this;
				var mydata = that.data;
				let {
					canvas,
					width,
					height
				} = e;
				width = width - 20;
				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				echarts.registerMap('china', chinaJson);
				canvas.setChart(chart)
				var optionMap = {
					title: {
						text: '门店分布图',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{b}:{c}家店'
					},
					//左侧小导航图标
					visualMap: {
						min: 0,
						max: 25,
						left: 'left',
						top: 'bottom',
						// orient:'horizontal',
						// text: ['高', '低'], //取值范围的文字
						inRange: {
							color: ['#fff8ed','#f2b95b'] //取值范围的颜色
						},
						show: true, //图注
						pieces: [ //自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
							{
								min: 0,
								max: 5,
								label: '0~5家'
							},
							{
								min: 5,
								max: 10,
								label: '5~10家'
							},
							{
								min: 10,
								max: 15,
								label: '10~15家'
							},
							{
								min: 15,
								max: 20,
								label: '15~20家'
							},
							{
								min: 20,
								max: 25,
								label: '20~25家'
							},
						],
						hoverLink: true,
						textStyle: {
							fontSize: 8
						},
					},
					geo: {
						map: 'china',
						roam: false, //不开启缩放和平移
						zoom: 1.2,//视角缩放比例
						label: {
							normal: {
								show: false,
								fontSize: 8,
								color: 'rgba(0, 0, 0, 0.5)' //文字颜色
							}
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(0, 0, 0, 0.2)' //省份边框颜色
							},
							emphasis: {
								areaColor: '#F3B329', //鼠标选择区域颜色
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowBlur: 20,
								borderWidth: 0,
								shadowColor: 'rgba(0, 0, 0, 0.2)' //选择后的边框阴影颜色
							}
						}
					},
					//配置属性
					series: [
						{
							type: 'map',
							geoIndex: 0,
							animation: false,
							data: mydata,
						}
					]
				};
				//初始化echarts实例
				chart.setOption(optionMap);
				this.$refs.mapChart.setChart(chart);
			}
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		width: 100%;
		height: 600rpx;
		border: 1rpx solid #ddd;
	}
</style>

这里为了演示效果，我随机给定的value值，randomValue为我自己定义的一个获取随机数函数

最终效果

项目源码地址：https://github.com/watcher686/uniappEchartsMap.git

友好建议

1.在小程序开发工具中编译和预览时，提示Error:源码包超出最大限制,source size 3905KB exceed max limit 2MB

使用自定义版 echarts，https://echarts.apache.org/zh/builder.html
将下载下来的echarts.min.js放入echarts文件夹

修改pages/index/index.vue中的引入

2.插件自带的地图省份名字是默认出现在省会城市的位置，导致很多省份的名字有点挤甚至偏移，大家可以打开map/js/china.js

3.检索自己想要更改的省份名字，如湖南

"properties":{"cp":[112.982279,28.19409],"name":"湖南","childNum":3}}

其中cp即表示文字的位置，两个坐标表示经纬度，大家根据需要调整。哈哈 大致就到这里了，有兴趣的小伙伴可以试试！

相关链接

更改左侧小导航可以看看这个：https://blog.csdn.net/u010682330/article/details/80702331

更改echarts标题（title）配置：https://blog.csdn.net/zhang__ao/article/details/80745873