(1)定时向后台通过ajax请求不同的地理位置信息数据时,并且是lineStyle下normal的opacity为0,lines中会基于第一次出现的lines做展示,比如第一次lines出现10条,第二次数据为12条时canvas绘制时只会出现2条
(2)定时向后台刷新数据时,第二次展示时,会是第一次的绘制的图形会有阴影在地图上
配置项如下
var allData = {
"pointData": [
[-77.013222, 38.913611],
[89.47477, 30.669926],
[-115.95958, 42.077965],
[102.882484, 30.960243],
[-85.34099, 41.15332],
[-67.01193, -10.94536],
[50.59059, 57.888645],
[-100.05147, 38.63391],
[93.67255, 54.493504],
[-122.1959, 47.365],
[83.620544, 22.741442],
[-81.7381, 45.38944],
[41.81904, 38.19797],
[-95.68024, 54.67268],
[-65.37769, -9.78943],
[95.11551, 46.795628],
[-99.79695, 32.63207],
[46.17227, 23.872107],
[104.990963, 12.565679],
[96.947655, 57.303024],
[-89.210915, 32.719624],
[104.92684, 58.549316],
[-93.880196, 47.68982],
[-60.673233, -0.029016495],
[113.88311, 22.55371],
[64.906624, 51.389473],
[-85.20707, 39.361202],
[89.48538, 29.77526],
[-107.13167, 42.556732],
[-62.336666, 3.899754],
[62.036095, 29.858965],
[-88.04783, 45.185677],
[47.996765, 32.977123],
[112.851274, 35.497553],
[64.90343, 44.801582],
[-101.54466, 34.133327],
[42.167442, 30.340105],
[-90.78093, 50.05004],
[-64.04613, -0.0019397736],
[79.97203, 50.016975],
[-113.790726, 52.58809]
],
"lineData": [{
"coords": [
[-77.013222, 38.913611],
[89.47477, 30.669926]
]
}, {
"coords": [
[-77.013222, 38.913611],
[-115.95958, 42.077965]
]
}, {
"coords": [
[-77.013222, 38.913611],
[102.882484, 30.960243]
]
}, {
"coords": [
[-77.013222, 38.913611],
[-85.34099, 41.15332]
]
}, {
"coords": [
[-77.013222, 38.913611],
[-67.01193, -10.94536]
]
}, {
"coords": [
[-77.013222, 38.913611],
[50.59059, 57.888645]
]
}, {
"coords": [
[-77.013222, 38.913611],
[-100.05147, 38.63391]
]
}, {
"coords": [
[-77.013222, 38.913611],
[93.67255, 54.493504]
]
}, {
"coords": [
[-122.1959, 47.365],
[83.620544, 22.741442]
]
}, {
"coords": [
[-122.1959, 47.365],
[-81.7381, 45.38944]
]
}, {
"coords": [
[-122.1959, 47.365],
[41.81904, 38.19797]
]
}, {
"coords": [
[-122.1959, 47.365],
[-95.68024, 54.67268]
]
}, {
"coords": [
[-122.1959, 47.365],
[-65.37769, -9.78943]
]
}, {
"coords": [
[-122.1959, 47.365],
[95.11551, 46.795628]
]
}, {
"coords": [
[-122.1959, 47.365],
[-99.79695, 32.63207]
]
}, {
"coords": [
[-122.1959, 47.365],
[46.17227, 23.872107]
]
}, {
"coords": [
[-122.1959, 47.365],
[96.947655, 57.303024]
]
}, {
"coords": [
[104.990963, 12.565679],
[-89.210915, 32.719624]
]
}, {
"coords": [
[104.990963, 12.565679],
[104.92684, 58.549316]
]
}, {
"coords": [
[104.990963, 12.565679],
[104.92684, 58.549316]
]
}, {
"coords": [
[104.990963, 12.565679],
[-93.880196, 47.68982]
]
}, {
"coords": [
[104.990963, 12.565679],
[-60.673233, -0.029016495]
]
}, {
"coords": [
[113.88311, 22.55371],
[64.906624, 51.389473]
]
}, {
"coords": [
[113.88311, 22.55371],
[-85.20707, 39.361202]
]
}, {
"coords": [
[113.88311, 22.55371],
[89.48538, 29.77526]
]
}, {
"coords": [
[113.88311, 22.55371],
[-107.13167, 42.556732]
]
}, {
"coords": [
[113.88311, 22.55371],
[-62.336666, 3.899754]
]
}, {
"coords": [
[113.88311, 22.55371],
[62.036095, 29.858965]
]
}, {
"coords": [
[113.88311, 22.55371],
[-88.04783, 45.185677]
]
}, {
"coords": [
[113.88311, 22.55371],
[47.996765, 32.977123]
]
}, {
"coords": [
[112.851274, 35.497553],
[64.90343, 44.801582]
]
}, {
"coords": [
[112.851274, 35.497553],
[64.90343, 44.801582]
]
}, {
"coords": [
[112.851274, 35.497553],
[-101.54466, 34.133327]
]
}, {
"coords": [
[112.851274, 35.497553],
[42.167442, 30.340105]
]
}, {
"coords": [
[112.851274, 35.497553],
[-90.78093, 50.05004]
]
}, {
"coords": [
[112.851274, 35.497553],
[-64.04613, -0.0019397736]
]
}, {
"coords": [
[112.851274, 35.497553],
[79.97203, 50.016975]
]
}, {
"coords": [
[112.851274, 35.497553],
[-113.790726, 52.58809]
]
}]
}
option = {
title: {
show: false
},
tooltip: {
trigger: 'item',
alwaysShowContent: true
},
geo: {
show: true,
map: 'world',
label: {
emphasis: {
show: false
}
},
zoom: 1.233555,
itemStyle: {
normal: {
color: '#ccc',
borderColor: '#333'
},
emphasis: {
color: 'transparent'
}
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke',
period: 3,
scale: 15
},
label: {
emphasis: {
show: false,
position: 'right',
formatter: '{b}'
}
},
symbolSize: 2,
showEffectOn: 'render',
itemStyle: {
normal: {
show: false,
color: '#46bee9'
}
},
data: allData.pointData
}, {
type: 'lines',
coordinateSystem: 'geo',
zlevel: 5,
large: true,
effect: {
show: true,
constantSpeed: 100,
symbol: 'pin',
symbolSize: 7,
trailLength: 0.8,
loop: false,
color: '#f00'
},
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#ff0'
}, {
offset: 1,
color: '#ff0'
}], false),
width: 1,
opacity: 1,
curveness: 0.5
}
},
data: allData.lineData,
silent: true
}]
}