数据可视化——人口地图

最新推荐文章于 2024-04-10 12:26:42 发布

zcm645500

最新推荐文章于 2024-04-10 12:26:42 发布

阅读量2.6k

点赞数 2

本文链接：https://blog.csdn.net/qq_46028841/article/details/105086031

版权

数据可视化——人口地图

在这里插入图片描述

<!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>

zcm645500

关注

2
点赞
踩
26

收藏

觉得还不错? 一键收藏
6
评论
数据可视化——人口地图

数据可视化——人口地图<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> &lt...
复制链接

扫一扫