[Bug] On Switching between the Bar and Polar chart dynamically, weird chart is rendered until reloaded

[Suraj-Singhvi]

Version

5.4.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=area-pieces&code=PYBwLglsB2AEC8sDeAoWsIBMBcsDkAZgEwBsRADAQJwkC0A7ACyMCmtRLAhvbZgMYE6AVj5Eq5TiT4AjKgA4AzHgA0KNLADOLAE4QWG3AG116VOnOwwATxAtceaZ20qT5zJzCcjri4byYWAk4AVwAbMBVYAEYyEgUAOiEFZJTUhQBdVQtfPAAZTg0wWHpYdysNSIpGKiF6OXjyRqamokyfcz98wthxUs5yyqiqenoiKPj6ISiiBRIhqPT2tvaAehXYPmBgbUwIaA8WAGVysBYAW3sQYFCnF2zYAA8AQQeIA3wCAhHGTkxpWioLEwVFocii5DoLDi_yi0kYREwQgI5D4LD4UTwrgAvuo2ug1rBtL8IMENC83rgzLACegNAALYAAd1wYG0wRYWWp63Q1ls9j4BwA5tsrHcubAsZyCZxoILQixye8kJL1ASrjdtJSVepnq8la4sPZPt9fv9AcDQeDIdDaLD4Yjkaj0WLaQzmZY2RzXLy7PgBadhdpReoVegrIrvBYqRZDfhyFQFJgZojbWieNJpFFGLQBHxs4CWPQ-HwEwJpEQXeZ6UyWZ7sbiUFiANxAA

Steps to Reproduce

In the given example, the eChart would render a bar chart correctly. But when you try to comment on the xAxis & yAxis settings and have the settings for the Polar chart which are - coordinate-system, radiusAxis, angleAxis, and polar, the eChart renders an incorrect chart overlap until the RUN button is clicked again. The same issue would occur vice -versa when you have polar chart settings and then update it to have bar chart settings.and

Current Behavior

When I have a Bar chart with x & y axis and I update the echart options to have polar chart settings, I would expect the Polar chart to be displayed but instead a weird chart is being shown.

Before:

After:

NOTE: Do not click the RUN button.

Expected Behavior

I would expect the chart to be updated automatically without the need to click the RUN button in this case.

As echart automatically keeps updating the options whenever the settings are updated, i would expect it will render a Polar chart instead.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

(In my application, I am switching between different chart types like Bar | Polar | Radar | Pie this issue only happens while switching between Bar and Polar)

[helgasoft]

yes, something fishy going on. Chart cannot be updated between bar and polar, but can be replaced. And only after adding a series.id. Weird... Demo Code.

I would expect the chart to be updated automatically without the need to click the RUN button

In many cases this is an incorrect assumption.

[elnipa]

Any progress on this bug? Also experiencing this.

[helgasoft]

A small study on ECharts transitions. Charts could be separated in two major groups - with (bar,line,etc.) and without (pie,polar,graph,etc.) axes. Transition between charts is done through setOption or morphing. 1) setOption offers merge or replace modes. Merge is used primarily for updating existing elements. Merging charts between the two major groups will not go well because they are very different in nature. Issues here cannot be called bugs since chart designs are incompatible and do not allow merging. Transitions between major groups should be done by replace - setOption(op, true). 2) Morphing is an animated transition between two chart's data items. Data structure is important here and there are two types - continuous(value) and categorical data. We can morph between the major groups if data is of the same type. For instance a value-data pie to a value-data bar chart will work. But the same pie to categorical bars will not.

So keep in mind those important chart and data distinctions when transitioning.

[Tom-Yucw]

I meet with the same problem on version 5.4.3. In a group, I draw a line, and can be switched to a bar. But when I switch it, the connected charts showed the changed one data. So, I get 2 lines after change back.

Before switch:

Switching to bar:

Switch back: get 2 lines

And I have tried to setOption(op, true) before connect the charts, but it did not work.

allcharts = [];   // store all charts in this array
......
// here is a loop to create charts
{
......
myChart.group = 'group1';
**myChart.setOption(option, true);**
allcharts.push(myChart);
}
......
echarts.connect(allcharts);  // connect all charts

Is there something I did wrong, or any way to solve this? Thanks a lot!

[ptandler]

right, setOptions(opts, true) (i.e. replace mode) does not fix this.

[ptandler]

I also tried universalTransition:{ enabled: true }, but still same issue:

I can change between bar, pie, radar, polar in any order and this works very well, but only when I change from bar to polar or polar to bar, I get these strange artifacts.

[Always-prog]

+1 here temporary solution is clearing chart and setting EC options

echartInstance.clear()
echartInstance.setOption(echartOptions)