Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啓一個隊列，並緩衝在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會被推入到隊列中一次。如果你想在 DOM 狀態更新後做點什麼，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員沿着“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這麼做。爲了在數據變化之後等待 Vue 完成更新 DOM ，可以在數據變化之後立即使用 Vue.nextTick(callback)
下面寫一個 柱狀圖自適應寬度的demo
直接上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
border: 1px solid skyblue;
}
.case{
width: 100%;
height: 200px;
}
.cWidth{
width : 400px;
}
</style>
</head>
<body>
<div id="app">
<div :class="{box : true, cWidth : changeWidth}">
<div class="case" id="demo"></div>
</div>
<button @click="changeW">改變寬</button>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.11/vue.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data : {
changeWidth : false,
chart : null
},
mounted(){
var demo = document.getElementById("demo");
let myChart = echarts.init(demo);
this.chart = myChart;
myChart.setOption({
title: { text: '在Vue中使用echarts' },
tooltip: {},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
},
methods :{
changeW : function(){
this.changeWidth = !this.changeWidth;//改變寬度
// this.chart.resize();//如果直接resize,柱狀圖並不會自適應寬度
this.$nextTick(()=>{//在Dom更新後調用resize,柱狀圖就會自適應
this.chart.resize();
})
}
}
})
</script>
</html>