这个月一直在写地图,写到销魂,一直都在修改,最终,产品经理终于放过了我页面中的那个可怜的地图,让大家都来瞅瞅吧;不多说,上代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地图</title>
<style>
* {
margin: 0;
padding: 0;
}
#map {
width: 450px;
height: 550px;
}
</style>
</head>
<body>
<div id="map">
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script>
$(document).ready(function () {
// 地图
var chart = echarts.init(document.getElementById('map'));
var allData = {
"citys": [
{
"name": "杭州",
"value": [120.15507, 30.274085, 10],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "集安",
"value": [126.194031, 41.125307, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "贵阳",
"value": [106.630154, 26.647661, 2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "抚顺",
"value": [123.957208, 41.880872, 3],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "海门",
"value": [121.181615, 31.871173, 2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "珠海",
"value": [113.576726, 22.270715, 9],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "河北",
"value": [114.475704, 38.584854, -19],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "深圳",
"value": [114.057868, 22.543099, 14],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "黄浦",
"value": [121.484443, 31.231763, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "蓬莱",
"value": [120.758848, 37.810661, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "甘肃",
"value": [103.826308, 36.059421, -2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "龙井",
"value": [129.427066, 42.766311, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "茂名",
"value": [110.925456, 21.662999, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "丹东",
"value": [124.354707, 40.0005, 2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "晋中",
"value": [112.752695, 37.687024, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "浙江",
"value": [120.152792, 30.267447, -2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "海城",
"value": [122.685217, 40.882377, 2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "溆浦",
"value": [110.594921, 27.908281, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "北京",
"value": [116.407526, 39.90403, -14],
"symbolSize": 8,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "四川",
"value": [104.075931, 30.651652, -5],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "福建",
"value": [119.295144, 26.10078, -1],
"symbolSize": 15,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "青岛",
"value": [120.38264, 36.067082, 52],
"symbolSize": 3,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "南京",
"value": [118.796877, 32.060255, 17],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "新疆",
"value": [87.627704, 43.793026, -2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "陕西",
"value": [108.954239, 34.265472, -2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "石家庄",
"value": [114.51486, 38.042307, 4],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "南昌",
"value": [115.858198, 28.682892, 2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "广州",
"value": [113.264435, 23.129163, 13],
"symbolSize": 15,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "上海",
"value": [121.473701, 31.230416, 44],
"symbolSize": 8,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "重庆",
"value": [106.568088, 29.643221, -23],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "苏州",
"value": [120.585316, 31.298886, 14],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "大连",
"value": [121.614682, 38.914003, 40],
"symbolSize": 3,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "广西",
"value": [108.327546, 22.815478, -1],
"symbolSize": 15,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "郑州",
"value": [113.625368, 34.7466, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "湖北",
"value": [114.341862, 30.546498, -4],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "厦门",
"value": [118.089425, 24.479834, 3],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "哈尔滨",
"value": [126.534967, 45.803775, 8],
"symbolSize": 15,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
{
"name": "江苏",
"value": [118.763232, 32.061707, -1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "延安",
"value": [109.489727, 36.585455, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "天津",
"value": [117.200983, 39.084158, 28],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "长沙",
"value": [112.938814, 28.228209, 5],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "安徽",
"value": [117.284923, 31.861184, -1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "昆山",
"value": [120.980737, 31.385598, 4],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "西藏",
"value": [91.117212, 29.646923, -1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "河南",
"value": [113.274379, 34.445122, 0],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "湖南",
"value": [112.98381, 28.112444, -1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "合肥",
"value": [117.227239, 31.820587, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "山东",
"value": [117.020359, 36.66853, -6],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "西安",
"value": [108.940175, 34.341568, 3],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "长沙",
"value": [113.000194, 28.242883, -58],
"symbolSize": 3,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "重庆",
"value": [106.551557, 29.56301, 2],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "长春",
"value": [125.323544, 43.817072, 8],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "海口",
"value": [110.3893, 19.8516, 1],
"symbolSize": 15,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "昆明",
"value": [102.9199, 25.4663, 8],
"symbolSize": 15,
"itemStyle": {"normal": {"color": "#F58158"}}
},
{
"name": "青海",
"value": [101.4038, 36.8207, 1],
"symbolSize": 2,
"itemStyle": {"normal": {"color": "#71f29b"}}
},
],
"moveLines": [
{"fromName": "河南", "toName": "江苏", "coords": [[113.274379, 34.445122], [118.763232, 32.061707]]},
{"fromName": "河南", "toName": "上海", "coords": [[113.274379, 34.445122], [121.473701, 31.230416]]},
{"fromName": "福建", "toName": "上海", "coords": [[119.295144, 26.10078], [121.473701, 31.230416]]},
{"fromName": "广西", "toName": "上海", "coords": [[108.327546, 22.815478], [121.473701, 31.230416]]},
{"fromName": "黑龙江", "toName": "上海", "coords": [[126.534967, 45.803775], [121.473701, 31.230416]]},
{"fromName": "海口", "toName": "上海", "coords": [[110.3893, 19.8516], [121.473701, 31.230416]]},
{"fromName": "甘肃", "toName": "上海", "coords": [[103.826308, 36.059421], [121.473701, 31.230416]]},
{"fromName": "新疆", "toName": "上海", "coords": [[87.627704, 43.793026], [121.473701, 31.230416]]},
{"fromName": "广东", "toName": "四川", "coords": [[113.264435, 23.129163], [104.075931, 30.651652]]},
{"fromName": "广东", "toName": "湖南", "coords": [[113.264435, 23.129163], [113.000194, 28.242883]]},
{"fromName": "广东", "toName": "河北", "coords": [[113.264435, 23.129163], [114.475704, 38.584854]]},
{"fromName": "云南", "toName": "广东", "coords": [[102.9199, 25.4663], [113.264435, 23.129163]]},
{"fromName": "云南", "toName": "浙江", "coords": [[102.9199, 25.4663], [120.152792, 30.267447]]},
{"fromName": "云南", "toName": "湖北", "coords": [[102.9199, 25.4663], [114.341862, 30.546498]]},
{"fromName": "云南", "toName": "青海", "coords": [[102.9199, 25.4663], [101.4038, 36.8207]]},
{"fromName": "黑龙江", "toName": "安徽", "coords": [[126.534967, 45.803775], [117.284923, 31.861184]]},
{"fromName": "黑龙江", "toName": "山东", "coords": [[126.534967, 45.803775], [117.020359, 36.66853]]},
{"fromName": "黑龙江", "toName": "新疆", "coords": [[126.534967, 45.803775], [87.627704, 43.793026]]},
{"fromName": "海南", "toName": "福建", "coords": [[110.3893, 19.8516], [119.295144, 26.10078]]},
{"fromName": "海南", "toName": "山西", "coords": [[110.3893, 19.8516], [112.562398, 37.873532]]},
{"fromName": "海南", "toName": "吉林", "coords": [[110.3893, 19.8516], [125.323544, 43.817072]]},
{"fromName": "海南", "toName": "重庆", "coords": [[110.3893, 19.8516], [106.551557, 29.56301]]},
{"fromName": "福建", "toName": "陕西", "coords": [[119.295144, 26.10078], [108.954239, 34.265472]]},
{"fromName": "福建", "toName": "浙江", "coords": [[119.295144, 26.10078], [120.152792, 30.267447]]},
{"fromName": "福建", "toName": "青海", "coords": [[119.295144, 26.10078], [101.4038, 36.8207]]},
{"fromName": "江苏", "toName": "上海", "coords": [[118.763232, 32.061707], [121.473701, 31.230416]]},
{"fromName": "江苏", "toName": "北京", "coords": [[118.763232, 32.061707], [116.407526, 39.90403]]},
{"fromName": "上海", "toName": "北京", "coords": [[121.473701, 31.230416], [116.407526, 39.90403]]},
{"fromName": "山东", "toName": "四川", "coords": [[117.020359, 36.66853], [104.075931, 30.651652]]},
{"fromName": "河北", "toName": "四川", "coords": [[114.475704, 38.584854], [104.075931, 30.651652]]},
{"fromName": "四川", "toName": "内蒙", "coords": [[104.075931, 30.651652], [106.568088, 29.643221]]},
{"fromName": "贵州", "toName": "湖北", "coords": [[106.630154, 26.647661], [114.341862, 30.54649]]},
{"fromName": "江西", "toName": "陕西", "coords": [[115.858198, 28.682892], [108.954239, 34.265472]]},
{"fromName": "广东", "toName": "北京", "coords": [[113.264435, 23.129163], [116.407526, 39.90403]]},
{"fromName": "云南", "toName": "北京", "coords": [[102.9199, 25.4663], [116.407526, 39.90403]]},
{"fromName": "福建", "toName": "北京", "coords": [[119.295144, 26.10078], [116.407526, 39.90403]]},
]
};
var option = {
legend: {
show: false,
orient: 'vertical',
top: 'bottom',
left: 'right',
data: ['地点', '线路'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: false,
zoom: 1.2, //设置地图大小是否固定
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#ccc',
opacity: '0.8' //设置地图透明度
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [{
name: '地点',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
emphasis: {
show: false,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 2,
showEffectOn: 'render',
itemStyle: {
normal: {
color: '#46bee9'
}
},
data: allData.citys
}, {
name: '线路',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
large: true,
effect: {
show: true,
constantSpeed: 20, //航线光标的速度
symbol: 'pin',
symbolSize: 3,
trailLength: 0,
},
lineStyle: { //设置航线颜色
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0, color: '#71f29b'
}, {
offset: 1, color: '#F58158'
}], false),
width: 2, //设置航线宽度
opacity: 0.3, //设置航线透明度
curveness: 0.1
}
},
data: allData.moveLines
}]
};
chart.setOption(option)
})
</script>
</html>