使用echarts加载地图

最新推荐文章于 2024-07-30 17:42:10 发布
最新推荐文章于 2024-07-30 17:42:10 发布
阅读量6.9k 收藏 6
点赞数 2
分类专栏： 前端框架 文章标签： echarts 地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40393093/article/details/83056742
版权
本文介绍了如何使用echarts 2.2.7版本来加载中国地图，强调了高版本中可能缺失的地图实例，并推荐了模块化单文件引入的方式。在实际应用中，开发者需要根据API进行个性化配置。
摘要由CSDN通过智能技术生成

echarts这样的插件很好用，在这直奔重点，以下为注意事项：
1.echarts高版本的是没有中国地图的实例的，使用echarts做低版本的中国地图，需要引入低版本的echarts，这里用的版本是是echarts-2.2.7。
2.引入echarts的方法有三种，模块化包引入，模块化单文件引入（推荐），标签式单文件引入在实例中的代码，引入的方法一般为第二种(不同的引入方式会导致报错)，具体http://echarts.baidu.com/echarts2/doc/doc.html#引入ECharts2。
3.echarts中的demo只是简单例子，平常我们使用时要对照的官网上的api根据自己的需求去调试js。
以下是一个中国地图的例子，效果图如下：

//设置一个DOM
<table>
	<tr>
		<td width="50%">
			<div id="china-map" style="width: 100%; height: 350px;"></div>
		</td>
		<td width="50%">
			<div id="rmap" style="width: 100%; height: 350px;"></div>
		</td>
	</tr>
</table>

然后引入js，写js代码

<script language="JavaScript" src="<%=request.getContextPath()%>/Script/component/echarts-2.2.7/build/dist/echarts.js"></script>
<script>
$(document).ready(function(){
	echartsChina();
	echartsrmap();
});

require.config({
    paths: {
        echarts: '<%=request.getContextPath()%>/Script/component/echarts-2.2.7/build/dist'
    }
});
//初始化加载的右边图形的函数
function echartsrmap(){
	 require(
          [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar',
            'echarts/chart/scatter',
            'echarts/chart/k',
            'echarts/chart/pie',
            'echarts/chart/radar',
            'echarts/chart/force',
            'echarts/chart/chord',
            'echarts/chart/gauge',
            'echarts/chart/funnel',
            'echarts/chart/eventRiver',
            'echarts/chart/venn',
            'echarts/chart/treemap',
            'echarts/chart/tree',
            'echarts/chart/wordCloud',
            'echarts/chart/heatmap',
            'echarts/chart/map'
          ],
          function (ec) {
             var myChart = ec.init(document.getElementById('rmap'));
				var option = {
				title : {
					text: '',
					subtext: '',
					x:'center'
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				toolbox: {
					feature: {
						saveAsImage: {},
						restore: {},
						dataView: {}
					}
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					data: ['北京','天津','上海','重庆','河北', '河南','云南','辽宁','黑龙江','湖南','安徽','山东','新疆','江苏','浙江', '江西', '湖北', '广西', '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', 
			'贵州', '广东', '青海', '西藏', '四川', '宁夏', '海南', '台湾', '香港', '澳门']
				},
				series : [
					{
						name: '所占比例',
						type: 'pie',
						radius : '55%',
						center: ['50%', '60%'],
						data:[
						   {name: '北京',value: Math.round(Math.random()*2000)},
								{name: '天津',value: Math.round(Math.random()*2000)},
								{name: '上海',value: Math.round(Math.random()*2000)},
								{name: '重庆',value: Math.round(Math.random()*2000)},
								{name: '河北',value: 0},
								{name: '河南',value: Math.round(Math.random()*2000)},
								{name: '云南',value: 5},
								{name: '辽宁',value: 305},
								{name: '黑龙江',value: Math.round(Math.random()*2000)},
								{name: '湖南',value: 200},
								{name: '安徽',value: Math.round(Math.random()*2000)},
								{name: '山东',value: Math.round(Math.random()*2000)},
								{name: '新疆',value: Math.round(Math.random()*2000)},
								{name: '江苏',value: Math.round(Math.random()*2000)},
								{name: '浙江',value: Math.round(Math.random()*2000)},
								{name: '江西',value: Math.round(Math.random()*2000)},
								{name: '湖北',value: Math.round(Math.random()*2000)},
								{name: '广西',value: Math.round(Math.random()*2000)},
								{name: '甘肃',value: Math.round(Math.random()*2000)},
								{name: '山西',value: Math.round(Math.random()*2000)},
								{name: '内蒙古',value: Math.round(Math.random()*2000)},
								{name: '陕西',value: Math.round(Math.random()*2000)},
								{name: '吉林',value: Math.round(Math.random()*2000)},
								{name: '福建',value: Math.round(Math.random()*2000)},
								{name: '贵州',value: Math.round(Math.random()*2000)},
								{name: '广东',value: Math.round(Math.random()*2000)},
								{name: '青海',value: Math.round(Math.random()*2000)},
								{name: '西藏',value: Math.round(Math.random()*2000)},
								{name: '四川',value: Math.round(Math.random()*2000)},
								{name: '宁夏',value: Math.round(Math.random()*2000)},
								{name: '海南',value: Math.round(Math.random()*2000)},
								{name: '台湾',value: Math.round(Math.random()*2000)},
								{name: '香港',value: Math.round(Math.random()*2000)},
								{name: '澳门',value: Math.round(Math.random()*2000)}
						],
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			myChart.setOption(option);
          }
      );
	
	
}

//根据左边地图选择省份传入数据显示右边的饼图
function echartsrmapt(data1,data2){
	 require(
          [
            'echarts',
            'echarts/chart/line',
            'echarts/chart/bar',
            'echarts/chart/scatter',
            'echarts/chart/k',
            'echarts/chart/pie',
            'echarts/chart/radar',
            'echarts/chart/force',
            'echarts/chart/chord',
            'echarts/chart/gauge',
            'echarts/chart/funnel',
            'echarts/chart/eventRiver',
            'echarts/chart/venn',
            'echarts/chart/treemap',
            'echarts/chart/tree',
            'echarts/chart/wordCloud',
            'echarts/chart/heatmap',
            'echarts/chart/map'
          ],
          function (ec) {
             var myChart = ec.init(document.getElementById('rmap'));
				var option = {
				title : {
					text: '',
					subtext: '',
					x:'center'
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				toolbox: {
					feature: {
						saveAsImage: {},
						restore: {},
						dataView: {}
					}
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					data: data1
				},
				series : [
					{
						name: '所占比例',
						type: 'pie',
						radius : '55%',
						center: ['50%', '60%'],
						data:data2,
						itemStyle: {
							emphasis: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};
			myChart.setOption(option);
          }
      );

}

//加载中国地图
function echartsChina(){
	 require(
        [
            'echarts',
            'echarts/chart/wordCloud', 
            'echarts/chart/map'// 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('china-map'));
            var ecConfig = require('echarts/config');
        	var zrEvent = require('zrender/tool/event');
        	//var myChart = echarts.init(document.getElementById('china-map'));
        	var curIndx = 0;
        	var mapType = [
        	    'china',
        	    // 23个省
        	    '广东', '青海', '四川', '海南', '陕西', 
        	    '甘肃', '云南', '湖南', '湖北', '黑龙江',
        	    '贵州', '山东', '江西', '河南', '河北',
        	    '山西', '安徽', '福建', '浙江', '江苏', 
        	    '吉林', '辽宁', '台湾',
        	    // 5个自治区
        	    '新疆', '广西', '宁夏', '内蒙古', '西藏', 
        	    // 4个直辖市
        	    '北京', '天津', '上海', '重庆',
        	    // 2个特别行政区
        	    '香港', '澳门'
        	];
        	document.getElementById('china-map').onmousewheel = function (e){
        		return false;   //这个方法我取消了滑动切换地图
        	    var event = e || window.event;
        	    curIndx += zrEvent.getDelta(event) > 0 ? (-1) : 1;
        	    if (curIndx < 0) {
        	        curIndx = mapType.length - 1;
        	    }
        	    var mt = mapType[curIndx % mapType.length];
        	    if (mt == 'china') {
        	        option.tooltip.formatter = '滑动鼠标或点击进入该省<br/>{b}';
        	    }
        	    else{
        	        option.tooltip.formatter = '滑动鼠标或点击返回全国<br/>{b}';
        	    }
        	    option.series[0].mapType = mt;
        	    option.title.subtext = mt + ' （滑动鼠标或点击切换）';
        	    myChart.setOption(option, true);
        	    
        	    zrEvent.stop(event);
        	};
			//下面这个是选择省份触发的事件
        	myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param){
				alert("选择省份触发的事件");
        		var len = mapType.length;
        	    var mt = mapType[curIndx % len];
        	    if (mt == 'china') {
        	        // 全国选择时指定到选中的省份
        	        var selected = param.selected;
        	        /* var mapSeries = option.series[0];
           		    var data = [];
           		    var legendData = [];
           		    var name;
					var datat =[];
           		    for (var p = 0, len = mapSeries.data.length; p < len; p++) {
           		        name = mapSeries.data[p].name;
           		        //mapSeries.data[p].selected = selected[name];
           		        parentid =
最低0.47元/天 解锁文章
吴举人
关注
专栏目录
echarts3加载地图
08-16
使用echarts3引入地图所需文件（未包含区县文件）
ECharts加载单独省份地图
11-14
这个方法可以加载单个省份地图。ECharts官方不再提供矢量地图数据，详见 http://echarts.baidu.com/download-map.html。使用方法：运行nginx.exe，访问 http://localhost:9005/index.html 即可
ECharts中国地图，广东省地图，广东省各市地图
06-06
ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。在官网无法下载了，找了很久找到这个。
echarts加载区域地图，并标注点
最新发布
super--man的博客
07-30 927
如果要把多个省放在一起展示，则把多个JSON文件里的features数据合并即可。第二步不打勾，只显示省的名字，如果打勾的话，会显示省下所有市的名字，看个人需求。加载了南海区域的地图，并标注几个气象站点；2、使用Echarts展示地图。
echarts地图贴图
weixin_43111926的博客
09-14 2649
echarts地图贴图
Echarts地图加载及使用
shaoleijay的专栏
05-26 1433
echarts加载地图显示多组数据并实现点击、悬浮事件 1、引入echarts.min.js文件，引入地图map中需要加载的地图js： <script src="js/libs/echarts-4.7.0/dist/echarts.min.js" type="application/javascript"></script> <script src="js/libs/echarts-4.7.0/map/js/province/anhui.js" type="applica
Echarts加载2D地图(图文)
weixin_42533732的博客
09-16 1169
echarts实战、echarts2d地图、行政区域、街道地图渲染、地图贴图
echarts5.3.2版本加载中国地图
weixin_48058348的博客
06-30 1089
echarts5.3.2版本加载中国地图
Echarts加载地图的三种方式
wml00000的博客
11-27 9542
参考地址：http://www.echartsjs.com/option.html#geo.map ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。 下面是两种类型的使用示例： JavaScript 引入示例： &lt;script src...
echarts中使用天地图的插件示例
01-01
echarts中使用天地图的插件示例，使用echarts中百度地图的插件改写，让其支持天地图的展示展示及使用。，使用echarts中高端地图的插件改写，让其支持天地图的展示及使用。 1.echarts-extension-tmap.js 在高度地图...
echarts中地图JSON数据
04-25
ECharts支持各种自定义地图，包括中国各省份、城市，甚至世界地图，用户可以根据需要加载相应的JSON数据进行展示。本文将深入探讨ECharts中的地图JSON数据，以及如何在大屏展示中有效利用这些数据。 首先，我们要...
高德地图使用echarts文档
05-25
总的来说，要在高德地图上使用ECharts，你需要理解两者的基本用法，然后借助`echarts-extension-amap`插件将它们关联起来。这样，你就可以在地图上创建各种丰富的数据可视化效果，例如迁徙图、热力图等，从而提升...
Echarts 引入地图
让你一生残梦的博客
01-12 647
echarts：中国地图
前端笔记-echarts加载geo地图
IT1995的博客
03-16 6027
效果如下所示： 源码如下： <html> <head> <title>中国地图散点图</title> <script src = "echarts.js" ></script> <script src = "china.js"></script> </head> <b...
Echarts3实例 加载地图
idomyway的博客
12-18 4151
前言 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Echarts加载GeoJson数据生成canvas地图，可以实现地图简单的展示，获取GeoJson数据的方法见： &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;Echarts生成地图的数据加载方式有两种： 加载GeoJson的js文件 加GeoJson的Json文件 加载GeoJson的js文件显示地图
echarts加载某省地图
feng4175的博客
01-03 595
其他配置就是，在opt里面设置了。我这里需要每个市区中心添加标点，但是有些标点的位置在区域边缘，加载出来之后就会覆盖到其他边缘，这里我没可以通过修改地图JSON文件中的features属性下的properties里的cp数组，里面的数值就是经纬度了，可根据需要调整。最近做了一个主页加载指定省份的页面，页面上要求显示地图，地图上市区域hover显示tooltip，tooltip展示具体数据。首先引入echarts文件就不说了，直接加载。1、需要准备好地图的json文件；原本是在红框的位置，现在调整到中间啦。
echarts 区域地图加载
fk129
09-21 1010
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;&lt;/title&a
如何使用echarts加载天地图
03-25
你可以使用以下代码来使用echarts加载天地图： ```html <html> <head> <meta charset="utf-8"> <title>使用echarts加载天地图</title> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script> <style> #main { width: 100%; height: 600px; } </style> </head> <body> <div id="main"></div> <script> var myChart = echarts.init(document.getElementById('main')); // 使用天地图作为底图 var tdtLayer = new ol.layer.Tile({ preload: Infinity, source: new ol.source.XYZ({ url: 'http://t0.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=您的密钥' }) }); var baseMapLayer = new ol.layer.Group({ layers: [tdtLayer] }); var map = new ol.Map({ target: 'main', layers: [baseMapLayer], view: new ol.View({ projection: 'EPSG:4326', center: [104.07, 30.67], zoom: 12 }) }); echarts.util.mapData.params.params['成都'] = { getGeoJson: function (callback) { $.getJSON('../geoJson/chengdu.json', callback); } }; var convertedData = []; //向地图添加人口密度 $.get('../data/population.json', function (data) { echarts.registerMap('成都', data); data.features.forEach(function (feature) { convertedData.push({ name: feature.properties.name, value: Math.random() * 10000 }); }); myChart.setOption(option = { tooltip: { trigger: 'item' }, visualMap: { min: 0, max: 10000, left: 'left', top: 'bottom', text: ['High', 'Low'], seriesIndex: [1], inRange: { color: ['#e0ffff', '#006edd'] }, calculable: true }, geo: { map: '成都', roam: true, label: { normal: { show: true, textStyle: { color: 'rgba(0,0,0,0.4)' } } }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 0.2)' } } }, series: [ { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertedData.sort(function (a, b) { return b.value - a.value; }).slice(0, 5), symbolSize: function (val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: 'purple', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 }, { name: 'Area Name', type: 'map', geoIndex: 0, data: convertedData } ] }); }); </script> </body> </html> ``` 其中，需要把`您的密钥`替换成您的天地图和百度地图的密钥。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值