效果图
源码（所需js文件可在资源中下载：《echarts地图所需文件》）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 引入组件库 -->
<script src="..\script\echarts.min.js"></script>
<script src="..\script\jquery-1.11.0.min.js"></script>
<script src="..\script\china.js"></script>
<title></title>
</head>
<body>
<div style="width: 100%;height:900px;background: radial-gradient(#2e5290,#061125);">
<div id="chartMap" style="width: 100%; height: 100%; "></div>
</div>
</body>
</html>
<script>
$(function () {
var getMap = echarts.init($('#chartMap')[0]);
var geoCoordMap = {
'北京市': [116.39737, 39.939502, '北京'],
'天津市': [117.133262, 39.256321, '天津市'],
'上海市': [121.36464, 31.303465, '上海市'],
'重庆市': [106.32485, 29.895013, '重庆市'],
'河北省': [114.336873, 38.21885, '石家庄市'],
'山西省': [112.349964, 38.044464, '太原市'],
'辽宁省': [123.241164, 41.948112, '沈阳市'],
'吉林省': [125.228072, 43.894927, '长春市'],
'黑龙江省': [126.479088, 45.985284, '哈尔滨市'],
'江苏省': [118.715429, 32.246466, '南京市'],
'浙江省': [120.040035, 30.350837, '杭州市'],
'安徽省': [117.170056, 31.99595, '合肥市'],
'福建省': [119.156964, 26.182279, '福州市'],
'江西省': [115.808656, 28.774611, '南昌市'],
'山东省': [116.912494, 36.812038, '济南市'],
'河南省': [113.453802, 34.895028, '郑州市'],
'湖北省': [114.116105, 30.764814, '武汉市'],
'湖南省': [112.800698, 28.474291, '长沙市'],
'广东省': [113.233035, 23.224606, '广州市'],
'海南省': [110.179083, 19.921006, '海口市'],
'四川省': [103.924003, 30.796585, '成都市'],
'贵州省': [106.499624, 26.844365, '贵阳市'],
'云南省': [102.599397, 25.248948, '昆明市'],
'陕西省': [108.780889, 34.408508, '西安市'],
'甘肃省': [103.66644, 36.218003, '兰州市'],
'青海省': [101.605943, 36.752842, '西宁市'],
'西藏自治区': [90.972306, 29.838888, '拉萨市'],
'广西壮族自治区': [108.265765, 23.020403, '南宁市'],
'内蒙古自治区': [111.614073, 40.951504, '呼和浩特市'],
'宁夏回族自治区': [106.094884, 38.624116, '银川市'],
'新疆维吾尔自治区': [87.476819, 43.894927, '乌鲁木齐市'],
'香港': [114.1529, 22.542716, '香港'],
'澳门': [113.417008, 22.337477, '澳门'],
'台湾省': [121.36464, 25.248948, '台北市']
};
var list = [
[{ name: '上海市' }, { name: '安徽省', value: 90 }],
[{ name: '上海市' }, { name: '广东省', value: 90 }],
[{ name: '上海市' }, { name: '河北省', value: 90 }],
[{ name: '上海市' }, { name: '湖南省', value: 90 }],
[{ name: '上海市' }, { name: '重庆市', value: 90 }],
[{ name: '上海市' }, { name: '上海市', value: 90 }],
[{ name: '上海市' }, { name: '青海省', value: 90 }],
[{ name: '上海市' }, { name: '内蒙古自治区', value: 90 }],
[{ name: '上海市' }, { name: '新疆维吾尔自治区', value: 90 }],
[{ name: '上海市' }, { name: '河南省', value: 90 }],
[{ name: '上海市' }, { name: '黑龙江省', value: 90 }],
[{ name: '上海市' }, { name: '西藏自治区', value: 90 }],
[{ name: '上海市' }, { name: '广西壮族自治区', value: 90 }],
[{ name: '上海市' }, { name: '辽宁省', value: 90 }],
[{ name: '上海市' }, { name: '云南省', value: 90 }],
[{ name: '上海市' }, { name: '海南省', value: 90 }]
];
// 获取地图中起点和终点的坐标，以数组形式保存下来
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: toCoord // 终点坐标
}, {
coord: fromCoord // 起点坐标
}])
}
}
return res;
}
var color = ['#9ae5fc', '#dcbf71']; // 自定义图中要用到的颜色
var series = [];
/*
图中一共用到三种效果，分别为航线特效图、飞机航线图以及城市图标涟漪图。
要用到setOption中的series属性，并且对每个城市都要进行三次设置。
*/
[['上海市', list]].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: 'none', // 特效形状，可以用其他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 / 7, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
count: dataItem[1].count,
};
})
});
});
series.push({
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: { brushType: 'stroke', scale: 2 },
label: {
normal: {
show: true,
position: 'left',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: { color: '#F4BE13' }
},
});
// 最后初始化地图中的相关数据
getMap.setOption({
tooltip: {
trigger: 'item',
formatter: function (params) {//自定义鼠标悬停时展现内容
if (params.name) {
var relVal = params.name + ":" + geoCoordMap[params.name][2];
return relVal;
}
}
},
geo: {
map: 'china',
zoom: 1.25,
aspectScale: 0.7,
label: {
normal: {
show: false,
fontSize: 10,
color: 'white'
},
emphasis: {
show: true,
color: '#77fbfa'
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#1956a5',
borderColor: '#089abe'
},
emphasis: {
areaColor: '#459bfd'
}
},
regions: [
{
name: '南海诸岛',
itemStyle: {
normal: { opacity: 0 }
},
label: {
normal: { show: false }
}
}
]
},
series: series, // 将之前处理的数据放到这里
textStyle: {
fontSize: 12
}
});
//地图点击事件
getMap.on('click', function (params) {
alert(params.name);
});
})
</script>
2893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
