<div class="echarts">
<IEcharts :option="bar" ref="echarts"></IEcharts>
</div>
mounted () {
this.selfAdaption ()
},
methods: {
//echarts自适应
selfAdaption () {
const self = this；
setTimeout(() => {
window.onresize = function () {
self.$refs.echarts.resize()
}
}, 10)
}
}
上面这段代码在出现多个echarts图表时只有一个图表自适应，修改了一下
<div class="echarts">
<IEcharts :option="bar" ref="echarts"></IEcharts>
</div>
mounted () {
this.selfAdaption ()；
},
methods: {
//echarts自适应
selfAdaption () {
let _this = this；
setTimeout(() => {
window.addEventListener('resize', function () {
_this.$refs.echarts.resize();
})
}, 10)
}
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------
在vue中引入多个echart图表时
<div class="linebox">
<div :id="id" style="width:100%; height:100%;" ref="Echart"></div>
</div>
methods: {
init(){
const self = this;//因为箭头函数会改变this指向，指向windows。所以先把this保存
setTimeout(() => {
window.addEventListener('resize', function() {
self.chart = self.$echarts.init(self.$refs.Echart);
self.chart.resize();
})
},10)
}
}