タブページのechartsチャートの幅:100%失敗の問題について

この記事では主にタブページのechartsチャートの幅100%の失敗について紹介しますので、困っている友達は参考にしてください

echartsを使用するときは、タブにチャートの幅を書き込みます。ページ 明らかに 100% に設定されていますが、実際にはページ上の幅は 100px しかありません

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

理由は非常に単純で、タブページではチャートの親コンテナ p が非表示になっています (表示: なし)。 )、チャートは js を実行しています。初期化中にこの要素が見つからなかったため、「100%」が自動的に「100」に変換され、最終的に計算されたチャートは 100px になりました

解決策:

機能しない要素を見つけてくださいタブページの切り替え操作中 非表示の親コンテナについては、チャートを初期化する前に、その幅の特定の値を取り出してチャートに直接割り当てます

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

以上がこの記事の全内容だと思います。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

ligerUI レイアウト中に中央のタブの高さのサイズを解決する方法

以上がタブページのechartsチャートの幅:100%失敗の問題についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。