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

博客介绍了各省份、区域地图json文件的获取途径,可从 http://datav.aliyun.com/tools/atlas 下载,还提到了中国地图(带南海诸岛)并展示了相关代码及效果图。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

各省份、区域的地图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>

效果图如下:
在这里插入图片描述

评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值