Echarts跟随容器自适应大小
浏览器缩放,echarts图表大小可以随着浏览器窗口变化而改变。可以兼容各种分辨率。也可以获取echarts容器父级高度和宽度改变echarts图表的大小。
dom层放置一个echarts图表容器,
<template>
<div ref="main_div" >
<div id="ChartEcharts"></div>
</div>
</template>
JavaScript代码
mounted方法里监听页面变化的方法。geth方法是获取页面高度的方法。这里有一个递归调用。为啥递归调用呢?因为页面最开始加载echarts,echarts的容器还没准备好,echarts找不到容器。咱们就用递归算法什么时候有高度了宽度了就加载echarts,100毫秒调用一次。
javascript"> var ChartEcharts;
export default {
data() {
return {
main_div_w: 0,
main_div_h: 0
}
},
methods: {
initDoubleEncircle() {
let that = this;
//有的话就获取已有echarts实例的DOM节点。
ChartEcharts= echarts.getInstanceByDom(document.getElementById('ChartEcharts'));
// 如果不存在,就进行初始化。
if (ChartEcharts== null) {
ChartEcharts= echarts.init(document.getElementById('ChartEcharts'));
}
// 根据你的业务自己设计图表
let option = {...}
ChartEcharts.setOption(option)
},
get_echarts_h_w() {
var that = this;
that.$nextTick(function () {
that.geth()
})
},
geth() {
let that = this;
setTimeout(function () {
// 获取浏览器窗口或者其他的容器都行的
var docEl = document.documentElement;
that.main_div_w = docEl.clientWidth; //that.$refs.main_div.offsetWidth
that.main_div_h = docEl.clientHeight;//that.$refs.main_div.offsetHeight
if (that.main_div_h < 10) {
that.geth()
} else {
that.$nextTick(() => {
that.initDoubleEncircle();
ChartEcharts.resize({ width: (that.main_div_w * 0.3), height: (that.main_div_h * 0.1) });
})
}
}, 100)
},
},
mounted() {
var that = this
// 可以监听到浏览器窗口的变化
window.addEventListener('resize', function () {
that.get_echarts_h_w()
});
}
}
本人爱分享。文章有不对的地方,联系我哦。