Can't get DOM width or height

[carterli]

Can't get DOM width or height

[xzegga]

Any luck with this issue. Today at 2023 I am still having this issue but with React.
[ECharts] Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

[slavaGanzin]

@xzegga you could set width or height in init(element, theme, {width: 1000, height: 1000})

[yfragata]

try this on your container CSS:

#chart-container {
position: relative;
height: 100vh;
overflow: hidden;
}

[CarterLi]

In the point 3 where shall I place the line with (this.$refs.chart as VueEcharts).refreshOption();?

You don't need to call refreshOption when vue-echarts is created. You need to call refreshOption when the option is updated.

However, I got this error

It was strange. Could you provide more info such as stack trace and more importantly the status of vue-echarts element when the exception was thrown?

[ywiyogo]

Thanks @CarterLi for the hint checking the element. This is the status of my vue-charts element:
<div class="vue-echarts" style="height: 500px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1636225806299"><div style="position: relative; width: 0px; height: 500px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="0" height="500" style="position: absolute; left: 0px; top: 0px; width: 0px; height: 500px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div>

I created that with this vue template code just like in your README.md:

<template>
  <vue-echarts :option="line" style="height: 500px;" ref="chart" />
</template>

The error is gone after I add the width, e.g. style="height: 500px; width: 1000px;".

[CarterLi]

The root element of vue-echarts is div, it should act as width: 100% by default.

[pearcemc]

I also had this with React (inside some Joy UI component).

Following slava's suggestion, this call fixed it up for me:

    <ReactEcharts
      option={option}
      style={{ width: '300px', height: '300px', minHeight: '300px', minWidth: '300px'}}
    />