Vue里echarts根据页面大小动态调整/自适应
Vue里echarts根据页面大小动态调整/自适应
·
Vue里echarts根据页面大小动态调整/自适应
<template>
<div id="myChart" :style="{width: '100%', height: '400px'}"></div>
</template>
// 基于准备好的dom,初始化echarts实例
drawMyChart(){
let myChart = this.$echarts.init(document.getElementById("myChart"));
let option={...};
myChart.setOption(option);
}
mounted() {
this.drawMyChart();
this.resizefun = ()=>{
this.$echarts.init(document.getElementById('myChart')).resize();
//多个echarts则在此处添加
};
window.addEventListener('resize',this.resizefun);
}
//移除事件监听
beforeDestroy() {
window.removeEventListener('resize', this.resizefun);
this.resizefun = null
}
这样就会根据浏览器页面大小动态加载 echarts。
参考:
http://www.manongjc.com/detail/18-fslxgdrahydrwzp.html
https://www.cnblogs.com/moguzi12345/p/13322804.html
更多推荐
已为社区贡献2条内容
所有评论(0)