Echars 地图展示

最新推荐文章于 2024-05-28 11:11:34 发布

苏格拉低

最新推荐文章于 2024-05-28 11:11:34 发布

阅读量2.3k

点赞数

分类专栏：前台文章标签： js map

本文链接：https://blog.csdn.net/u010310183/article/details/37931315

版权

前台专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一个地图的小例子：

1、创建文件夹导入 echarts.js、echarts-map.js、esl.js 这三个 js 包

2、创建 jsp 以下是代码注视在代码上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!--Step:1 Import a module loader, such as esl.js or require.js-->
    <!--Step:1 引入一个模块加载器，如esl.js或者require.js-->
    <script src="js/esl.js"></script>
</head>

<body>
    <!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="mainMap" style="width:1100px;height:790px;border:1px solid #ccc;padding:10px;"></div>
    <script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths:{ 
            echarts:'./js/echarts',
            'echarts/chart/bar' : './js/echarts-map',
            'echarts/chart/line': './js/echarts-map',
            'echarts/chart/map' : './js/echarts-map'
        }
    });
    
    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function(ec) {
            // --- 地图 ---
			var ecConfig = require('echarts/config');
			var zrEvent = require('zrender/tool/event');
			var data = [                                 // 这里的 data 是显示的 地图   data是个数组
							{name: '北京',id:'100',value: Math.round(Math.random()*1000),tooltip:{trigger: 'item',formatter:'<div style="float:left;"><img width="70" height="70" src="../../../../../travel_website/images/travel_02.jpg" ></div><div style="float:left;margin-left:5px;color:#666;font-size:12px;font-weight:bold;">景点：故宫、颐和园<br/>美食：烤鸭<br/>特产：北京果脯<br/>艺术：京剧</div>',backgroundColor:'rgba(255,255,255,0.7)'}}
						];
			option = {   //在option 中  定义 这个 地图 所 需要的  属性
				tooltip : {
					trigger: 'item'
				},
				dataRange: {
					min: 0,
					max: 2500,
					text:['高','低'],           // 文本，默认为数值文本
					calculable : true,
					color:['#b1dbcb','#67be8d']
				},
				series : [   //series 也是一个 数组    具体功能看 文档API  
					{
						name: 'iphone3',
						type: 'map',
						mapType: 'china',
						itemStyle:{
							normal:{label:{show:true}},
							emphasis:{label:{show:true}}
						},
						data:data
					},
					{
						name: '随机数据',
						type: 'map',
						mapType: 'china',
						selectedMode : 'single',
						itemStyle:{
							normal:{label:{show:true}},
							emphasis:{label:{show:true}}
						},
						data:[   //这里的data 又是一个数组
							{name: 'china',value: Math.round(Math.random()*1000),tooltip:{trigger: 'item',formatter:''}}
						]
					}
				]

			};


			var myChart = ec.init(document.getElementById('mainMap'));// 加载 这个 地图

			myChart.setOption(option);  //将 option 属性  set 到 地图里

<span style="white-space:pre">			</span>//一下是  获取 地图属性  的 方式
			var myprovince;
			var myprovince_id;
			myChart.on(ecConfig.EVENT.MAP_SELECTED,function(param){    // 这里的 MAP_SELECTED 是一个事件   可能是 地图选中事件

				var selected = param.selected;  //这里是  将选中的时间 赋值给 selected  属性
				var selectedProvince;
				var name;
				alert(option.series[0].data.length);
				for (var i = 0, l = option.series[0].data.length; i < l; i++) {
					
					name = option.series[0].data[i].name;
					
					id = option.series[0].data[i].id;
					option.series[0].data[i].selected = selected[name];  //将选中的名字 赋值 给  data中的  属性

					if (selected[name]) {  
						selectedProvince = name;    //还是  赋值
						myprovince = name;
						myprovince_id = id;
					}


				}


				if(typeof(selectedProvince)=='undefined')
				{
					selectedProvince = myprovince;
				}


				alert(myprovince_id);
				alert(selectedProvince);
				//window.open("map2_test03.html",'province_page');  // 用这种方式进行跳转
			});
        }
    );
    </script>
</body>
</html>