2021-05-27

el-dialog 与 echarts

过程

弹出的对话框里的 echarts 绘制宽度经常只有100px。
网上搜索原因出现在echarts父级元素出现display:none的情况，图表绘制时获取不到宽度将100%转化为了100px。参考https://www.cnblogs.com/zhaohongcheng/p/12918478.html

Painter.prototype._getWidth = function() {
         var root = this.root;
         var stl = root.currentStyle || document.defaultView.getComputedStyle(root);
         return ((root.clientWidth || parseInt(stl.width, 10)) - parseInt(stl.paddingLeft, 10) - parseInt(stl.paddingRight, 10)).toFixed(0) - 0;
 };　

常常出现在tab切换或者节点控制显示隐藏的情景。

解决办法

1. 尝试给el-dialog加上destroy-on-close在关闭时销毁子节点。
   没有效果，网上搜索如果想让el-dialog在关闭时销毁子节点，单单设置destroy-on-close效果不好，需要给el-dialog加上一个使用v-if控制的父节点。这样操作可以解决，但是由此el-dialog的动画效果失效。

2. 在echarts.setOption之后调用echarts.resize，可以解决。