基于EChart的地图选择器

最新推荐文章于 2024-03-11 13:15:00 发布

王锴KKKKKKyle

最新推荐文章于 2024-03-11 13:15:00 发布

阅读量7.6k

点赞数

分类专栏： ECharts 文章标签： ECharts 地图选择器

本文链接：https://blog.csdn.net/kyle313606922/article/details/77876784

版权

ECharts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

图1 基于Echart的地图选择器

ECharts，缩写来自EnterpriseCharts，商业级数据图表，是百度的一个开源的纯JavaScript图表库，业界给予了很多赞誉，这里不多说，需要了解详情的同学参见官网。其最贴切的地方在于本地化支持，使用时只需引入一个echarts.js文件，非常方便。

本系统的授权模块中关于经销商的授权都涉及到ECharts插件制作的一个中国地图选择器，用于显示各地区经销商的数量，在选择点击不同地区后弹出模态框，可对对应地区的经销商进行相应授权。下面介绍地图构建的具体实现：

HTML：

<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="height:90%;margin: auto;" class="col-sm-10"></div>
	<span style="color:red;font-weight: bold;"  id="selectedProvince">安徽 </span>	

</body>

JavaScript：

	<script type="text/javascript">
		//echart
		// 路径配置
		require.config({
			paths : {
				echarts : 'http://echarts.baidu.com/build/dist'
			}
		});

		// 使用
		require([ 'echarts','echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
		], function(ec) {
			// 基于准备好的dom，初始化echarts图表
			var myChart = ec.init(document.getElementById('main'));
			var provinceCount = document.getElementsByName("provinceCount");
			//初始化
			var value = [
			{name:"新疆",value:0},{name:"重庆",value:0},{name:"山东",value:0},{name:"湖南",value:0},
			{name:"西藏",value:0},{name:"吉林",value:0},{name:"河南",value:0},{name:"广西",value:0},
			{name:"甘肃",value:0},{name:"辽宁",value:0},{name:"湖北",value:0},{name:"广东",value:0},
			{name:"青海",value:0},{name:"北京",value:0},{name:"安徽",value:0},{name:"福建",value:0},
			{name:"宁夏",value:0},{name:"天津",value:0},{name:"江苏",value:0},{name:"海南",value:0},
			{name:"四川",value:0},{name:"河北",value:0},{name:"上海",value:0},{name:"澳门",value:0},
			{name:"云南",value:0},{name:"山西",value:0},{name:"浙江",value:0},{name:"香港",value:0},
			{name:"陕西",value:0},{name:"贵州",value:0},{name:"江西",value:0},{name:"台湾",value:0},
			{name:"黑龙江",value:0},{name:"内蒙古",value:0},{name:"南海诸岛",value:0}
			];
			
			for ( var int = 0; int < provinceCount.length; int++) {
			var valueElement = {name:provinceCount[int].id,value:provinceCount[int].value};
				value=value.concat(valueElement);
			} 
			
			
			option = {
				tooltip : {
					trigger : 'item',
					formatter : '<span class="glyphicon glyphicon-map-marker" aria-hidden="true" style="color:red;font-size:18px;"></span> <span style="font-size:15px;">{b}</span><br><span style="color:#CAE1FF;">共有{c}家经销商</span>'
					
				},
				series : [ {
					name : '中国',
					type : 'map',
					mapType : 'china',
					selectedMode : 'single',  //图例选择模式  single单选 ；multiple多选
					itemStyle : {
					
						normal : {
							borderWidth:2,
							textStyle:{color:"#c71585"},//省份标签字体颜色
							label : {show : true} //显示省份
						},
						emphasis : {//选中的样式
						    borderWidth:1,
                    		borderColor:'white',
                   			color: '#4876FF',
							label : {
								show : true,
								textStyle: {
                           		   color: '#EBEBEB'
                      			}
							}
						}
					},
					data : value
				} ]
			};
			var ecConfig = require('echarts/config');
			myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {
				var selected = param.selected;				
				var province;
				var str = '';
				for ( p in selected) {
					if (selected[p]) {
						str += p + ' ';
						province=p;
					}
				}
				document.getElementById('selectedProvince').innerHTML = str;
				//判断选中与否，决定模态窗口是否关闭
				if (str == "") {
					$('#mapModal').modal('hide');
				} else {
					$('#mapModal').modal('show');
					
				}

				

			});
			// 为echarts对象加载数据
			myChart.setOption(option);
		});
		
	</script>

参考网站：http://echarts.baidu.com/

王锴KKKKKKyle

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于EChart的地图选择器

图1 基于Echart的地图选择器ECharts，缩写来自EnterpriseCharts，商业级数据图表，是百度的一个开源的纯JavaScript图表库，业界给予了很多赞誉，这里不多说，需要了解详情的同学参见官网。其最贴切的地方在于本地化支持，使用时只需引入一个echarts.js文件，非常方便。本系统的授权模块中关于经销商的授权都涉及到ECharts插件制作的一个中国地图选择
复制链接

扫一扫