Echarts世界流动图
/*
创新互联公司成立于2013年，先为宁安等服务建站，宁安等地企业，进行企业商务咨询服务。为宁安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
图中相关城市经纬度,根据需求添加数据
关于国家的经纬度，可以用首都的经纬度或者其他城市的经纬度
*/
var geoCoordMap = {
'南宁': [108.479, 23.1152],
'广州': [113.5107, 23.2196],
'重庆': [107.7539, 30.1904],
'芬兰': [24.909912, 60.169095],
'美国': [-100.696295, 33.679979],
'日本': [139.710164, 35.706962],
'韩国': [126.979208, 37.53875],
'瑞士': [7.445147, 46.956241],
'东南亚': [117.53244, 5.300343],
'澳大利亚': [135.193845, -25.304039],
'德国': [13.402393, 52.518569],
'英国': [-0.126608, 51.208425],
'加拿大': [-102.646409, 59.994255]
};
/*
记录下起点城市和终点城市的名称，以及权重
数组第一位为终点城市，数组第二位为起点城市，以及该城市的权重，就是图上圆圈的大小
*/
// 重庆
var CQData = [
[{name: '芬兰'}, {name: "重庆",value: 30}],
[{name: '德国'}, {name: "重庆",value: 30}],
[{name: '英国'}, {name: "重庆",value: 30}],
[{name: '重庆'}, {name: "英国",value: 30}]
];
// 广州
var GZData = [
[{name: '日本'}, {name: "广州",value: 30}],
[{name: '东南亚'}, {name: "广州",value: 30}]
];
// 南宁
var NNData = [
[{name: '南宁'}, {name: "加拿大",value: 30}],
[{name: '南宁'}, {name: "美国",value: 100}],
[{name: '南宁'}, {name: "澳大利亚",value: 95}],
[{name: '南宁'}, {name: "瑞士",value: 30}]
];
// 小飞机的图标，可以用其他图形替换
var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
// 获取地图中起点和终点的坐标，以数组形式保存下来
var convertData = function(data) {
var res = [];
for(var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[1].name];
var toCoord = geoCoordMap[dataItem[0].name];
if(fromCoord && toCoord) {
res.push([{
coord: fromCoord // 起点坐标
}, {
coord: toCoord // 终点坐标
}])
}
}
return res;
}
var color = ['#9ae5fc', '#dcbf71']; // 自定义图中要用到的颜色
var series = []; // 用来存储地图数据
/*
图中一共用到三种效果，分别为航线特效图、飞机航线图以及城市图标涟漪图。
要用到setOption中的series属性，并且对每个城市都要进行三次设置。
*/
[['重庆', CQData],['广州', GZData],['南宁', NNData]].forEach(function(item, i) {
series.push({
// 白色航线特效图
type: 'lines',
zlevel: 1, // 用于分层，z-index的效果
effect: {
show: true, // 动效是否显示
period: 6, // 特效动画时间
trailLength: 0.7, // 特效尾迹的长度
color: '#fff', // 特效颜色
symbolSize: 3 // 特效大小
},
lineStyle: {
normal: { // 正常情况下的线条样式
color: color[0],
width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
curveness: -0.2 // 线条曲度
}
},
data: convertData(item[1]) // 特效的起始、终点位置
}, { // 小飞机航线效果
type: 'lines',
zlevel: 2,
//symbol: ['none', 'arrow'], // 用于设置箭头
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath, // 特效形状，可以用其他svg pathdata路径代替
symbolSize: 15
},
lineStyle: {
normal: {
color: color[0],
width: 1,
opacity: 0.6,
curveness: -0.2
}
},
data: convertData(item[1]) // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
}, { // 散点效果
type: 'effectScatter',
coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
zlevel: 3,
rippleEffect: {
brushType: 'stroke' // 波纹绘制效果
},
label: {
normal: { // 默认的文本标签显示样式
show: true,
position: 'left', // 标签显示的位置
formatter: '{b}' // 标签内容格式器
}
},
itemStyle: {
normal: {
color: color[0]
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name], // 起点的位置
symbolSize: dataItem[1].value / 8, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
};
})
});
});
// 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
series.push({
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'left',
formatter: '{b}'
}
},
symbolSize: function(val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[1]
}
},
data: [{
// 这里面的数据，由于一开始就知道终点位置是什么，所以直接写死，如果通过ajax来获取数据的话，还要进行相应的处理
name: "重庆",
value: [107.7539, 30.1904, 30],
label: {
normal: {
position: 'top'
}
}
}, {
name: '广州',
value: [113.5107, 23.2196, 30],
label: {
normal: {
position: 'right'
}
}
}, {
name: '南宁',
value: [108.479, 23.1152, 30]
}]
});
// 最后初始化世界地图中的相关数据
var option= ({
backgroundColor: '#404a59',
title: {
show:'false'
},
geo: {
map: 'world', // 与引用进来的地图js名字一致
roam: false, // 禁止缩放平移
itemStyle: { // 每个区域的样式
normal: {
areaColor: '#ff8800'
},
emphasis: {
areaColor: 'red'
}
},
regions: [{ // 选中的区域
name: 'China',
selected: true,
itemStyle: { // 高亮时候的样式
emphasis: {
areaColor: '#7d7d7d'
}
},
label: { // 高亮的时候不显示标签
function(){ //一手 http://www.fx61.com/faq/muniu/426.html
emphasis: {
show: false
}
}
}]
},
series: series, // 将之前处理的数据放到这里
textStyle: {
fontSize: 12
}
});
/* 然后就没有然后了，全剧终！ */
当前文章：Echarts世界流动图
分享地址：http://myzitong.com/article/jscjdc.html