How does echarts fill the width of the parent element?

[nieyuan1980]

What problem does this feature solve?

I have encapsulated an electrocharts component in Vue to display charts.

It receives three parameters from the parent component: chartWidth, chartHeight, and options.

When the chart is wrapped in a b-tab (bootstrap), I use "1000px" for the height of the chart, and it performs normally. When I use '100%', it does not occupy the entire width of the parent element.

And the browser gives an warn: 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

I think it's because the b-tab has not been rendered yet, which prevents the component from obtaining the width of the parent element.

So how should this situation be resolved?

Looking forward to everyone's help, thank you!

What does the proposed API look like?

The code is here:

`

`

I hope the chart can cover the entire screen

[plainheart]

You can try to call chart.resize() again function after changing the tab to ensure ECharts can get the width and height correctly.