你不知道echart动态地图

59 阅读1分钟

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

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