Vue中echarts加载不出问题

Vue中echarts加载不出问题

最近刚接触echarts，做了些基础的图表，也踩了好几个坑。总结一下echarts图加载出不来可能有以下两方面的问题（目前遇到的）：

1.没有给charts图设置宽高！

2.项目中echarts的id重复

如果init图表时，使用document.getElementById的方式获取元素的id，此时charts图的id一定不能重复！跨页面不重复！否则可能会出现charts图不显示的问题！！

较好的init方法是，采用ref的方式，而不要用原生的document.getElementById：

<div ref="chart" style="width:100%;height:376px"></div>

然后可以在mounted生命周期函数中实例化echarts对象（确保dom元素已经挂载到页面中）：

mounted(){
  this.initEchart()  
},

methods: {
 initEchart() {
   const chart = this.$refs.chart
   if (chart) {
     const myChart = this.$echarts.init(chart)
     const option = {...}
     myChart.setOption(option)
	 ......
   }
 }
}

参考链接：如何在vue中使用echart，以及使用的事项