Problems when updating chart through echartsInstance.setOption()

When updating the charts through `echartsInstance.setOption()`, the series are not always correctly updated/drawn.

For example, when I initialize the chart (custom made funnel, but this happens with every chart type) with 3 series, it may look like this:


It shows 3 series, which all display correctly. Now, when I create a new chart object with 6 series, and overwrite my current chart, it changes (and animates) to:


This, also, looks good. The problem is when updating again, to a chart with *less* series then the current chart. See what happens when I update the chart to 3 series:


It draws the 3 new series over the first old 3 series, and keeps series 4, 5 and 6.

----

When I output the chart object to console, it shows:

"option": {
"title": {
"show": false
},
"legend": {
"show": false,
"data": [
{
"name": "Smartphone",
"icon": "circle"
},
{
"name": "Desktop",
"icon": "circle"
},
{
"name": "Tablet",
"icon": "circle"
}
],
"selected": {
"Smartphone": true,
"Desktop": true,
"Tablet": true
}
},
"grid": {
"containLabel": false,
"top": 0,
"right": 2,
"bottom": 20,
"left": 0,
"height": 190
},
"toolbox": {
"show": false
},
"xAxis": {
"type": "category",
"boundaryGap": true,
"axisLabel": {
"textStyle": {
"color": "#444"
}
},
"axisTick": {
"interval": "auto",
"lineStyle": {
"color": "#e5e5e5"
}
},
"axisLine": {
"lineStyle": {
"color": "#e5e5e5"
}
},
"splitLine": {
"show": false,
"interval": 0,
"lineStyle": {
"color": "#e5e5e5"
}
},
"data": [
{
"value": "Bezoeken",
"textStyle": {
"align": "center",
"fontSize": 10
}
},
{
"value": "Actief",
"textStyle": {
"align": "center",
"fontSize": 10
}
},
{
"value": "Winkelwagens",
"textStyle": {
"align": "center",
"fontSize": 10
}
},
{
"value": "Bestellingen",
"textStyle": {
"align": "center",
"fontSize": 10
}
}
]
},
"yAxis": [
{
"boundaryGap": [
0,
"10%"
],
"type": "value",
"show": false,
"min": 0,
"axisLabel": {
"textStyle": {
"color": "#444",
"fontSize": 10
}
},
"axisTick": {
"lineStyle": {
"color": "#e5e5e5"
}
},
"axisLine": {
"lineStyle": {
"show": false,
"color": "#fff"
}
},
"splitLine": {
"interval": 0,
"show": false,
"lineStyle": {
"color": "#e5e5e5"
}
},
"data": [
"Smartphone",
"Desktop",
"Tablet"
]
}
],
"series": [
{
"name": "Smartphone",
"type": "bar",
"stack": "metric",
"label": {
"normal": {
"show": true,
"position": "top",
"offset": [
0,
-10
],
"textStyle": {
"color": "#444"
}
}
},
"itemStyle": {
"normal": {
"color": "#1AB394"
}
},
"data": [
185,
89,
8,
0
]
},
{
"name": "Desktop",
"type": "bar",
"stack": "metric",
"label": {
"normal": {
"show": true,
"position": "top",
"offset": [
0,
-10
],
"textStyle": {
"color": "#444"
}
}
},
"itemStyle": {
"normal": {
"color": "#23C6C8"
}
},
"data": [
104,
51,
9,
1
]
},
{
"name": "Tablet",
"type": "bar",
"stack": "metric",
"label": {
"normal": {
"show": true,
"position": "top",
"offset": [
0,
-10
],
"textStyle": {
"color": "#444"
}
}
},
"itemStyle": {
"normal": {
"color": "#F8AC59"
}
},
"data": [
38,
25,
4,
0
]
}
],
"tooltip": {
"trigger": "axis",
"position": "inside",
"axisPointer": {
"shadowStyle": {
"color": "#000",
"shadowBlur": 0,
"opacity": 0.07
},
"type": "shadow"
},
"textStyle": {
"fontFamily": "Roboto"
},
"extraCssText": "padding: 8px 15px; font-size: 13px;"
}
}

There is not a single mention of "Motorola", "Huawei" or "Overig" in my code, but, when I add console.log(params) to `charts.tooltip.formatter`, it shows:

[
{
"componentType": "series",
"componentSubType": "bar",
"seriesType": "bar",
"seriesIndex": 0,
"seriesId": "\u0000Smartphone\u00000",
"seriesName": "Smartphone",
"name": "Bezoeken",
"dataIndex": 0,
"data": 185,
"value": 185,
"color": "#1AB394",
"marker": "",
"$vars": [
"seriesName",
"name",
"value"
],
"axisDim": "x",
"axisIndex": 0,
"axisType": "xAxis.category",
"axisId": "\u0000\u0000-\u00000",
"axisValue": "Bezoeken",
"axisValueLabel": "Bezoeken"
},
{
"componentType": "series",
"componentSubType": "bar",
"seriesType": "bar",
"seriesIndex": 1,
"seriesId": "\u0000Desktop\u00000",
"seriesName": "Desktop",
"name": "Bezoeken",
"dataIndex": 0,
"data": 104,
"value": 104,
"color": "#23C6C8",
"marker": "",
"$vars": [
"seriesName",
"name",
"value"
],
"axisDim": "x",
"axisIndex": 0,
"axisType": "xAxis.category",
"axisId": "\u0000\u0000-\u00000",
"axisValue": "Bezoeken",
"axisValueLabel": "Bezoeken"
},
{
"componentType": "series",
"componentSubType": "bar",
"seriesType": "bar",
"seriesIndex": 2,
"seriesId": "\u0000Tablet\u00000",
"seriesName": "Tablet",
"name": "Bezoeken",
"dataIndex": 0,
"data": 38,
"value": 38,
"color": "#F8AC59",
"marker": "",
"$vars": [
"seriesName",
"name",
"value"
],
"axisDim": "x",
"axisIndex": 0,
"axisType": "xAxis.category",
"axisId": "\u0000\u0000-\u00000",
"axisValue": "Bezoeken",
"axisValueLabel": "Bezoeken"
},
{
"componentType": "series",
"componentSubType": "bar",
"seriesType": "bar",
"seriesIndex": 3,
"seriesId": "\u0000Motorola\u00000",
"seriesName": "Motorola",
"name": "Bezoeken",
"dataIndex": 0,
"data": 7,
"value": 7,
"color": "#ED5565",
"marker": "",
"$vars": [
"seriesName",
"name",
"value"
],
"axisDim": "x",
"axisIndex": 0,
"axisType": "xAxis.category",
"axisId": "\u0000\u0000-\u00000",
"axisValue": "Bezoeken",
"axisValueLabel": "Bezoeken"
},
{
"componentType": "series",
"componentSubType": "bar",
"seriesType": "bar",
"seriesIndex": 4,
"seriesId": "\u0000Huawei\u00000",
"seriesName": "Huawei",
"name": "Bezoeken",
"dataIndex": 0,
"data": 4,
"value": 4,
"color": "#1C84C6",
"marker": "",
"$vars": [
"seriesName",
"name",
"value"
],
"axisDim": "x",
"axisIndex": 0,
"axisType": "xAxis.category",
"axisId": "\u0000\u0000-\u00000",
"axisValue": "Bezoeken",
"axisValueLabel": "Bezoeken"
},
{
"componentType": "series",
"componentSubType": "bar",
"seriesType": "bar",
"seriesIndex": 5,
"seriesId": "\u0000Other\u00000",
"seriesName": "Other",
"name": "Bezoeken",
"dataIndex": 0,
"data": 9,
"value": 9,
"color": "#dedede",
"marker": "",
"$vars": [
"seriesName",
"name",
"value"
],
"axisDim": "x",
"axisIndex": 0,
"axisType": "xAxis.category",
"axisId": "\u0000\u0000-\u00000",
"axisValue": "Bezoeken",
"axisValueLabel": "Bezoeken"
}
]

So, they are not in my chart object, but Echarts still draws them, and as you can see, they still exist in the tooltip params.

The chart does update well when using `chartInstance.clear()` before `chartInstance.setOption()`, but then I'll lose all the nice transitions and animations, which make ECharts look so beautiful.