使用echart的map绘制辽宁省地图

最新推荐文章于 2024-04-02 19:18:18 发布

weixin_38208652

最新推荐文章于 2024-04-02 19:18:18 发布

阅读量2.8k

点赞数 4

文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_38208652/article/details/105133480

版权

之前看echart的地图地图插件挺好，有中国地图也有美国地图，因为业务情况想做一个辽宁省的，以为很简单，写的时候才发现还是有点问题的，这里先放一下代码吧
主要的问题还是那个date.json的获取，这里有一个网站
http://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4，可以获得各个省的数据
最后放一下成果吧在这里插入图片描述

	<link rel="stylesheet" href="tongjidaping/css/comon0.css">
	<script type="text/javascript" src=/tongjidaping/js/echarts.min.js"></script> 
	<script type="text/javascript">
		$(document).ready(function() {
			var mun= $("#muln").val()
			console.log(mun);
			$.get('tongjidaping/date.json', function (geoJson) {
				
				var geoJson=geoJson
				console.log(geoJson[0]);
				 var myChart = echarts.init(document.getElementById('echartMap'));
				 echarts.registerMap('辽宁省', geoJson);
				 option = {
				     series: [{
				         label: {
				             normal: {
				                 show: true,
				             },
				             emphasis: {
				                 show: true
				             }
				         },
				         itemStyle: {
				             color: '#ddb926'
				         },
				         type: 'map',
				         zoom: 5,
				         roam: true,
				         map: '辽宁省',
				         emphasis: {
				             label: {
				                 show: true
				             }
				         },
				         // 文本位置修正
				         textFixed: {
				             Alaska: [20, -20]
				         },
				         data: [{
				                 name: '沈阳市',
				                 value: 4822023
				             },
				             {
				                 name: '大连市',
				                 value: 731449
				             },
				             {
				                 name: '鞍山市',
				                 value: 6553255
				             },
				             {
				                 name: '抚顺市',
				                 value: 949131
				             },
				             {
				                 name: '本溪市',
				                 value: 8041430
				             },
				             {
				                 name: '丹东市',
				                 value: 5187582
				             },
				             {
				                 name: '锦州市',
				                 value: 3590347
				             },
				             {
				                 name: '营口市',
				                 value: 917092
				             },
				             {
				                 name: '阜新市',
				                 value: 632323
				             },
				             {
				                 name: '辽阳市',
				                 value: 9317568
				             },
				             {
				                 name: '盘锦市',
				                 value: 9919945
				             },
				             {
				                 name: '铁岭市',
				                 value: 1392313
				             },
				             {
				                 name: '朝阳市',
				                 value: 1595728
				             },
				             {
				                 name: '葫芦岛市',
				                 value: 12875255
				             }
				         ]
				     }],
				     visualMap: {
				         left: 'right',
				         min: 500000,
				         max: 38000000,
				         inRange: {
				             color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
				         },
				         text: ['High', 'Low'], // 文本，默认为数值文本
				         calculable: true
				     },
				     tooltip: {
				         trigger: 'item',
				         showDelay: 0,
				         transitionDuration: 0.2,
				         formatter: function(params) {
				             var value = (params.value + '').split('.');
				             value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
				             return params.seriesName + '<br/>' + params.name + ': ' + value;
				         }
				     },

				 };
				 myChart.setOption(option);
				 
			})
			
		});
	</script>
</head>
<body>
	
        <div class="map4" id="echartMap"></div>
<div class="back"></div>

</body>

weixin_38208652

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
使用echart的map绘制辽宁省地图

之前看echart的地图地图插件挺好，有中国地图也有美国地图，因为业务情况想做一个辽宁省的，以为很简单，写的时候才发现还是有点问题的，这里先放一下代码吧 <div class="map4" id="echartMap"></div>主要的问题还是那个date.json的获取，这里有一个网站http://datav.aliyun.com/tools/a...
复制链接

扫一扫