[Feature] 在自定义的地图中，定时更新scatter的数据，在地图缩放/平移情况下造成的整体卡顿和平移

[liu3104009029]

trafficstars

What problem does this feature solve?

我在用ecahrt做室内巡航车的实时位置监控。车的运行路线地图我在后台生产geojson数据格式，在页面加载的时候，加载地图，绘制地图。然后通过一个定时任务，去获取车辆的位置信息，并讲车辆的位置信息在地图上做更新。 现在就是有这样一个问题，在地图缩放/平移后，因为获取到车辆的坐标信息并没有响应地图的缩放/平移, 所以在地图缩放/平移操作后，整个效果会造成卡顿，或者地图再自动平移。请教一下，这种问题有没有好的处理方案？？？？

我的代码如下： 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);

})

}

What does the proposed API look like?

setOption

[echarts-bot[bot]]

@liu3104009029 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

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

BODY

What problem does this feature solve?

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. Please tell me, is there any good solution to this problem? ? ? ?

My code is as follows: 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 // Allow front-end roaming
    } as EChartsOption)


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

})

}

What does the proposed API look like?

setOption

[helgasoft]

maybe your coordinates are too large...? An official example merged with your code results in: Demo Code - pan/zoom works for both map and dynamic scatter point.

[liu3104009029]

@helgasoft Thank you very much, but that's how big the coordinate data we got is looking at the moment, so I don't know if there are any other options

[helgasoft]

sorry, did not pay attention to "...vehicle's location information...". So your map is not SVG, but a geoJSON map - ./static/5f.json. The coordinates must be longitude/latitude, as in this official example. Coordinates like [130337, 283487] are not valid WGS84 lng/lat coordinates and they need to be converted.

[ShaoClean]

i just meet the same issues,and i use this way to solve my problme:

myChart.setOption{
   xAxis: { show: false, min: 0, max: 100 },
   yAxis: { show: false, min: 0, max: 100 },
}