Echarts 如何设置图表自适应窗口大小
一、单个图表自适应窗口大小原理:利用echarts中的resize函数这里我的echarts 是绑定到了vue的data对象中,所以是this.chart如果没有挂在到vue上 就正常写就完事了(懂的都懂,O(∩_∩)O哈哈~)// 获取echarts对象this.chart = echarts.init(this.$el, "macarons");// 设置echarts属性(省略了)this.
·
一、单个图表自适应窗口大小
原理:利用
echarts
中的resize
函数
这里我的echarts
是绑定到了vue
的data
对象中,所以是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");
是一毛一样的,就是写法不同。
又是奥利给的一天,冲鸭!
更多推荐
已为社区贡献2条内容
所有评论(0)