vue.js集成echarts時遇到的一些問題總結
前言
最近在做Beetlex的數(shù)據(jù)分析平臺，在開發(fā)這個產品過程中涉及到大量的數(shù)據(jù)圖表展示功能；由于產品前端使用的是vuejs開發(fā)，所以在集成echarts或多或少會碰到一些問題，在這里主要講解一下碰到的問題和解決方法。
在講解之前先分享一下實際使用效果。具體可以查看 http://data.beetlex.io
控件ID
在vuejs中往往會對常用的功能進行組件封裝，同樣為了讓不同圖表復用所以也封裝成組件來使用。在這個封裝過程存在一個問題就是圖表元素DIV的ID問題，所以組件建構建圖表DIV的ID也必須確保唯一性?？梢酝ㄟ^封裝一個簡單的函數(shù)來生成ID
Vue.prototype.$getID = function () {
page.controlid = page.controlid + 1;
return page.controlid;
};
通過這個方法來獲取動態(tài)的元素ID
mounted(){
this.ChatID = "chat_" + this.$getID();
}
<div :id="ChatID">
</div>
初始化問題
在使用Vuejs時很多時候會在mounted()方法中進行一些實始化，但如果在這里實始化echarts就需要注意，畢竟mounted并不代表所有元素被構建，這時候會導致獲取元素失敗無法對echarts進行初始化操作。所以需要把echarts放到一個方法中根據(jù)情況手動調用進行，或者延時一下調用初始化；為了方便選擇使用了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創(chuàng)建Canvas元素問題導致無法正常工作。最好的辦法是通過切換Css的方式來進行顯示切換，確保已構建的DOM元素內容沒有被更改。
自適應布局
很多時候窗體的大變化和組件切換后會導致echarts無法適應當前布局，碰到這情況需要手動調用echarts的resize方法來進行重置顯示布局。實際上在SPA應用中情況復雜很多，全屏顯示，窗體要換，再加組件化后多層次嵌套，所以難以確定echarts使用在什么地方。為了滿足不同情況的需求，需要一個公共的行為來觸發(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();
};
實現(xiàn)一個簡單的resize注冊和調用機制即可，在使用echarts的組件定義以下代碼完美解決
this.$addResize(r => {
if (this.Chat)
this.Chat.resize();
});
附：Echarts下載使用
你可以通過以下幾種方式獲取 ECharts。
1，從 Apache ECharts (incubating) 官網(wǎng)下載界面 獲取官方源碼包后構建。
2，在 ECharts 的 GitHub 獲取。
3，通過 npm 獲取 echarts，npm install echarts --save，
4，通過 jsDelivr 等 CDN 引入
出現(xiàn)如下圖則成功。
引入
（下載完的前提）
1，通過標簽方式直接引入構建好的 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，直接在組件內引入echarts,
(如果你想在其他組件內用echarts，則必須重新引入)
import echarts from “echarts”;
總結
到此這篇關于vue.js集成echarts遇到問題的文章就介紹到這了,更多相關vue.js集成echarts問題內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于如何通過一個簡單的例子學會vuex與模塊化的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
這篇文章主要介紹了vue3 表單搜索內容回顯到地址欄的實例代碼,地址欄輸入內容回顯到form表單,同理表單輸入內容也要回顯到地址欄中,本文結合實例代碼介紹的非常詳細,需要的朋友可以參考下2023-09-09
vue中 el-table每個單元格包含多個數(shù)據(jù)項處理
vue項目中,我們需要在el-table中顯示數(shù)組數(shù)據(jù),有的時候,需要在一個單元格中顯示多條數(shù)據(jù),如何實現(xiàn)呢,對vue el-table單元格相關知識感興趣的朋友一起看看吧2023-11-11
vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標、事件等方式
這篇文章主要介紹了vue2項目實現(xiàn)自定義右鍵菜單,可添加圖標、事件等方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
ESLint是一個代碼檢查工具,用來檢查你的代碼是否符合指定的規(guī)范,下面這篇文章主要給大家介紹了關于Vue項目中ESLint配置(VScode)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了Vue pinia模塊化全局注冊，Pinia是Vue.js團隊成員專門為Vue開發(fā)的一個全新的狀態(tài)管理庫，并且已經(jīng)被納入官方github2023-02-02
下面小編就為大家分享一篇使用vue-router設置每個頁面的title方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了基于vue2.x的電商圖片放大鏡插件的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要為大家詳細介紹了vue基于echarts實現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
解決vue中無法動態(tài)修改jqgrid組件 url地址的問題
下面小編就為大家分享一篇解決vue中無法動態(tài)修改jqgrid組件 url地址的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03