el-table表格popover弹窗中显示Echarts图表

最近的项目中有个需求是需要在table表格中点击每行的某个单元格时，要弹出一个弹窗，弹窗中要插入Echarts图表。

大概如图中所示，样式有点丑，还没完善样式，见谅

说说我在实现这个需求时遇到的问题吧，在渲染的过程中echarts报错：Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be 0.For example, you may need to call this in the callback of window.onload.

一. Echarts画布渲染问题

1. 插入Echarts图表时，刚开始的时候图表canvas画布一直无法调节尺寸，渲染出来是正方形，且尺寸无法设定
2. 后来在网上查了很多资料，也请教了大佬，找到原因是因为popover弹窗还没完全展开时，Echarts图表的canvas画布已经开始渲染，但是这时获取不到popover弹窗的长宽尺寸，所以canvas画布渲染出现问题
3. 在网上看到有建议说是在popover的after-enter方法中调用插入图表的方法，试了一下，解决了，因为after-enter方法是popover显示动画播放完毕后触发，所以此时已经可以获取到弹窗的长宽尺寸了，canvas画布和图表渲染都没有问题了

代码展示

生成图表方法

二. 渲染Echarts图表时，多行table表格中，点击单元格只有最后一行的图表可以渲染出来，其他行的图表都没有渲染出来

1. 当时觉得很奇怪，明明每行的表格都是遍历的，而且是同一种方法，很奇怪只有最后一行可以渲染图表，别的行都不能渲染图表
2. 在网上看到一篇文章，有同行和我遇到一样的问题，他的大佬提示他是因为ref写死了，所以渲染有问题，因为ref相当于id值，每个都必须是独一无二的，而刚开始我的写法是直接写死了ref，所以出现了上述问题，后来将ref动态绑定后，每行都可以正常渲染图表了，问题得到解决

最后，通过ref获取DOM元素也踩了坑，如果是写死的ref，直接通过(this.$refs.val)就可以获取到，如果是动态绑定的ref值，要通过(this.$refs[val])的方式获取，希望能帮助大家