记录一次在Vue项目中使用Echarts图表遇见的问题

因为公司接手的项目需要大量的图表，然后选择使用了Echarts的图表，在使用过程中遇到了 一个问题，在这里记录一下

<div id="myecharts" style="width: 100%;height: 300px;"></div>
//加载图表的方法
mounted() {
this.getMyEcharts()
},
methods: {
getMyEcharts() {
var myChart=echarts.init(document.getElementById("myecharts"));
let option = {
color: ['#409eff'],
xAxis: {
type: 'category',
data: this.datas //vue data中定义的值，在此不再展示
},
yAxis: {
type: 'value'
},
series: [{
data: this.tables,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
markLine: {
lineStyle: {
normal: {
type: 'solid',
color: 'red'
}
},
data : [ {
type : 'average',
name : '平均值'
} ]
}
}]
};
myChart.setOption(option);
},
//点击事件，加载图表
handleNodeClick(){
this.getMyEcharts()
}
}

上边的代码中，用来加载echarts的dom是通过id来寻找的，之前使用这种办法，通过点击事件也是可以加载图表的，但是这次项目中就莫名奇妙的只能在mounted中可以加载图表，点击事件无法加载图表，后来查看官方文档，发现官方推荐通过ref寻找dom的方法来使用，于是我更改为使用ref来寻找dom的方法，发现图表可以通过点击事件来加载了，下面附上更改后的代码片段

<div ref="myecharts" style="width: 100%;height: 300px;"></div>
methods: {
getMyEcharts() {
var myChart=echarts.init(this.$refs.myecharts);
let option = {
color: ['#409eff'],
xAxis: {
type: 'category',
data: this.datas //vue data中定义的值，在此不再展示
},
yAxis: {
type: 'value'
},
series: [{
data: this.tables,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)'
},
markLine: {
lineStyle: {
normal: {
type: 'solid',
color: 'red'
}
},
data : [ {
type : 'average',
name : '平均值'
} ]
}
}]
};
myChart.setOption(option);
},
//点击事件，加载图表
handleNodeClick(){
this.getMyEcharts()
}
}

我在网上看到有人说造成这样的原因是因为页面结构太复杂导致的，但是我使用一个空页面测试后 也是这样，有没有大佬给解答一下，感激不尽！