Regarding the issue of width:100% failure of echarts chart in tab page

This article mainly introduces the problem about the width:100% failure of echarts chart in the tab page. Now I share it with you. Friends in need can refer to it.

When using echarts, write in The width of the chart in the tab page is clearly set to 100%, but it is actually only 100px wide on the page

<p id="chartMain" style="width:100%;height:300px"></p>

The reason is very simple. In the tab page, The parent container p of the chart is hidden (display: none). The chart cannot find this element when executing js initialization, so "100%" is automatically converted to "100", and the final calculated chart becomes 100px

Solution:

Find a parent container that will not be hidden during the tab page switching operation, take out the specific value of its width and assign it directly to the chart before initializing the chart

1 $("#chartMain").css('width',$("#TabContent").width());//获取父容器的宽度具体数值直接赋值给图表以达到宽度100%的效果
2 var Chart = echarts.init(document.getElementById('chartMain'));
3 
4 // 指定图表的配置项和数据
5 option = { ...配置项和数据 };
6 
7 // 使用刚指定的配置项和数据显示图表。
8 Chart.setOption(option);

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to solve the Tab height size in Center during ligerUI layout

The above is the detailed content of Regarding the issue of width:100% failure of echarts chart in tab page. For more information, please follow other related articles on the PHP Chinese website!