[Bug] The data points on the line chart become misaligned after the resize() function is called.

[blukio]

Version

5.5.1

Link to Minimal Reproduction

See the code below

Steps to Reproduce

The following is the Vue 3 code where the error occurs.

<template>
  <div ref="charts" style="width: 50%; height: 50%" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const charts = ref()
const map = ref()

onMounted(() => {
  map.value = echarts.init(charts.value)
  setInterval(() => {
    const arr = []
    for (let i = 0; i < 100; i++) {
      arr.push(parseInt(Math.random() * 100))
    }
    map.value.setOption({
      xAxis: {
        type: 'category'
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: arr,
          type: 'line'
        }
      ]
    })
  }, 500)

  window.addEventListener('resize', () => {
    map.value.resize()
  })
})
</script>

Current Behavior

After the browser renders the page, resizing the browser window will trigger the resize() event. After the resize() event is triggered, the data points are not correctly destroyed.

Expected Behavior

The data points should be correctly destroyed and refreshed.

Environment

- OS:windows10
- Browser:chrome(128.0.6613.138)
- Framework:vue@3

Any additional comments?

I encountered this issue while writing code to render charts based on dynamic data: when I set the resize() property, changing the viewport size causes data points to become misaligned.

[helgasoft]

cannot reproduce in straight Javascript - Demo

[plainheart]

Is there any error in the console? Try to use shallowRef and see if it helps.

[blukio]

Is there any error in the console? Try to use shallowRef and see if it helps. Thank you, your method is feasible.

[blukio]

cannot reproduce in straight Javascript - Demo

Thank you, you are correct. It seems I had a misunderstanding while using Vue.