数据可视化——人口地图

数据可视化——人口地图

数据可视化——人口地图_第1张图片

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 <div id="main"  style="width:800px;height:600px;border:1px solid black;margin:0 auto"></div>
 <textarea  id="txt" hidden>
1 广东 104303132
2 山东 95793065
3 河南 94023567
4 四川 80418200
5 江苏 78659903
6 河北 71854202
7 湖南 65683722
8 安徽 59500510
9 湖北 57237740
10 浙江 54426891
11 广西 46026629
12 云南 45966239
13 江西 44567475
14 辽宁 43746323
15 黑龙江 38312224
16 陕西 37327378
17 福建 36894216
18 山西 35712111
19 贵州 34746468
20 重庆 28846170
21 吉林 27462297
22 甘肃 25575254
23 内蒙古 24706321
24 台湾 23162123
25 上海 23019148
26 新疆 21813334
27 北京 19612368
28 天津 12938224
29 海南 8671518
30 香港 7097600
31 宁夏 6301350
32 青海 5626722
33 西藏 3002166
34 澳门 552300 
 </textarea>
  <script src="js/echarts.min.js"></script>
  <script src="js/china.js"></script>
  <script>
   var data = document.getElementById("txt").innerHTML.split("\n")//.split()字符切割方法,返回数组,\n换行为标准
	.map(function(item){
		var it = item.split(" ");
		return ({name:it[1],value:it[2]})
	});//.map()数组遍历的一种方法,返回值新数组,参数-回调函数
	console.log(data);
  
  //数据遍历的一种方法
  console.log(data);
  //echarts数据可视化
  var myChart=echarts.init(document.getElementById("main"));
  var option={
      title:{
	     text:"中国各省份人口数量统计",
		 subtext:"数据来源于百度"
		 x:"center"
	  },
	  series:{
	     name:"各省份人口数量",
		 type:"map",
		 map:"china",
		 label:{
		    show:true
		 },
		 data:data,
		 roam:true////地图鼠标效果,取值:拖拽move 放大缩小scale 两者都有true 不支持效果false
	  },
	  tooltip:{
	        formatter:"{b}省总人口数量:{c}人"
	  },
	  
		visualMap:{
			min:0,
			max:100000000,
			inRange:{
			    color:["#ffffff","#ff0000"]
			}
		}
  };
  myChart.setOption(option);
  </script>
 </body>
</html>

你可能感兴趣的:(数据可视化——人口地图)