我的联系方式
微博一米阳光_Grace
邮箱xirizhifeng@163.com
MYBLOG
欢迎来到小莫的博客~
欢迎来到小莫的博客~
2019/09/20技术文章
准备工作
1、下载echart.js文件，下载链接
2、下载china.js,下载链接
3、城市经纬度查询可使用百度的，查询地址
引入js文件
<!--官网下载的最新版本-->
<script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
<!--中国地图，准备工作中的2-->
<script src="china.js" type="text/javascript" charset="utf-8"></script>
html展示
<!-- 可以自定义设置宽高，以及背景图 -->
<div id="main" style="width: 1000px;height:500px;"></div>
加载数据的js代码
<script type="text/javascript">
// 获取echarts的容器
var chart = echarts.init(document.getElementById("main"));
/*
图中相关城市经纬度,根据你的需求添加数据
*/
var geoCoordMap = {
'南宁': [108.479, 23.1152],
'重庆': [107.7539, 30.1904],
'无锡': [120.382418,31.488181],
'郑州': [113.672984,34.758283],
'南京': [118.803714,32.093502],
'上海': [121.46396,31.255155],
'哈尔滨': [126.686197,45.727827],
'安阳': [114.348939,36.107014],
'成都': [104.092044,30.688525],
'广州': [113.264437,23.154981],
'新疆': [87.61889,43.770985],
'三亚': [109.510075,18.254588]
};
/*
记录下起点城市和终点城市的名称，以及权重
数组第一位为终点城市，数组第二位为起点城市，以及该城市的权重，就是图上圆圈的大小
*/
// 无锡
var CQData = [
[{name: '无锡'}, {name: "三亚",value: 30}],
[{name: '无锡'}, {name: "新疆",value: 90}],
[{name: '无锡'}, {name: "广州",value: 30}],
[{name: '无锡'}, {name: "安阳",value: 30}]
];
// 上海
var GZData = [
[{name: '上海'}, {name: "广州",value: 30}],
[{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 planePath='image://dian.png';
// 获取地图中起点和终点的坐标，以数组形式保存下来
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 = []; // 用来存储地图数据
[['无锡', 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: [120.382418,31.488181],
label: {
normal: {
position: 'top'
}
}
}, {
name: '上海',
value: [121.46396,31.255155],
label: {
normal: {
position: 'right'
}
}
}, {
name: '南京',
value: [118.803714,32.093502]
}]
});
// 最后初始化地图中的相关数据
chart.setOption({
title: {
text: 'demo',
textStyle: {
color: '#fff',
fontSize: 40
},
top: '10px',
left: '10px'
},
geo: {
map: 'china', // 与引用进来的地图js名字一致
roam: false, // 禁止缩放平移
itemStyle: { // 每个区域的样式
normal: {
areaColor: '#323c48'
},
emphasis: {
areaColor: '#2a333d'
}
},
regions: [{ // 选中的区域
name: 'China',
selected: true,
itemStyle: { // 高亮时候的样式
emphasis: {
areaColor: '#7d7d7d'
}
},
label: { // 高亮的时候不显示标签
emphasis: {
show: false
}
}
}]
},
series: series, // 将之前处理的数据放到这里
textStyle: {
fontSize: 12
}
});
</script>
以上就完成了，效果图如下：
