echarts 中国地图(带南海诸岛) 及各省份地图json文件_echarts中国带海南群岛地图

各省份、区域的地图json文件可以去 http://datav.aliyun.com/tools/atlas 找，能下载。

中国地图(带南海诸岛)

上代码

<template>
  <div style="width: 950px;height:610px;"/>//画板大小
</template>
<script lang="js">
	import echarts from 'echarts'
	import 'echarts/theme/macarons'
	import china from '@/components/mapJson/china.json'
	//引入echarts和中国地图的json，地图路径不要照抄
	
	export default {
		data() {
			return {
				jsonData: [],
				mapTitle: "",
				mapZoom: "",
				mapLayoutCenter: "",
				mapType: ""
			}
		},
		methods: {
			init() {
				this.mapType = 'china'
				echarts.registerMap(this.mapType , china);
				this.mapTitle = "全国降雨量分布"
				this.mapZoom = 5.5
				this.mapLayoutCenter = ['50%','45%']
				this.jsonData = [{
					name: "河北",
					value: 9000
				},
				{
					name: "河南",
					value: 7000
				},
				{
					name: "四川",
					value: 5000
				}]

				this.mapchart = echarts.init(this.$el,'macarons')
				this.mapchart.setOption({
					title: {//标题
						show: true,
						text: this.mapTitle,
						textStyle: {
							color: '#252733',
							fontSize: 18,
							fontFamily: 'Microsoft YaHei',
							fontWeight: 'bold'
						},
						padding: [0, 0, 0, 50]
					},
					visualMap: {//地图左下角视觉映射
						show: true,
						type: "piecewise",
						max: 100000,
						inRange: {
							color: ['#A5DCF4','#006edd']
						},
						pieces: [{
								gt: 8000
							},
							{
								gt: 6000,
								lte: 8000
							},
							{
								gt: 4000,
								lte: 6000
							},
							{
								gt: 2000,
								lte: 4000
							},{
								lt: 2000
							}
						],
						padding: [0, 0, 80, 60]
					},
					series: [
						{
							type: 'map',
							mapType: this.mapType,
							zoom: this.mapZoom,//地图大小
							label: {
								show: true,
								color: 'black'
							},
							itemStyle: {//地图线条颜色、粗细，块颜色
								normal: {
									borderColor: '#8FE48F',
									borderWidth: 1,
									areaColor: 'RGBA(204, 232, 255, 1)'
								}
							},
							layoutCenter: this.mapLayoutCenter,//地图位置
							layoutSize: 100,
							data: this.jsonData//地图数据
						}
					]
				});
			}
		}
	}
</script>
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

效果图如下：