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

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

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

说说我在实现这个需求时遇到的问题吧

一. 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动态绑定后，每行都可以正常渲染图表了，问题得到解决

这是我第一次接触Echarts，而且直接是在弹窗中插入，所以遇到的问题还是挺多的，不过还好都找到了解决办法，感谢网上大家无私的分享，以及大佬的点拨，多谢

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

参考文章：https://blog.csdn.net/qq_41612675/article/details/101075987
特别感谢