In the customized map, the scatter data is updated regularly to prevent the overall lag and panning caused by the map zooming/panning

Question

I am using ecahrt for real-time position monitoring of indoor cruise cars. I produce the geojson data format of the car's running route map in the background. When the page is loaded, the map is loaded and the map is drawn. Then use a scheduled task to obtain the vehicle's location information, and update the vehicle's location information on the map.

Now there is such a problem. After the map is zoomed/panned, because the coordinate information of the vehicle is obtained and does not respond to the map zoom/pan, so after the map zoom/pan operation, the entire effect will cause lag, or the map will automatically Pan.

function initChart() {
var chartDom = document.getElementById('geoMap')! as HTMLDivElement; var myChart = echarts.init(chartDom);
axios.get('./static/5f.json').then((res) => {
    echarts.registerMap('5f', res.data);
    myChart.setOption({
        geo: {
            center: [174906, 180284],
            zoom: 1.2,
            map: '5f',
            roam: true,
            silent: true,
            smooth: true,
            itemStyle: {
                areaColor: 'transparent',
                color: 'transparent',
                borderWidth: 1
            },

        },
        series: [
            {
                name: 'V53',
                type: 'scatter',
                coordinateSystem: 'geo',
                geoIndex: 0,
                roam: true,
                animation: true,
                animationDurationUpdate: 0,
                dimensions: ['x', 'y', 'name'],
                data: [{ value: [130337, 283487], name: 'V53' }],
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{b}'
                },
                symbolSize: [8, 20],
                symbolRotate: 90,
                symbol: 'circle',
                zlevel: 100
            },
        ],
        roam: true // 允许前端漫游
    } as EChartsOption)


    timer.value = window.setInterval(() => {
       
        myChart.setOption({
            series: {
                name: 'V53',
                data: [{ value: [130337, 283487], name: 'V53' }],
            }
        }); 
    }, 1000);

})
}

Is there any good solution to this problem?

Answer 1

Lag is often caused by the animations, so you could try to disable these: animation: false.

For dataZoom there is the filterMode property which allows to disable a change of the window if data changes. There might be something similar for the geo roam.

As a last option you could try and experiment with the georaom event.