For Map Application, update the scatter data will erase all the lines data

[mzy2240]

One-line summary [问题简述]

For Map Application, update the scatter data will erase all the lines data

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: ~4.10
• Browser version [浏览器类型和版本]: Version 69.0.3497.100
• OS Version [操作系统类型和版本]: Win10 Professional

Expected behaviour [期望结果]

Update part of the scatter data will not affect the rendered lines.

ECharts option [ECharts配置项]

option = {
animation: false,
				tooltip: {
					show: true,
					trigger: 'item'
				},
				leaflet: {
					center: [-86.0, 36.44],
					zoom: 6,
					roam: true,
					tiles: [
						{
							label: 'OpenStreetMap',
							urlTemplate:
								'https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
							options: {
								attribution:
									'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
							}
						}
					]
				},
				series: [
					{
						id: 'sub',
						type: 'scatter',
						name: 'sub',
						coordinateSystem: 'leaflet',
						symbol: 'circle',
						symbolSize: 7,
						// showEffectOn: 'emphasis',
						// zindex: 2,
						data: [],
						tooltip: {
							confine: true,
							formatter: function(params) {
								return 'Substation: ' + params.name;
							}
						},
						itemStyle: {
							color: 'rgb(200, 40, 0)'
						}
					},
					{
						id: 'lines',
						name: 'lines',
						type: 'lines',
						coordinateSystem: 'leaflet',
						silent: false,
						lineStyle: {
							width: 1,
							// color: 'rgb(200, 40, 0)',
							color: function(params) {
								let temp;
								// console.log(params.data.attributes.volt)
								switch (params.data.attributes.volt) {
									case 230:
										temp = '#3949ab';
										break;
									case 500:
										temp = '#e53935';
										break;
								}
								// console.log(params.data.attributes.volt);
								return temp;
							},
							opacity: 1
						},
						tooltip: {
							// position: [10, 10],
							confine: true,
							formatter: function(params) {
								return 'Branch: ' + params.name;
							}
						},
						emphasis: {
							lineStyle: {
								width: 2,
								shadowColor: 'rgba(144, 144, 255, 0.5)',
								shadowBlur: 10
							}
						},
						data: []
					},
					{
						id: 'vbus',
						name: 'vbus',
						type: 'scatter',
						coordinateSystem: 'leaflet',
						silent: false,
						symbol: 'pin',
						symbolSize: 50,
						zindex: 2,
						itemStyle: {
							color: '#ff6d00'
						},
						data: []
					},
					{
						id: 'shunt',
						name: 'shunt',
						type: 'scatter',
						coordinateSystem: 'leaflet',
						silent: false,
						symbol: 'rect',
						symbolSize: 50,
						zindex: 3,
						itemStyle: {
							color: '#4caf50'
						},
						data: []
					}
				]

}

Other comments [其他信息]

If need, you can use bmap and you will meet the same issue. For example, if you first render the first two series by giving them data and setOption, and then update the data to any of the last two series by setoption({series: [{
id: 'shunt',
name: 'shunt',
data: [{
name: 'blah',
value: [-86, 40] //for example
}]
}]})
then you will find the scatter in series 0 still there but the lines in series 1 disapper. Need help to fix this bug! Thanks!!!

[mzy2240]

@Ovilia @100pah

[Ovilia]

Try put the unchanged part into a series with different zlevel. If it cannot be separated into different series, it can only erase all the data and render again.

[mzy2240]

@Ovilia Hi Ovilia, I have tested using different zlevels, but it does not work in this situation. I even give each series different zlevel but the lines will still disappear while the scatters left there.
Below is the test case, you can replace the original option with the code below. You will notice that there is no line in the chart but it should.
http://echarts.baidu.com/examples/editor.html?c=map-polygon
myChart.setOption({
// backgroundColor: '#404a59',
title: {
text: '全国主要城市空气质量',
subtext: 'data from PM25.in',
sublink: 'http://www.pm25.in',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip : {
trigger: 'item'
},
bmap: {
center: [104.114129, 37.550339],
zoom: 5,
roam: true
},
series : [
{
id: 'scatter',
name: 'pm2.5',
type: 'scatter',
zlevel:0,
coordinateSystem: 'bmap',
data: [],//convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'bmap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'emphasis',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#f4e925',
shadowBlur: 10,
shadowColor: '#333'
}
},
zlevel: 1
},
{
type: 'custom',
coordinateSystem: 'bmap',
zlevel:0,
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.5
}
},
animation: false,
silent: true,
data: [0],
z: -10
},
{
name: 'lines',
type: 'lines',
coordinateSystem: 'bmap',
zlevel:2,
data: [{
name: 'test',
coords: [
[91.11, 29.97],
[125.03, 46.58]
]
}],
lineStyle: {
normal: {
color: '#ffff8d'
}
}
}
]
});
myChart.setOption({
series: [{
id: 'scatter',
name: 'pm2.5',
data: convertData(data)
}]
});

[mzy2240]

This issue may be relevant to #9202

[mzy2240]

@Ovilia

[mzy2240]

@Ovilia Any updates on this?

[Ovilia]

@mzy2240 Hi, sorry for the late reply. I didn't understand your question yet.
What line should be shown there?
And please remove the long full code at #9212 (comment) . That's not helping.

You may put the code at http://gallery.echartsjs.com and only paste the highlighted code here.

[mzy2240]

Hi Ovilia, for some reason I cannot use the gallery.echartsjs.com to reproduce the case, however, you can use the official example http://echarts.baidu.com/examples/editor.html?c=map-polygon and copy/paste the following code to replace the original codes from line 433 to the end. Here are what you should expect: a wide line on the map from 拉萨 to 大庆. If you can see that, then uncomment the last 7 lines of code, which is supposed to only update the scatter data, you will notice that the line disappears, which does not make sense to me. Scatters and lines have been placed on different z-level, but it has no effect on the line's disappear. Hopefully this time I make it clear enough. Thanks! @Ovilia @100pah

myChart.setOption({
    title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item'
    },
    bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true
    },
    series: [{
            id: 'scatter',
            name: 'pm2.5',
            type: 'scatter',
            zlevel: 0,
            coordinateSystem: 'bmap',
            data: [], //convertData(data),
            symbolSize: function(val) {
                return val[2] / 10;
            },
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: false
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        },
        {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: convertData(data.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6)),
            symbolSize: function(val) {
                return val[2] / 10;
            },
            showEffectOn: 'emphasis',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        },
        {
            type: 'custom',
            coordinateSystem: 'bmap',
            zlevel: 0,
            renderItem: renderItem,
            itemStyle: {
                normal: {
                    opacity: 0.5
                }
            },
            animation: false,
            silent: true,
            data: [0],
            z: -10
        },
        {
            name: 'lines',
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 2,
            data: [{
                name: 'test',
                coords: [
                    [91.11, 29.97],
                    [125.03, 46.58]
                ]
            }],
            lineStyle: {
                normal: {
                    color: '#000000',
                    width: 5,
                }
            }
        }
    ]
});
// myChart.setOption({
// series: [{
// id: 'scatter',
// name: 'pm2.5',
// data: convertData(data)
// }]
// });

[Ovilia]

OK. Reproduced. I'll check out why later.

[mzy2240]

Thanks! Any updates on this?

[mzy2240]

@Ovilia Any updates so far?

[xc2f]

I have the same issue.

[mzy2240]

@Pysics It seems that they are not very active on fixing this bug. I have moved to Supermap for better performance.

[mzy2240]

@Ovilia Howdy, any updates on this issue?

[plainheart]

Sorry for the very late fixing. I made a PR(#12850) for this about three weeks ago, which may probably fix the issue you reported.