定制开发echarts图表设置宽度100%结果为100px

当外层div定制开发盒子设置宽度为100%时,可echarts定制开发渲染出来宽度只有100px,定制开发这种情况大多数echarts所在的div设置了display:none,定制开发获取不到外部盒子的宽度。

定制开发这里可以通过echarts定制开发源码获取宽度的行为来解释

定制开发究其原因就是出现在了图表设置了display:none属性上(属性含义:不为被隐藏的对象保留其物理空间,关闭元素的显示,并且所有后代元素不显示)

我们通过浏览器打断点可以看清楚echarts在计算图表宽度这部分的逻辑$("#chart").css("width",$("#chart").width());,("#chart")指的是当前绘制图表的div,获取当前元素的宽度后把固定宽度赋值给图表。

但是为什么我们宽度设置了100%,结果变为了100px? 这里上源码可以解释:

源码解读:当echarts绘制表格(也就是执行init方法)计算宽度的时候,由于初始化图表时外层div盒子的属性为display:none,所以无法获取到盒子的(可视化宽度),而parseInt(stl.width,10)将宽度100%转换成了100(这里的stl.width,就是外层的div的样式中的width属性,因为我们初始时设置了100%,所以这里可以获取到),所以计算出的图表宽度为100px。

(源码这里没有获取到clientWidth(可视化宽度,因为display:none属性,无法获取到,就会将设置的width:100%转换称100px))

解决方法:外部div盒子必须要在init初始化前就已经存在于中(也就是已经挂载)。

不要 在display:none的情况下(包括v-show、v-if后面的逻辑值是false时),一上来就初始化(init)echart。只要一初始化,就会执行源码计算出echart的宽度。

如何确保dom已经存在再去初始化呢:这里可以监视display属性(一般在项目中是通过v-if或者v-show,所以这里监视的是掌控盒子是否显示的变量 ,在监视中(watch),要配合nextTick方法使用,这样才能完全确保初始化之前,外部盒子已经存在于dom树中。(一般初始化过程是写在nextTick中)

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发