场景
项目中使用到chart组件,当改变外层容器的宽高时,需要重新绘制resize图表。
方案
1、使用JS原生resize方法,但是只有针对windows窗口对象改变时生效;
2、使用echarts的resize方法
3、推荐:使用element-resize-detector
安装
第一步:vue-cli 项目中安装
npm install element-resize-detector
第二步:按需引入
const eleResizeDetector = require("element-resize-detector")
第三步:Html中Dom
<div id="wrapper">
<div id="chart">
</div>
第四步:mounted中监听
let that = this;
let erd = eleResizeDetector ()
erd.listenTo(document.getElementById("wrapper"), function (element) {
let width = element.offsetWidth
let height = element.offsetHeight
that.$nextTick(function () {
console.log("Size: " + width + "x" + height)
//使echarts尺寸重置
that.$echarts.init(document.getElementById("chart")).resize()
})
})