Bezüglich des Problems „width:100% fail“ des Echarts-Diagramms auf der Registerkartenseite

In diesem Artikel wird hauptsächlich das Problem mit der Breite des Echarts-Diagramms auf der Registerkartenseite vorgestellt. Jetzt kann ich es mit Ihnen teilen.

Wenn Sie Echarts verwenden, schreiben Sie es Die Breite des Diagramms in der Registerkartenseite ist eindeutig auf 100 % eingestellt, aber tatsächlich ist es auf der Seite nur 100 Pixel breit

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

Der Grund ist ganz einfach . Auf der Registerkartenseite ist der übergeordnete Container p des Diagramms ausgeblendet (Anzeige: keines), daher wird „100 %“ automatisch in „100“ und das endgültig berechnete Diagramm umgewandelt wird 100px

Lösung:

Suchen Sie einen übergeordneten Container, der während des Wechsels der Registerkartenseite nicht ausgeblendet wird, nehmen Sie den spezifischen Wert seiner Breite heraus und weisen Sie ihn direkt dem Diagramm zu, bevor Sie ihn initialisieren Diagramm

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);

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So ermitteln Sie die Tab-Höhengröße in der Mitte während des LigerUI-Layouts

Das obige ist der detaillierte Inhalt vonBezüglich des Problems „width:100% fail“ des Echarts-Diagramms auf der Registerkartenseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!