탭 페이지의 echarts 차트의 width:100% 오류 문제에 대해

이 글에서는 주로 탭 페이지의 echarts 차트의 너비에 대한 문제를 소개합니다. 이제 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다

echarts를 사용할 때 탭에 차트 너비를 적어주세요. page 분명히 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 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

ligerUI 레이아웃 중 중앙의 탭 높이 크기를 해결하는 방법

위 내용은 탭 페이지의 echarts 차트의 width:100% 오류 문제에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!