數(shù)據(jù)可視化的時候用到echarts邪蛔，要想生成圖表能夠根據(jù)大小自適應(yīng)，就要用到echarts自己的resize方法扎狱。chartDemo是echarts實例侧到，this.$refs.chartContainerParent是echarts元素父級元素。
1淤击、頁面大小變化（window.onresize）
window.onresize=() => {
if (chartDemo) chartDemo.resize();
}
2匠抗、上面的寫法遇到有左導(dǎo)航欄的，導(dǎo)航欄打開關(guān)閉切換就歇菜了污抬。這時候就會用到resize-detector這個插件去監(jiān)聽echarts實例元素的父級元素汞贸。resize-detector是個npm插件，地址：https://www.npmjs.com/package/resize-detector。用法上地址有矢腻，但還是要寫一下我在vue里的使用??门驾。
<div class="body" ref="chartContainerParent">
<div ref="chartCantainer" style="width: 100%;height:238px;"></div>
</div>
mounted() {//上來就給他監(jiān)聽上，看他還不自適應(yīng)呢
addListener(this.$refs.chartContainerParent, this.resize);
},
beforeDestroy() { //一定要在這個生命周期銷毀踏堡，不然在銷毀時找不到元素報錯猎唁，不信你試試??
removeListener(this.$refs.chartContainerParent, this.resize);
if (this.chart.dispose) this.chart.dispose();
},
methods: {
resize() {
if (this.chart.resize) this.chart.resize();
}
}
網(wǎng)上很多都是window.onresize，所以就把第二種寫出來了顷蟆，希望對大家能有幫助，有用就點個贊么腐魂，靚仔靚女??帐偎。
