数据可视化——人口地图
<!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")
.map(function(item){
var it = item.split(" ");
return ({name:it[1],value:it[2]})
});
console.log(data);
console.log(data);
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
},
tooltip:{
formatter:"{b}省总人口数量:{c}人"
},
visualMap:{
min:0,
max:100000000,
inRange:{
color:["#ffffff","#ff0000"]
}
}
};
myChart.setOption(option);
</script>
</body>
</html>