apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.66k stars 19.61k forks source link

How does echarts fill the width of the parent element? #18964

Open nieyuan1980 opened 1 year ago

nieyuan1980 commented 1 year ago

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 commented 1 year ago

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