背景
- 做的一个对话交互的功能，根据后台返回的数据，渲染成Echart图表展示
- 因为图表种类多，因此根据不同图表单独做了一个个vue组件，将数据根据展示类型传到这些子组件中进行渲染
- 无论哪种图表，第一次展示时都能正常展示，但是当第二次对话展示图表时就会失败，什么都不显示，全是空白
分析
- 经过断点、日志输出发现数据都能正常返回，因此跟后端没有关系
- 前端也能获取到数据，也不报什么错，Echart中的options数据也都正常，那么问题就是出现在元素选择上了，后来证明确实是这个问题
问题解决
-
最开始还以为是
setOption(option, true)时没有带这个true，但是想想也不对啊，这个是清楚脏数据的，所以写上这个true依然没有改变问题 -
原来的写法是在子组件选择元素时使用的是
this.$echarts.init(document.getElementById('myLine'));这种方式 -
后来换成
this.$echarts.init(this.$refs.chartContainer);这种方式就可以了
写法区别
在 Vue 中，this.$echarts.init 是用来初始化 ECharts 实例的方法。当你使用 document.getElementById('myLine') 和 this.$refs.chartContainer 作为参数传递给 init 方法时，主要的区别在于它们获取 DOM 元素的方式不同。
- 使用 document.getElementById(‘myLine’)
- 这种方式通过 id 属性来查找 DOM 元素。
- 如果元素还没有被渲染到 DOM 树中（例如，在异步组件或动态渲染的情况下），这可能会导致 null 或者找不到元素的问题。
适用于简单的页面结构或者确保元素已经被加载的情况。
- 使用 this.$refs.chartContainer
- 这种方式通过 Vue 的 ref 属性来引用 DOM 元素。
- 更加可靠，特别是在组件内部使用时，因为 Vue 确保了当组件挂载后，通过 ref 获取的元素已经存在。
- 推荐在 Vue 组件内部使用这种方式来获取元素，尤其是在组件挂载完成后初始化图表时。
总结
- 对于 Vue 开发者来说，使用
this.$refs是更推荐的做法，因为它与 Vue 的生命周期更加契合，并且可以确保在操作 DOM 前元素已经被正确挂载。 - 如果你在 Vue 组件中初始化 ECharts 图表，建议使用
this.$refs来获取容器元素。
