快捷導(dǎo)航

vue.js集成echarts時(shí)遇到的一些問(wèn)題總結(jié)

更新時(shí)間：2021年04月13日 10:38:46 作者：beetlex

這篇文章主要給大家總結(jié)介紹了關(guān)于vue.js集成echarts遇到的一些問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近在做Beetlex的數(shù)據(jù)分析平臺(tái)，在開發(fā)這個(gè)產(chǎn)品過(guò)程中涉及到大量的數(shù)據(jù)圖表展示功能；由于產(chǎn)品前端使用的是vuejs開發(fā)，所以在集成echarts或多或少會(huì)碰到一些問(wèn)題，在這里主要講解一下碰到的問(wèn)題和解決方法。

在講解之前先分享一下實(shí)際使用效果。具體可以查看 http://data.beetlex.io

控件ID

在vuejs中往往會(huì)對(duì)常用的功能進(jìn)行組件封裝，同樣為了讓不同圖表復(fù)用所以也封裝成組件來(lái)使用。在這個(gè)封裝過(guò)程存在一個(gè)問(wèn)題就是圖表元素DIV的ID問(wèn)題，所以組件建構(gòu)建圖表DIV的ID也必須確保唯一性?？梢酝ㄟ^(guò)封裝一個(gè)簡(jiǎn)單的函數(shù)來(lái)生成ID

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

通過(guò)這個(gè)方法來(lái)獲取動(dòng)態(tài)的元素ID

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

</div>

初始化問(wèn)題

在使用Vuejs時(shí)很多時(shí)候會(huì)在mounted()方法中進(jìn)行一些實(shí)始化，但如果在這里實(shí)始化echarts就需要注意，畢竟mounted并不代表所有元素被構(gòu)建，這時(shí)候會(huì)導(dǎo)致獲取元素失敗無(wú)法對(duì)echarts進(jìn)行初始化操作。所以需要把echarts放到一個(gè)方法中根據(jù)情況手動(dòng)調(diào)用進(jìn)行，或者延時(shí)一下調(diào)用初始化；為了方便選擇使用了setTimeout來(lái)初始化。

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

顯示切換問(wèn)題

如果需要對(duì)圖表進(jìn)行一個(gè)顯示切換，最好不要用v-if這樣的語(yǔ)法，因?yàn)檫@樣的語(yǔ)法是不會(huì)在DOM中構(gòu)建相關(guān)元素，引起echarts創(chuàng)建Canvas元素問(wèn)題導(dǎo)致無(wú)法正常工作。最好的辦法是通過(guò)切換Css的方式來(lái)進(jìn)行顯示切換，確保已構(gòu)建的DOM元素內(nèi)容沒(méi)有被更改。

自適應(yīng)布局

很多時(shí)候窗體的大變化和組件切換后會(huì)導(dǎo)致echarts無(wú)法適應(yīng)當(dāng)前布局，碰到這情況需要手動(dòng)調(diào)用echarts的resize方法來(lái)進(jìn)行重置顯示布局。實(shí)際上在SPA應(yīng)用中情況復(fù)雜很多，全屏顯示，窗體要換，再加組件化后多層次嵌套，所以難以確定echarts使用在什么地方。為了滿足不同情況的需求，需要一個(gè)公共的行為來(lái)觸發(fā)這些變更。

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();
};

實(shí)現(xiàn)一個(gè)簡(jiǎn)單的resize注冊(cè)和調(diào)用機(jī)制即可，在使用echarts的組件定義以下代碼完美解決

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

附：Echarts下載使用

你可以通過(guò)以下幾種方式獲取 ECharts。

1，從 Apache ECharts (incubating) 官網(wǎng)下載界面獲取官方源碼包后構(gòu)建。

2，在 ECharts 的 GitHub 獲取。

3，通過(guò) npm 獲取 echarts，npm install echarts --save，

4，通過(guò) jsDelivr 等 CDN 引入

出現(xiàn)如下圖則成功。

引入

（下載完的前提）

1，通過(guò)標(biāo)簽方式直接引入構(gòu)建好的 echarts 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

2，全局引用

在vue的main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3，直接在組件內(nèi)引入echarts,

(如果你想在其他組件內(nèi)用echarts，則必須重新引入)

import echarts from “echarts”;

總結(jié)

到此這篇關(guān)于vue.js集成echarts遇到問(wèn)題的文章就介紹到這了,更多相關(guān)vue.js集成echarts問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js集成echarts時(shí)遇到的一些問(wèn)題總結(jié)

前言

控件ID

初始化問(wèn)題

顯示切換問(wèn)題

自適應(yīng)布局

附：Echarts下載使用

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具