Vue中echarts加载不出问题_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>
1

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

mounted(){
  this.initEchart()  
},
1
2
3

methods: {
 initEchart() {
   const chart = this.$refs.chart
   if (chart) {
     const myChart = this.$echarts.init(chart)
     const option = {...}
     myChart.setOption(option)
	 ......
   }
 }
}
1
2
3
4
5
6
7
8
9
10
11

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