<!--
1、创建HTML页面基本结构
2、创建展示图形容器
3、引入echarts依赖包
4、初始化echarts对象
5、设置参数
-->
<html>
<head>
<title>北上广深人群迁徙图</title>
<meta charset="utf-8" />
<script src="echarts.min.js"></script>
<script src="china.js"></script>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
<div id="main" style="width:100%;height:100%;"></div>
<script>
var myEcharts = echarts.init(document.getElementById("main"));
var option = {
backgroundColor: '#f0ffff',
title : {
text: '北上广深人群迁徙图',
left: 'center',
},
tooltip : {
trigger: 'item',
formatter:function(params){
return "城市："+params.name+" "+(params.value)[2]+"%";
}
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['北京', '上海', '广州','深圳'],
textStyle: {
color: '#f0fff'
},
},
geo: {
map: 'china',
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
}
};
var geoCoordMap = null;
$.ajax({
url:"dtData.json",
async:false,
dataType:"json",
success:function(data){
geoCoordMap = data;
console.log(geoCoordMap);
}
});
var myData = null;
$.ajax({
url:"PopulationData.json",
async:false,
dataType:"json",
success:function(data){
myData = [
["北京",data.BJData],
["上海",data.SHData],
["广州",data.GZData],
["深圳",data.SZData]
];
}
});
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
function getData(data){
var citydata = [];
data.forEach(function(item,i){
var myname = item[1].name;
var myvalue = item[1].value;
var mycoord = geoCoordMap[myname];
mycoord.push(myvalue);
citydata.push({
'name':myname,
'value':mycoord
}
);
});
return citydata;
}
var color = ['yellow','#46bee9','#a6c84c','#ffa022'];
var series = [];
$.each(myData,function(i,item){
series.push(
{
name: item[0],
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0],
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: 'emptyCircle',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0],
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2]*3;
},
itemStyle: {
normal: {
color: color[i]
}
},
data: getData(item[1])
}
);
});
option.series = series;
myEcharts.setOption(option);
</script>
</body>
</html>
