多次重复setOption后,lines3D的trail速度会越来越慢;谷歌、火狐浏览器均有该问题
配置项如下
var data;
$.getJSON('/asset/get/s/data-1503467127928-B1lYL59uW.json', function(predata) {
data = predata;
});
function draw() {
var airports = data.airports.map(function(item) {
return {
coord: [item[3], item[4]]
}
});
function getAirportCoord(idx) {
return [data.airports[idx][3], data.airports[idx][4]];
}
// Route: [airlineIndex, sourceAirportIndex, destinationAirportIndex]
var routesGroupByAirline = {};
data.routes.forEach(function(route) {
var airline = data.airlines[route[0]];
var airlineName = airline[0];
if (!routesGroupByAirline[airlineName]) {
routesGroupByAirline[airlineName] = [];
}
routesGroupByAirline[airlineName].push(route);
});
var pointsData = [];
data.routes.forEach(function(airline) {
pointsData.push(getAirportCoord(airline[1]));
pointsData.push(getAirportCoord(airline[2]));
});
var series = data.airlines.map(function(airline) {
var airlineName = airline[0];
var routes = routesGroupByAirline[airlineName];
if (!routes) {
return null;
}
return {
type: 'lines3D',
name: airlineName,
effect: {
show: true,
trailWidth: 4,
trailLength: 1,
trailOpacity: 1,
trailColor: 'rgb(30, 30, 60)'
},
lineStyle: {
width: 2,
color: 'rgb(50, 50, 150)',
// color: 'rgb(118, 233, 241)',
opacity: 0.2
},
blendMode: 'lighter',
data: routes.map(function(item) {
return [airports[item[1]].coord, airports[item[2]].coord];
})
};
}).filter(function(series) {
return !!series;
});
series.push({
type: 'scatter3D',
coordinateSystem: 'globe',
blendMode: 'lighter',
symbolSize: 2,
itemStyle: {
color: 'rgb(50, 50, 150)',
opacity: 0.2
},
data: pointsData
});
myChart.setOption({
legend: {
selectedMode: 'single',
left: 'left',
data: Object.keys(routesGroupByAirline),
orient: 'vertical',
textStyle: {
color: '#fff'
}
},
globe: {
baseTexture: '/asset/get/s/data-1503467266702-Skjbw59ub.jpg',
environment: '/asset/get/s/data-1503467955610-Skh2tc9_b.jpg',
heightTexture: '/asset/get/s/data-1503467275962-SJNfv9q_b.jpg',
displacementScale: 0.1,
displacementQuality: 'high',
shading: 'realistic',
realisticMaterial: {
roughness: 0.9,
metalness: 0
},
postEffect: {
enable: true
},
temporalSuperSampling: {
enable: true
},
light: {
ambient: {
intensity: 1
},
main: {
intensity: 1,
shadow: false
},
ambientCubemap: {
texture: '/asset/get/s/data-1503467280745-SkKzPc9O-.hdr',
exposure: 0,
diffuseIntensity: 0.5,
specularIntensity: 0
}
},
viewControl: {
autoRotate: false
},
silent: false
},
series: series
});
}
window.setInterval(draw, 5000);