解决ECharts图表宽度100%渲染为100px的问题

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，程序无法获取到盒子的clientWidth（可视化宽度）。此时，parseInt(stl.width, 10)将宽度值100%转换成了数字100（这里的stl.width指外层div样式中的width属性，因为初始设置了100%，所以能获取到该字符串值），因此计算出的图表宽度为100px。

（源码中由于未获取到clientWidth，因为display:none属性导致无法获取，从而将设置的width:100%转换成了100px）

解决ECharts宽度异常的方法

解决方法是：外部div容器必须在init初始化之前就已经存在于DOM树中（即已经完成挂载）。

不要在display:none的情况下（包括v-show、v-if后面的逻辑值为false时）立即初始化init ECharts。一旦执行初始化，就会运行源码计算出ECharts的宽度。

如何确保在DOM存在后再进行初始化？可以监视display属性（通常在项目中通过v-if或v-if控制，因此这里监视的是控制盒子是否显示的变量）。在监视函数（watch）中，需配合nextTick方法使用，这样才能完全确保在初始化之前，外部盒子已经存在于DOM树中（通常初始化过程写在nextTick中）。

ECharts百分比宽度设置示例

附：如何将ECharts宽度设置为百分比

var width = $("#tabitem2").width()*0.45;
$("#mainPay").css("width", width);
$("#mainDetail").css("width", width);
$("#main").css("width", width);
$("#mainItem").css("width", width);
$("#mainBehavior").css("width", width);
$("#mainBehaviorPay").css("width", width);
$("#mainDepartment").css("width", width);
$("#mainDoctor").css("width", width);

var myChartPay = echarts.init(document.getElementById('mainPay'));
var myChartDetail = echarts.init(document.getElementById('mainDetail'));
var myChartDepartment = echarts.init(document.getElementById('mainDepartment'));
var myChart = echarts.init(document.getElementById('main'));
var myChartItem = echarts.init(document.getElementById('mainItem'));
var myChartDoctor = echarts.init(document.getElementById('mainDoctor'));
var myChartBehavior = echarts.init(document.getElementById('mainBehavior'));
var myChartBehaviorPay = echarts.init(document.getElementById('mainBehaviorPay'));

说明如下：

这里有一个div，class为tabitems，将其宽度设置为0.45倍于该容器的宽度。

然后对八个图表设置宽度为width。因为tabitem2的宽度是动态的，所以每次屏幕宽度改变时，都会重新计算该宽度并赋值。

总结

到此这篇关于ECharts图表设置宽度100%结果为100px的文章就介绍到这了，更多相关ECharts图表宽度100%为100px内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！