vue监听div大小改变多个echart大小,使echart自适应div的大小且不冲突
我们在写echart图表时会遇到其不会根据窗口大小的变更而自适应界面的问题
第一种问题:单个echart,不会根据窗口大小的变更而变更
第二种问题:多个echart,不会根据窗口大小的变更而变更
第三种问题:多个echart,不会根据父组件的div大小的变更而变更
以下给出解决方案,三种都能解决掉,如果有优化余地请留言提醒一下
我们先通过下载element-resize-detector用来监听dom元素(如div)
在控制台输入
npm install element-resize-detector
然后在vue文件中引入它,位置在哪就不用我说了吧
import elementResizeDetectorMaker from 'element-resize-detector'
接下来,我们将eChart组件的外面套一层div,以方便监控div
//chartBox4是外层盒子,我们就监控它的大小来判定是否需要重置图表
//多个的话子组件的id记得写成不同的
//就像我这样后缀1,2,3,4都可以,不然会识别出错
<div id="chartBox4"
class="chart_box3"
:style="{height:'300px',width:'100%'}">
//这个chart就是我们的图表
<div id="chart"/>
</div>
然后我们在methods钩子函数中加入以下两个方法
watchSize() {
//这里获取节点,不然到方法里获取就麻烦了
var chart = document.getElementById('chart')
//这里this要定义一下,不然到监听里就会冲突
const _this = this
var erd = elementResizeDetectorMaker()
//监听盒子的变化
erd.listenTo(document.getElementById('chartBox4'), function (element) {
//调用方法,重置chart大小
_this.chartssize(chart)
})
},
chartssize(chart) {
//获取盒子的宽度跟高度,这里用clientWidth是为了将100%转换成px,然后赋值给chart的长宽
chart.style.width = document.getElementById('chartBox4').clientWidth
chart.style.height = document.getElementById('chartBox4').clientHeight
//进行重置
setTimeout(() => {
this.chart.resize()
}, 20)
},
写完了别忘了在mouted钩子函数中加入调用方法
mounted() {
//加入这条,不是只有这条
this.watchSize()
},