Can't get DOM width or height

[Spike-Leung]

The type of this issue / Issue 类型

• Bug report / Bug 报告

Not introduced by ECharts / 非 ECharts 本身问题

Problems about ECharts itself are not handled in this repo. / 本 repo 不负责处理 ECharts 本身的问题。

• I've checked it's not a problem of ECharts itself. / 我已检查过，这个问题非 ECharts 本身的问题。

Details / 详情

if wrap vue-echart with a div which has v-show="false", will get an warning in console, says Can't get DOM width or height.

Because wrapper div's display is none , and x-vue-echarts has no width and height, so echarts emit a warning.

Vue version / Vue 版本

• Vue 3

How are you importing Vue-ECharts? / 你是如何引入 Vue-ECharts 的？

• Importing vue-echarts with a bundler environment / 在 webpack 等打包工具环境下引入 vue-echarts

The version of Vue-ECharts you are using / Vue-ECharts 的版本

6.0.0-rc.3

Reproduction link / 复现链接

repro link

[Justineo]

• I've checked it's not a problem of ECharts itself.

It is ECharts' own behavior so I guess we don't have much to do about this. Maybe you can add a v-if to only render the chart after the container is shown?

[Spike-Leung]

OK，thanks！

[groteck]

I have the same problem in Nuxt3 every time that I change from page to page @Justineo do you have an example about this?

Maybe you can add a v-if to only render the chart after the container is shown?

[frank-pian]

• I've checked it's not a problem of ECharts itself.

It is ECharts' own behavior so I guess we don't have much to do about this. Maybe you can add a v-if to only render the chart after the container is shown?

Is there an example ?

[vandelpavel]

Here you go:

<template>
  <v-chart v-if="showChart" :option="myOptions" autoresize />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import VChart from "vue-echarts";

const showChart = ref(false);

const myOptions = {
  // ...
};

onMounted(() => (showChart.value = true));
</script>

[darkbasic]

Maybe you can add a v-if to only render the chart after the container is shown?

@Justineo how is this supposed to help? The problem is that without specifically setting a width and an height to the VChart component it will trigger the warning and it won't render anything. The width and height that you set can be anything because if you set flex: 1 on VChart it will grow/shrink according to its parent and that will override whatever you've set. Yet you still have to provide something (anything) as width/height in order for it to render at all. I consider this a bug of vue-echarts, not echarts itself.

[Justineo]

@darkbasic If you think it’s a bug, please open a new issue with proper reproduction. Thanks.

[BenJackGill]

Here you go:

<template>
  <v-chart v-if="showChart" :option="myOptions" autoresize />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import VChart from "vue-echarts";

const showChart = ref(false);

const myOptions = {
  // ...
};

onMounted(() => (showChart.value = true));
</script>

This worked for me

[zetaraku]

The onMounted() trick didn't work for me.

According to apache/echarts#10478 (comment), this works for me:

<v-chart
  :init-options="{ height: 'auto', width: 'auto' }"
  :option="option"
/>