一、单个图表自适应窗口大小

原理:利用echarts中的resize函数
这里我的echarts 是绑定到了vuedata对象中,所以是this.chart
如果没有挂在到vue上 就正常写就完事了(懂的都懂,O(∩_∩)O哈哈~)


// 获取echarts对象
this.chart = echarts.init(this.$el, "macarons");

// 设置echarts属性(省略了)
this.chart.setOption({......})

//  重点:当窗口或者大小发生改变时执行resize,重新绘制图表 
window.onresize = this.chart.resize;

亲测,好使!!!!

二、多个图表自适应窗口大小

重点来了!!!
直接上代码,奥利给!

// 获取echarts对象
this.chart = echarts.init(this.$el, "macarons");

// 设置echarts属性(省略了)
this.chart.setOption({......})

// 保存this-----addEventListener中的function 的this指向发生了变更,所以我需要保存一下this
let that = this

//  当窗口或者大小发生改变时执行resize,重新绘制图表
window.addEventListener("resize", function () {
  that.chart.resize();
});

简单解释下原理,通过设置监听事件,监听resize事件,当其发生变化后执行echarts对象中的resize()
代码的语义还是很简单的,我这里是将echarts对象挂载到了data中才出现的that.chart
别懵,和你正常let myChart = this.$echarts.init(this.$el, "macarons");是一毛一样的,就是写法不同。

又是奥利给的一天,冲鸭!

Logo

前往低代码交流专区

更多推荐