你不知道的echart动态地图

文章描述了如何在中国地图上使用Echarts绘制按时间排序的省份校区点,最初尝试使用轮询渲染失败,后来通过添加`animationDelay`功能实现点的动态实时渲染。
摘要由CSDN通过智能技术生成

假如有这个需求,在中国地图上画出一个省份的校区点,并按时间排序,你会这么做?我首先想到是在使用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;
                        },

这样就可以达到需求想要的效果,太棒啦

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值