1、安装插件
npm install element-resize-detector
2、引入
单页面引入：
import elementResizeDetectorMaker from 'element-resize-detector'
main.js引入：
import ElementResizeDetectorMaker from "element-resize-detector"
Vue.prototype.$erd = ElementResizeDetectorMaker()
3、页面上使用
//chartBox4是外层盒子，我们就监控它的大小来判定是否需要重置图表
//多个的话子组件的id记得写成不同的
//就像我这样后缀1，2，3，4都可以，不然会识别出错
<div id="chartBox4"
class="chart_box3"
:style="{height:'300px',width:'100%'}">
//这个chart就是我们的图表
<div id="chart"/>
</div>
4、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)
},
若是全局引用，watchSize里面的
var erd = elementResizeDetectorMaker()
//监听盒子的变化
erd.listenTo(document.getElementById('chartBox4'), function (element) {
//调用方法，重置chart大小
_this.chartssize(chart)
})
替换为
this.$erd.listenTo(
document.getElementById("headquarters-analysisOperating"),
function (element) {
//调用方法，重置chart大小
_this.chartssize();
}
);
5、在mouted钩子函数中加入调用方法
mounted() {
//加入这条，不是只有这条
this.watchSize()
},
