echarts之地图连线动效
效果如下：
HTML如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>北京地图</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/echarts.js" ></script>
<script type="text/javascript" src="js/map.js" ></script>
</head>
<style>
html,body{
margin: 0;
padding: 0;
width: 100%;
height:100%;
}
.echarts-wrapper{
width: 100%;
height:100%;
margin: auto;
}
.echarts-wrapper-china{
position: absolute;
bottom: 20px;
right:20px;
width: 220px;
height:160px;
border: 1px solid #09b8c0;
}
</style>
<body>
<div class='echarts-wrapper' id="beijing"></div>
<div class='echarts-wrapper-china' id="china"></div>
</body>
</html>
JS如下：
$(function(){
initBeijing();
initChina();
});
function initBeijing(){
var chart = echarts.init(document.getElementById("beijing"));
$.getJSON('json/beijing.json', function(data) {
echarts.registerMap('beijing', data);
chart.setOption({
geo : {
type : 'map',
map : 'beijing',
layoutCenter : [ '50%', '50%' ],
layoutSize : '100%',
label : {
normal : {
show : false,
textStyle : {
color : '#fff'
}
},
emphasis : {
show : false,
textStyle : {
color : '#fff'
}
}
},
itemStyle : {
normal : {
areaColor : 'rgba(24,65,91,0)',
borderColor : '#23a8b3',
borderWidth : 1,
shadowColor : '#365661',
shadowBlur : 10
},
emphasis : {
areaColor : 'rgba(24,65,91,0)'
},
}
},
series: [{
name: '北京行政图',
type: 'lines',
zlevel: 2,
symbol: ['none', 'arrow'],
symbolSize: 10,
lineStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(111, 113, 76, 1)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(255, 255, 134, 1)' // 100% 处的颜色
}],
global: false // 缺省为 false
},
width: 1,
opacity: 0.6,
curveness: -0.5
},
},
data: [{
coords: [
[118.4100, 39.6410],
[115.9700, 40.4500] //延庆
]
},{
coords: [
[118.4100, 39.6410],
[116.6300, 40.3200]//怀柔
]
},{
coords: [
[118.4100, 39.6410],
[116.8300, 40.3700]//密云县
]
},{
coords: [
[118.4100, 39.6410],
[116.65, 40.1300]//顺义
]
},{
coords: [
[118.4100, 39.6410],
[116.2800, 39.8500]//丰台区
]
},{
coords: [
[118.4100, 39.6410],
[116.2300, 40.2200]//昌平区
]
},{
coords: [
[118.4100, 39.6410],
[116.3000, 39.9500]//海淀
]
},{
coords: [
[118.4100, 39.6410],
[116.4300, 39.9200]//朝阳
]
},{
coords: [
[118.4100, 39.6410],
[116.4200, 39.9300]//东城
]
}]
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function(val) {
var symbolSize;
if (val[2] / 12 >= 6) {
symbolSize = 6;
} else if (val[2] / 12 <= 3) {
symbolSize = 3;
} else {
symbolSize = val[2] / 12;
}
return symbolSize;
},
itemStyle: {
normal: {
color: '#a6c84c',
}
},
data: [{
name: '延庆',
value: [115.9700, 40.4500] //延庆
},{
name: '怀柔',
value: [116.6300, 40.3200]//怀柔
}, {
name: '密云县',
value: [116.8300, 40.3700]//密云县
},{
name: '顺义',
value: [116.65, 40.1300]//顺义
},{
name: '丰台区',
value: [116.2800, 39.8500]//丰台区
},{
name: '昌平区',
value: [116.2300, 40.2200]//昌平区
},{
name: '海淀',
value: [116.3000, 39.9500]//海淀
},{
name: '朝阳',
value: [116.4300, 39.9200]//朝阳
},{
name: '东城',
value: [116.4200, 39.9300]//东城
}]
}]
})
});
$(window).resize(function () {
chart.resize();
});
}
function initChina(){
var chart = echarts.init(document.getElementById("china"));
$.getJSON('json/china.json', function(data) {
echarts.registerMap('china', data);
chart.setOption({
geo: {
type : 'map',
map : 'china',
zoom: 1.3, //这里是关键，一定要放在 series中
layoutCenter : [ '50%', '50%' ],
layoutSize : '100%',
label : {
normal : {
show : false,
textStyle : {
color : '#fff'
}
},
emphasis : {
show : false,
textStyle : {
color : '#fff'
}
}
},
itemStyle : {
normal : {
areaColor : 'rgba(24,65,91,0)',
borderColor : '#408087',
borderWidth : 1,
},
emphasis : {
areaColor : 'rgba(24,65,91,0)'
},
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function(val) {
var symbolSize;
if (val[2] / 12 >= 6) {
symbolSize = 6;
} else if (val[2] / 12 <= 3) {
symbolSize = 3;
} else {
symbolSize = val[2] / 12;
}
return symbolSize;
},
itemStyle: {
normal: {
color: '#a6c84c',
}
},
data: [{
name: '',
value: [118.4100, 39.6410],
}]
}]
})
});
$(window).resize(function () {
chart.resize();
});
}