Echarts 地图图表使用

Echarts 地图图表使用

 

1.先要知道这个图表需要提供的数据结构是怎么样的。

数据格式：数组套集合：

[
      {name: '北京',value: 1},
      {name: '天津',value: 2}
]

城市：城市名称必须和图表上的一致否则无法匹配

 

2.在java后台构建数据

前台解析数据的是在var option = []中添加数据，所以如果后台直接以数组套集合的形式返还到前台赋值是不行的，需要我们将后台的数据装载到一个对应的数组套集合的变量里才行。为了前台js解析简单，就直接用数组套数组的方式最为简单(我的感觉)：

Data：[["上海","1"],["云南","1"]]

前台解析：

var array = new Array();
for(var i=0;i<dataContent.length;i++){
var data_child = dataContent[i];
array.push({name:data_child[0],value:data_child[1]});
}

 

3.在页面中添加插件

a.添加jquery和相关js

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="plug/echarts-2.0.4/doc/example/www/js/esl.js"></script>

b.编辑js

$(function(){
	requestChart_map();
});

function requestChart_map(){
	$.ajax({
		type: "post",
		url: "XXXXX.do",
		dataType: "json",
		success: function(dataContent){
	
			var array = new Array();
			for(var i=0;i<dataContent.length;i++){
				var data_child = dataContent[i];
				array.push({name:data_child[0],value:data_child[1]});
			}
			
			require.config({
				paths:{ 
					 echarts:'plug/echarts-2.0.4/doc/example/www/js/echarts',  
					'echarts/chart/map':'plug/echarts-2.0.4/doc/example/www/js/echarts-map'  
				}
			});
			require(
					[
					   'echarts',  
						'echarts/chart/map'  
					],
					function (ec) {
						var myChart = ec.init(main);
						var option = {
							title : {
								text: "用户分布",
								subtext: '用户登陆的区域分布统计',
								x:'center'
							},
							tooltip : {
								trigger: 'item'
							},
							dataRange: {
								min: 0,
								max: 25,
								x: 'left',
								y: 'bottom',
								text:['人次',''],           // 文本，默认为数值文本
								calculable : true
							},
							toolbox: {
								show: true,
								orient : 'vertical',
								x: 'right',
								y: 'center',
								feature : {
									mark : {show: true},
									dataView : {show: true, readOnly: false},
									restore : {show: true},
									saveAsImage : {show: true}
								}
							},
							series : [
								{
									name: '登录人次',
									type: 'map',
									mapType: 'china',
									roam: false,
									itemStyle:{
										normal:{label:{show:true}},
										emphasis:{label:{show:true}}
									},
									data:array
								}
							]
						};					
						myChart.setOption(option);
					}
				);
		 },error: function(dataContent){
			alert("发生了错误");
		 }
	});	
}