假如有这个需求,在中国地图上画出一个省份的校区点,并按时间排序,你会这么做?我首先想到是在使用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; },
这样就可以达到需求想要的效果,太棒啦
今天的文章 你不知道的echart动态地图分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ji-chu/103271.html