Concernant la question de la largeur : échec à 100 % du graphique echarts sur la page à onglet

Cet article présente principalement le problème de la largeur : échec à 100 % du graphique echarts dans la page à onglet. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Lorsque vous utilisez des echarts, écrivez-le. La largeur du graphique dans la page à onglet est clairement définie sur 100 %, mais elle ne fait en réalité que 100 px de large sur la page

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

La raison est très simple, sur la page à onglet, le conteneur parent p du graphe est masqué (affichage : aucun), le graphe ne trouve pas cet élément lors de l'initialisation js, donc "100%" est automatiquement converti en "100", et le résultat final le graphique calculé devient 100px

Solution :

Trouvez un conteneur parent qui ne sera pas masqué lors de l'opération de changement de page à onglet, retirez la valeur spécifique de sa largeur et attribuez-le directement au graphique avant initialisation du graphique.

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

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois !

Recommandations associées :

Comment résoudre la taille de la hauteur de l'onglet au centre lors de la mise en page ligerUI

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!