先看效果图我的需求是可拖拽式echarts图标、拖动盒子放大echarts
html部分需要定义两个盒子、存放echarts图标的盒子外面包裹一个盒子
container为父盒子、下面会使用refs获取父盒子
chart为子盒子、同样会用refs获取
<div ref="container" class="containers">
<div class="echart" ref="chart"></div>
</div>
然后再new ResizeObserver(this.handleResize)监听父容器发生变化调用获取元素高度方法
mounted(){
this.handleResize();
// 监听父容器大小变化来调整图表大小
const resizeObserver = new ResizeObserver(this.handleResize);
resizeObserver.observe(this.$refs.container);
}
这边定义一个方法用来获取元素的宽高
methods: {
handleResize() {
if (this.$refs.container) {
const container = this.$refs.container;
const width = container.clientWidth;
const height = container.clientHeight;
// 设置图表大小并重绘
this.$nextTick(() => {
//这边的this.echarts就是子盒子的dom元素
this.echarts = this.$echarts.init(this.$refs.chart);
this.echarts.resize({ width, height });
});
}
},
},
页面销毁再去掉监听
beforeDestroy() {
const resizeObserver = new ResizeObserver(this.handleResize);
resizeObserver.unobserve(this.$refs.container);
},