假如有这个需求,在中国地图上画出一个省份的校区点,并按时间排序,你会这么做?我首先想到是在使用echarts去做,在通过轮询渲染每个点
const fetchData = () => {
// 在这里处理获取到的JSON数据
data = campusListSort
point = data.map(item => {
// const location = item.result?.location
geoCoordMap[item.campusName] = item.location
return {
name: item.campusName,
value: 70
}
})
const option = {
backgroundColor: '#0084FF',
title: {
text: '',
subtext: "",
textStyle: {
color: '#fff',
fontSize: 17,
}
},
geo: {
map: 'china',
// silent: true,
center: [90, 36], // 设置地图中心点
label: {
emphasis: {
show: false
}
},
roam: false,
itemStyle: {
normal: {
// color: '#4494d5',
color: '#0762FE',
// color: 'transparent',
borderColor: '#FAFFC0',
}
},
zlevel: 1
},
series: [
{
type: 'map',
map: 'china',
geoIndex: 0,
// silent: true,
selectedMode: false,
zlevel: 2,
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
color: '#000',
borderWidth: 1,
borderColor: '#000',
},
emphasis: {
color: '#000',
borderWidth: 1,
borderColor: '#000',
}
}
}, {
name: 'point',
type: 'scatter',
coordinateSystem: 'geo',
zlevel: 3,
data: convertData(point),
symbolSize: function (val) {
return val[2] / 10;
},
itemStyle: {
normal: {
color: '#fff',
opacity: 0.75
}
},
myChart.setOption(option);
let interval = 500
// timer = setInterval(() => {
// numDom.innerHTML = num++
// }, interval);
window.addEventListener('resize', myChart.resize);
}
咦,这样也不对,地图是画出来了但是点为什么不是动态实时渲染上去的,我很纳闷,问了我师傅强哥,他说在echart中有一个方法是可以实现这个需求的,animationDelay 添加这个动态函数可以使每个点延迟显示
animationDelay: function (idx) {
return idx * 200;
},
这样就可以达到需求想要的效果,太棒啦