vuejs 集成 echarts 的一些問題講解

微信號 gh_2c48b4842a93

        最近在做 Beetltex 的數據分析平臺，在這個過程經過使用 echarts 進行數據展示，由於應用使用 vuejs 開發前端，所以在集成 echarts 或多或少會碰到一些問題，在這裏主要講解一下碰到的問題和解決方法。

        在講解之前先分享一下新數據分析平臺的體驗效果。

接下來就說一下集成過程中的一些問題吧。

控件 ID

        在 vuejs 中往往會對常用的功能進行組件封裝，同樣爲了讓不同圖表複用所以也封裝成組件來使用。在這個封裝過程存在一個問題就是圖表元素 DIV 的 ID 問題，所以組件建構建圖表 DIV 的 ID 也必須確保唯一性。可以通過封裝一個簡單的函數來生成 ID

Vue.prototype.$getID = function () {
    page.controlid = page.controlid + 1;
    return page.controlid;
};

通過這個方法來獲取動態的元素 ID

mounted(){
     this.ChatID = "chat_" + this.$getID();
}
<div :id="ChatID">
</div>

初始化問題

        在使用 Vuejs 時很多時候會在 mounted() 方法中進行一些實始化，但如果在這裏實始化 echarts 就需要注意，畢竟 mounted 並不代表所有元素被構建，這時候會導致獲取元素失敗無法對 echarts 進行初始化操作。所以需要把 echarts 放到一個方法中根據情況手動調用進行，或者延時一下調用初始化；爲了方便選擇使用了 setTimeout 來初始化。

            setTimeout(() => {
                var dom = document.getElementById(this.ChatID);
                this.Chat = echarts.init(dom, 'macarons');
                this.Chat.setOption(this.ChatOption, true);
            }, 300);

顯示切換問題

        如果需要對圖表進行一個顯示切換，最好不要用 v-if 這樣的語法，因爲這樣的語法是不會在 DOM 中構建相關元素，引起 echarts 創建 Canvas 元素問題導致無法正常工作。最好的辦法是通過切換 Css 的方式來進行顯示切換，確保已構建的 DOM 元素內容沒有被更改。

自適應佈局

        很多時候窗體的大變化和組件切換後會導致 echarts 無法適應當前佈局，碰到這情況需要手動調用 echarts 的 resize 方法來進行重置顯示佈局。實際上在 SPA 應用中你難以確 echarts 使用在什麼地方，通過組件化後層次有多深，所以需要一個公共的行爲來觸發這一操作。

var __resizeHandlers = [];
function __addResizeHandler(handler) {
    __resizeHandlers.push(handler);
};
function __resize() {
    setTimeout(() => {
        __resizeHandlers.forEach(v => {
            v();
        });
    }, 100);
}
window.onresize = function () {
    __resizeHandlers.forEach(v => {
        v();
    });
};
Vue.prototype.$addResize = function (handler) {
    __addResizeHandler(handler);
};
Vue.prototype.$resize = function () {
    __resize();
};

實現一個簡單的 resize 註冊和調用機制即可，在使用 echarts 的組件定義以下代碼完美解決

this.$addResize(r => {
     if (this.Chat)
            this.Chat.resize();
});

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/x8TzPRqLzYVt1SWvpV5kIQ