mui 折叠面板展示echart 图片问题

最新推荐文章于 2024-08-05 15:30:37 发布

libsaaa

最新推荐文章于 2024-08-05 15:30:37 发布

阅读量709

点赞数 1

文章标签： mui echart 折叠面板

本文链接：https://blog.csdn.net/lhqbs/article/details/90671928

版权

在移动端App开发中，使用mui折叠面板显示echart图表时遇到显示异常的问题。只有当面板初始状态下为打开（mui-active）时，图表才能正常显示。通过网上搜索的解决方案，尝试将图表div移出折叠面板会导致折叠功能失效。最终通过在页面初始化时，使用JavaScript动态设置图表div的width属性，成功解决了图表显示和折叠功能共存的问题。

摘要由CSDN通过智能技术生成

mui 折叠面板展示echart 图片问题

在实现app端数据展示时，需要在折叠面板展示echart图表，在实现过程中发现，除非页面初始化完成时，面板默认打开（mui-active）才可以加载正确图表，否则的话，图表样式就会乱掉。
从网上查询到可以将图表初始化的div放到外面，实际操作过程中发现，的确可以，但是折叠面板失效。
自己尝试发现如下方法可以实现，在页面初始化时，通过js进行width设置。代码如下：

经营分析
近四年纳税情况
近四年负税情况

				<li onchange="" class="mui-table-view-cell mui-collapse   ">
					<a class="mui-navigate-right" href="#">整体入库</a>
					
					 <div class="mui-collapse-content">
		            	<a style="padding-left: 27%;">近四年整体入库情况</a>
		            	<div style="height: 200px;margin: 0px;" id="