apache / apache/echarts

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

Open
#19,334 5 comments 0 reactions 0 assignees View on GitHub
new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

我在用ecahrt做室内巡航车的实时位置监控。车的运行路线地图我在后台生产geojson数据格式,在页面加载的时候,加载地图,绘制地图。然后通过一个定时任务,去获取车辆的位置信息,并讲车辆的位置信息在地图上做更新。
现在就是有这样一个问题,在地图缩放/平移后,因为获取到车辆的坐标信息并没有响应地图的缩放/平移, 所以在地图缩放/平移操作后,整个效果会造成卡顿,或者地图再自动平移。请教一下,这种问题有没有好的处理方案????
![Snipaste_2023-11-27_11-47-00](https://github.com/apache/echarts/assets/35867372/cce8a4ae-274d-47e5-84f1-4b4604c2e459)

我的代码如下:
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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.