vue中動態加入ECharts圖表時，ECharts寬度自適應/不能100%撐開

首先上圖吧， 關於vue動態加入echarts時，寬度不能100%的問題，首先上圖

如圖，echarts中的canvas的width才500，顯然不對呀，右邊還有那麼大的一片空白，需要說明下交互步驟

看看代碼，
按鈕觸發click方法 顯示彈窗或者動態加載組件

   <span class="btn" @click="showecharts">showeCharts</span>

methods: {
    showecharts(){
        this.$prompt('Test', resolve => require(['@/components/ShowEChart.vue'], resolve))
    }
}

prompt 中的內容肯定是動態的

ShowEChart.vue

 <div>
     <EChart :chartData="chartData"/>
 </div>

export default {
    components: {
        //EChart.vue圖表內容
        EChart: resolve => require(['@/components/EChart.vue'], resolve),
    },
}

這裏應該echart能顯示如上圖了，但是寬度沒打開，
換成 imp 也是一樣的

import EChart from '@/components/EChart.vue';

思其原因還是prompt還沒渲染完整緊着echart也加載，echart的寬度根據具父元素的寬度適應的渲染，給父元素一個確定寬度也可以撐開，也不是好辦法，或者setTimeout也行

最好的還是利用vue的mounted 可以解決組件加載完成後

ShowEChart.vue 修改爲

<div>
    <component :is="EChart"></component>
</div>

exprot defautl {
    data() {
        return {
            EChart: null
        }
    },
    mounted() {
        this.$nextTick(() => { this.EChart= resolve => require(['@/components/EChart.vue''],resolve)}
        );
    }
}

來看下效果

**

從此王子和公主完美的生活在一起

**