背景

• 做的一个对话交互的功能，根据后台返回的数据，渲染成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 元素的方式不同。

1. 使用 document.getElementById(‘myLine’)
   • 这种方式通过 id 属性来查找 DOM 元素。
   • 如果元素还没有被渲染到 DOM 树中（例如，在异步组件或动态渲染的情况下），这可能会导致 null 或者找不到元素的问题。
     适用于简单的页面结构或者确保元素已经被加载的情况。
2. 使用 this.$refs.chartContainer
   • 这种方式通过 Vue 的 ref 属性来引用 DOM 元素。
   • 更加可靠，特别是在组件内部使用时，因为 Vue 确保了当组件挂载后，通过 ref 获取的元素已经存在。
   • 推荐在 Vue 组件内部使用这种方式来获取元素，尤其是在组件挂载完成后初始化图表时。

总结

• 对于 Vue 开发者来说，使用 this.$refs 是更推荐的做法，因为它与 Vue 的生命周期更加契合，并且可以确保在操作 DOM 前元素已经被正确挂载。
• 如果你在 Vue 组件中初始化 ECharts 图表，建议使用 this.$refs 来获取容器元素。