[Bug] Treemap disappears on interaction / scroll / drilldown (Vue 3)

[DotoPototo]

Version

5.5.1

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/echart-treemap-vue-bug-q74ljp

Steps to Reproduce

Click on a node within the treemap OR click on the breadcrumb OR try to zoom with the mouse wheel and the treemap disappears.

A refresh brings it back.

Current Behavior

Treemap disappears/minimises to the top left.

Expected Behavior

Drilldown or zoom change

Environment

- OS: Any
- Browser: Chrome
- Framework: Vue 3

Any additional comments?

It uses data (data.js) which is the data directly from the disk usage example

[helgasoft]

not-a-bug, probably due to error in Vue environment. Same code works fine in the Editor - Demo

[DotoPototo]

@helgasoft just because something works outside of a framework doesn't automatically mean the bug is within the framework.

[helgasoft]

Are you using the recommended vue-echarts ? There are examples to follow there.

[plainheart]

@DotoPototo Try to use shallowRef

- const chart = ref(null); 
+ const chart = shallowRef(null); 

Or a local unresponsive variable. (More recommended, as it doesn't really need reactivity)

- const chart = ref(null); 
+ let chart = null

const updateChart = () => {
-  chart.value.setOption({
+  chart.setOption({
    // ...
  })
})

onMounted(() => {
- chart.value = echarts.init(document.getElementById("main"), "dark");
+ chart = echarts.init(document.getElementById("main"), "dark");
  updateChart();
});

// Don't forget to dispose the chart instance when the component is destroyed
+ onBeforeUnmount(() => {
+   if (chart) {
+     chart.dispose()
+     chart = null
+   }
+ })

See also other similar issues here, especially #17723 (comment).