前言
最近在做Beetlex的數(shù)據(jù)分析平臺，在開發(fā)這個產(chǎn)品過程中涉及到大量的數(shù)據(jù)圖表展示功能；由于產(chǎn)品前端使用的是vuejs開發(fā)，所以在集成echarts或多或少會碰到一些問題，在這里主要講解一下碰到的問題和解決方法。
在講解之前先分享一下實際使用效果。具體可以查看 http://data.beetlex.io
控件ID
在vuejs中往往會對常用的功能進行組件封裝，同樣為了讓不同圖表復(fù)用所以也封裝成組件來使用。在這個封裝過程存在一個問題就是圖表元素DIV的ID問題，所以組件建構(gòu)建圖表DIV的ID也必須確保唯一性。可以通過封裝一個簡單的函數(shù)來生成ID
|
1
2
3
4
|
Vue.prototype.$getID = function () { page.controlid = page.controlid + 1; return page.controlid;}; |
通過這個方法來獲取動態(tài)的元素ID
|
1
2
3
4
5
6
|
mounted(){ this.ChatID = "chat_" + this.$getID();}<div :id="ChatID">?</div> |
初始化問題
在使用Vuejs時很多時候會在mounted()方法中進行一些實始化，但如果在這里實始化echarts就需要注意，畢竟mounted并不代表所有元素被構(gòu)建，這時候會導(dǎo)致獲取元素失敗無法對echarts進行初始化操作。所以需要把echarts放到一個方法中根據(jù)情況手動調(diào)用進行，或者延時一下調(diào)用初始化；為了方便選擇使用了setTimeout來初始化。
|
1
2
3
4
5
|
setTimeout(() => { var dom = document.getElementById(this.ChatID); this.Chat = echarts.init(dom, 'macarons'); this.Chat.setOption(this.ChatOption, true);}, 300); |
顯示切換問題
如果需要對圖表進行一個顯示切換，最好不要用v-if這樣的語法，因為這樣的語法是不會在DOM中構(gòu)建相關(guān)元素，引起echarts創(chuàng)建Canvas元素問題導(dǎo)致無法正常工作。最好的辦法是通過切換Css的方式來進行顯示切換，確保已構(gòu)建的DOM元素內(nèi)容沒有被更改。
自適應(yīng)布局
很多時候窗體的大變化和組件切換后會導(dǎo)致echarts無法適應(yīng)當前布局，碰到這情況需要手動調(diào)用echarts的resize方法來進行重置顯示布局。實際上在SPA應(yīng)用中情況復(fù)雜很多，全屏顯示，窗體要換，再加組件化后多層次嵌套，所以難以確定echarts使用在什么地方。為了滿足不同情況的需求，需要一個公共的行為來觸發(fā)這些變更。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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注冊和調(diào)用機制即可，在使用echarts的組件定義以下代碼完美解決
|
1
2
3
4
|
this.$addResize(r => { if (this.Chat) this.Chat.resize();}); |
附：Echarts下載使用
你可以通過以下幾種方式獲取 ECharts。
1，從 Apache ECharts (incubating) 官網(wǎng)下載界面 獲取官方源碼包后構(gòu)建。
2，在 ECharts 的 GitHub 獲取。
3，通過 npm 獲取 echarts，npm install echarts --save，
4，通過 jsDelivr 等 CDN 引入
出現(xiàn)如下圖則成功。
引入
（下載完的前提）
1，通過標簽方式直接引入構(gòu)建好的 echarts 文件：
|
1
2
3
4
5
6
7
8
|
<!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script></head></html> |
2，全局引用
在vue的main.js中
|
1
2
3
|
// 引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echarts |
3，直接在組件內(nèi)引入echarts,
(如果你想在其他組件內(nèi)用echarts，則必須重新引入)
|
1
|
import echarts from “echarts”; |
總結(jié)
到此這篇關(guān)于vue.js集成echarts遇到問題的文章就介紹到這了,更多相關(guān)vue.js集成echarts問題內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://www.cnblogs.com/smark/p/14651892.html
