Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Problems when updating chart through echartsInstance.setOption()
See original GitHub issueWhen 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": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#1AB394;\"></span>",
"$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": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#23C6C8;\"></span>",
"$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": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#F8AC59;\"></span>",
"$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": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#ED5565;\"></span>",
"$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": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#1C84C6;\"></span>",
"$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": "<span style=\"display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#dedede;\"></span>",
"$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.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:13
- Comments:56 (2 by maintainers)
Top Results From Across the Web
[GitHub] tehZevo commented on issue #6202: Problems when ...
tehZevo commented on issue #6202: Problems when updating chart through echartsInstance.setOption() URL: ...
Read more >ECharts refresh on data change - Stack Overflow
You have to call chartInstance.setOption() again with your new data. I give you a small example: // eChart is the chart instance! echart....
Read more >ECharts Document
Change of data changes the presentation of chart, therefore, implementing dynamic data updating is extremely easy. All data updating are through setOption. You ......
Read more >Dynamic Data - How To Guides - Handbook - Apache ECharts
Data in Getting Started Example is directly updated by using setOption . ... and use setOption to fill in data and configs after...
Read more >org.apache.echarts.dev - 2019 January - 991 messages
[GitHub] sannai commented on issue #6811: 关系图graph支持两个data节点之间多 ... on issue #6202: Problems when updating chart through echartsInstance.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I have the same problem recently , i solved it by set the series’s
data = nullwhich you do not want. Also you can try itsetOption(option, true)This is still a problem. And a very annoying one. I’d call it a bug rather than an enhancement, since it’s a very big problem when dealing with realtime data (calling setOption frequently) and building the chart from data in React. 😃