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

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

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

  • 3
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
ECharts 是一个强大的 JavaScript 数据可视化库,它提供了丰富的地图组件,包括中国地图。如果你想在使用 ECharts 地图展示数据时去掉海南省的岛屿部分,你可以通过设置地图的系列配置来实现。 首先,确保你已经包含了 ECharts 地图文件,例如 `echarts-gl.js` 或者 `world.js`,这些文件包含了中国地图的地理信息。然后,在配置地图时,可以通过 `visualMap` 和 `series` 的属性来控制显示的内容。 以下是一个示例配置,说明如何移除海南岛屿: ```javascript var myChart = echarts.init(document.getElementById('main')); // 假设你已经有了一个地理编码数据或者颜色映射数据 var option = { map: 'china', // 使用 'china' 作为中国地图的标识 visualMap: { show: false, // 关闭默认的视觉映射,防止自动填充颜色 pieces: [ { piecewise: [{ max: 1.0, color: 'white' }] } // 设置所有颜色为白色,模拟没有颜色区分的效果 ] }, series: [{ name: '地图', type: 'map', data: [], // 这里填写你的省份数据,不包含海南 mapType: 'china', // 保持和地图标识一致 roam: true, // 保持地图可缩放和平移 label: { normal: { show: false // 隐藏默认标签 } } }] }; myChart.setOption(option); ``` 在这个配置中,`visualMap` 的 `pieces` 属性设置了所有的颜色为白色,模拟了地图上区域颜色的缺失效果。同时,`series.data` 中只包含不包括海南省份数据。 如果你有具体的数据源或者更复杂的自定义需求,你可能需要根据实际情况调整代码。有关于 ECharts 的其他问题或者需要进一步的帮助,请随时提问:
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值