你不知道的echart动态地图

你不知道的echart动态地图文章描述了如何在中国地图上使用 Echarts 绘制按时间排序的省份校区点 最初尝试使用轮询渲染失败 后来通过添加 animationDel 功能实现点的动态实时渲染

假如有这个需求,在中国地图上画出一个省份的校区点,并按时间排序,你会这么做?我首先想到是在使用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动态地图分享到此就结束了,感谢您的阅读。
编程小号
上一篇 2025-01-06 17:27
下一篇 2025-01-06 17:21

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/bian-cheng-ji-chu/103271.html