vue 中解决多个echarts图表自适应问题
<div class="echarts"> <IEcharts :option="bar" ref="echarts"></IEcharts></div>mounted () {this.selfAdaption ()},methods: {//echarts自适应selfA...
·
<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)
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)