ホームページ > 記事 > ウェブフロントエンド > タブページの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 サイトの他の関連記事を参照してください。