[Bug] Vue3 support seems not to behave correctly

[Tails128]

Version

5.4.*

Link to Minimal Reproduction

https://github.com/Tails128/echart-vue-issue

Steps to Reproduce

Please refer to the github repo for how the chart was created & what the option is.

In order to see the error (you will see it in the console), just resize the window.

I am afraid I'm setting it up incorrectly, if so please add a guide on how to setup echart for vue3

Current Behavior

• Errors are triggered on resize
• The resize doesn't happen
• The labels sometimes don't work (not available in the example)

Expected Behavior

• Resize should be possible

Environment

- OS: macOS Monterey
- Browser: Chrome 96.0.4664.55
- Framework Vue@3

Any additional comments?

No response

[plainheart]

Please search related issues with the keyword “vue” and you might find the answer. :)

[Tails128]

@plainheart
Could you point me out to something? I can't seem to find much...

It still seems a bug to me given it's not behaving as expected and there's no explaination on what is going wrong...
I mean, if i see no error I don't understand why I get no label, why it doesn't resize and so on...

[YuShengHou]

@Tails128
The following code should solve your problem. It is not a good practice to use the return value of echarts.init as a reactive value. you have a high probability of being wrong because of that.

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import * as echarts from "echarts";
import { useWindowSize } from "@vueuse/core";
const option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
};

const graphRef = ref()
let chart = null as unknown as echarts.ECharts

onMounted(() => {
  chart = echarts.init(graphRef.value);
  chart.setOption(option);

  const { width } = useWindowSize();
  watch(width, () => {
    if (chart != undefined) {
      console.log("Trying to resize!");

      chart.resize({
        width: width.value,
        height: 300
      });
      console.log(width.value)
    }
  });
})
</script>

<template>
  <div style="
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-items: center;
    ">
    <div id="graph" ref="graphRef" style="width: 100%; height: 300px" />
  </div>
</template>

<style>
body,
html {
  margin: 0;
  padding: 0;
}
</style>

[plainheart]

We've answered many similar issues brought by vue. I believe you may find useful information from the search result if you'd like. But I think it needs to be reiterated that the instance of echarts shouldn't be made reactive as it may affect the access to the properties of inner models and bring some unexpected issues. It's good and suggested to use a normal variable or any shallow API (like shallowRef, shallowReactive) or use markRaw to prevent the instance object from being converted to a proxy.

See also the tips from the documentation of Vue.js.

• Some values simply should not be made reactive, for example a complex 3rd party class instance, or a Vue component object.
• Skipping proxy conversion can provide performance improvements when rendering large lists with immutable data sources.

In the end, there is a list of partial related issues.

• [Bug] tooltip does not shown when tooltip.trigger is axis in line chart,it is OK while tooltip.trigger is item #17496
• [Bug] When I click the button to change a histogram's setoptions, the histogram's tooltip is no longer displayed #16681
• [Bug] Heatmap visualmap filtering not working - CoordSys is undefined #16659
• [Bug] ECharts.resize() ERROR! Cannot read properties of undefined (reading 'type') #16642
• vue3.x & echartsV5.2.1, when i click the [ legend ] which on the chart, Console error: coordSys is undefined #16061
• vue3使用ref变量获取id节点导致trigger:axis无法显示提示框，item则不会影响 #15845
• treemap 在 vue3 中表现异常 #15967
• vue3.0 echarts折线图堆叠图 tooltip.trigger = 'axis',提示框不显示，且不触发tooltip的formatter #15457
• vue3使用echarts5，折线图、柱状图使用datazoom报错 #14974
• Vue3项目中使用折线图出现tooltip不显示 #14342
• vue3项目点击图例报错后图例点击交互无法正常使用 #14339
• resize error #15253
• vue3.0下echarts resize()报错 #13943
• vue3 chart can't render again  #13537

[YuShengHou]

Main、侯已经收到你的邮箱

[Tails128]

I see... do you think it would be possible to include this in the "get started" section or in any documentation?

While it's true there are closed issues already, it's not super simple to find them and a simple warning text could save devs a lot of time and it could also save the project a lot of duplicated bugs

[plainheart]

Thanks for your suggestion. Though it's possible to mention this issue in the handbook or the FAQ page, I think it is mainly due to the third-party 'vue' and this is not a bug of ECharts. We need to read the documentation carefully and notice the warnings about the usage when using a third-party library. It's always good to report a bug without any external framework.