做一個可複用的 echarts-vue 元件（延遲動畫載入）
阿新 • • 發佈：2018-11-14
在 vue 專案使用 echarts 的場景中，以下三點不容忽視：1. 視覺化的資料往往是非同步載入的；2. 若一個頁面存在大量的圖表（ 尤其當存在關係圖和地圖時 ），往往會導致該頁面的渲染速度很慢並可能在幾秒內卡死，產生極差的使用者體驗。3. 引入 echarts 元件導致編譯後的檔案過大從而使得首次訪問的載入極慢。關於第三點，大家可以參考之前的撰文 優化 Vue 專案編譯檔案大小。以下針對上述前兩點，給出資料非同步、延遲渲染的 echarts vue 元件的設計和實現方式，並對實現之中可能存在的問題進行介紹。
1. 抽離 echarts 公共部分形成基礎元件
1.1 調研公共部分
首先，我們需要把 echarts 使用中公共的部分抽離出來，形成基礎元件。
讓我們在 官網 - 5 分鐘上手 ECharts 教程中找到使用 echarts 的步驟：
# 1. 獲取一個用於掛在 echarts 的 DOM 元素 let $echartsDOM = document.getElementById('echarts-dom') # 2. 初始化 let myEcharts = echarts.init($echartsDOM) # 3. 設定配置項 let option = {...} # 4. 為 echarts 指定配置 myEcharts.setOption(option)
注：在 Vue 中，首先我們需要使用 import echarts from 'echarts' 以引入 echarts。
由上可知，在 echarts 使用中，除第三步設定配置項以外，其他的步驟都是重複的，即可以抽離出來放入元件中統一實現。
注：其實 option 配置中也存在可以抽離的部分，比如我們可以將 echarts 的顏色、散點大小、折線粗細等提取出來統一賦值，以保證 echarts 風格的統一。但由於不同型別的 ehcarts 圖的顏色配置方式不同，因而實現起來相對繁瑣，這裡不進行說明，有興趣的同學可以自行嘗試。
1.2 實現 echarts 功能
首先我們書寫一個簡單 ehcart.vue
<style scoped>
.echarts {
width: 100%;
height: 100%;
}
</style>
<template>
<div>
<div class="echarts" id="echarts-dom"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'echarts',
data() {
return {}
},
mounted() {
let $echartsDOM = document.getElementById('echarts-dom')
let myEcharts = echarts.init($echartsDOM)
let option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
myEcharts.setOption(option)
}
}
</script>然後在App.vue中引入這一元件，並設定 echarts 的寬高：
<style>
.echarts-container{
width: 100%;
height: 20rem;
}
</style>
<template>
<div id="app">
<i-echart class="echarts-container"></i-echart>
</div>
</template>
<script>
import iEchart from './components/echart'
export default {
name: 'app',
components: {
iEchart
}
}
</script>重新整理頁面後，即可看到柱狀圖。
1.3 元件化
由於我們需要抽離 option 部分，最好的方式是將其作為元件的屬性，即 props 交由呼叫方配置：
# echart.vue
import echarts from 'echarts'
export default {
name: 'echarts',
props: {
option: {
type: Object,
default(){
return {}
}
}
},
data() {
return {}
},
mounted() {
let $echartsDOM = document.getElementById('echarts-dom')
let myEcharts = echarts.init($echartsDOM)
let option = this.option
myEcharts.setOption(option)
}
}
1.4 呼叫元件
然後我們可以將 option 配置抽離到元件呼叫方，並通過「傳參」的方式進行呼叫：
<i-echart :option="option" class="echarts-container"></i-echart>
1.5 提高元件強壯型
之前我們注意到，在 option 引數中，我們給出了預設值 {}，即空物件。這樣做其實是有問題的，即在 echarts 中，如果傳入的 option 配置物件不含有 series 鍵，就會丟擲錯誤：
Error: Option should contains series.預設值處理是需要存在的，即當呼叫方傳入的物件為空或不存在 series 配置時，應在頁面上顯示一些提示（ 對使用者友好的提示，而不是對程式設計人員 ），即避免因報錯而造成空白的情況。
此外，當我們像之前那樣給 option 這一引數進行型別限制後，倘若呼叫方傳入非物件型別，Vue 會直接丟擲錯誤——這一結果也不是我們想要的。我們應該取消型別限制，並在 option 發生變化時進行依次以下判斷：
1. 是否為物件；
2. 是否為空物件；
3. 是否包含 series 鍵；
4. series 是否為陣列；
5. series 陣列是否為空。
程式碼實現如下：
function isValidOption(option){
return isObject(option) && !isEmptyObject(option)
&& hasSeriesKey(option)
&& isSeriesArray(option) && !isSeriesEmpty(option)
}
function isObject(option) {
return Object.prototype.isPrototypeOf(option)
}
function isEmptyObject(option){
return Object.keys(option).length === 0
}
function hasSeriesKey(option){
return !!option['series']
}
function isSeriesArray(option) {
return Array.isArray(option['series'])
}
function isSeriesEmpty(option){
return option['series'].length === 0
}
注：實際上，當判斷出 option 為物件後，可以直接進行第三步的判斷。
然後，當判斷 option 符合上述三種情況時，在頁面上顯示如「資料為空」之類的提示：
import echarts from 'echarts'
export default {
name: 'echarts',
props: {
option: {
default(){
return {}
}
}
},
data() {
return { }
},
mounted() {
//# 1. 獲取一個用於掛在 echarts 的 DOM 元素
let $echartsDOM = document.getElementById('echarts-dom')
//# 2. 初始化
let myEcharts = echarts.init($echartsDOM)
//# 3. 設定配置項 let option = {...}
//# 4. 為 echarts 指定配置 myEcharts.setOption(option)
this.myEcharts = myEcharts
this.checkAndSetOption()
},
watch: {
option(option){
this.checkAndSetOption()
}
},
methods: {
checkAndSetOption(){
let option = this.option //配置等於父元件傳過來的資料
if(isValidOption(option)){
this.myEcharts.setOption(option); //渲染出來
this.myEcharts.hideLoading(); //隱藏載入動畫
}else{
this.myEcharts.showLoading(); //載入動畫
}
}
}
}
這裡在書寫程式碼時，有以下幾點需要注意：
- 1、我們對 DOM 元素獲取結果做了校驗，即當 option 不符合要求時，ID 為 echarts-dom 的 DOM 元素是不存在的，此時
document.getElementById()的返回結果為空，不能直接使用echarts.init()，否則會丟擲錯誤：Error: Initialize failed: invalid dom； - 2、在 Vue 中，初始化的值不會被 watch 鉤子捕捉，從而導致元件被呼叫方呼叫並賦予 option 引數時不會進入校驗。雖然可以使用
immediate: true使得watch鉤子能夠在屬性初始化賦值時被觸發，但這樣做是不合適的。因為這樣設定之後，在 option 初始化從而觸發 watch 時，用於掛載 echarts 的 DOM 元素還未存在於頁面中，從而導致出現TypeError: Cannot read property 'setOption' of null的錯誤。我們要重點注意 echarts 作用的生命週期，這一點後續還會涉及。
1.6 增強元件功能 - 資料載入提示
在實際場景中，用於渲染的資料常常是非同步獲取的，在非同步載入資料之中，我們可能需要在頁面中顯示如「正在載入...」的字樣來表示載入過程正在進行以提高使用者體驗。而載入過程就元件而言是無法直接獲取的，所以，我們需要使用某一引數用於進行載入資訊的顯示
ECharts 預設有提供了一個簡單的載入動畫。只需要呼叫 showLoading 方法顯示。資料載入完成後再呼叫 hideLoading 方法隱藏載入動畫。
//在App.vue中模擬3秒後獲取資料
data() {
return {
option: {}
}
},
created(){
setTimeout(()=>{
this.option={
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}
console.log(this.option);
},3000)
}
然後就可以在echarts元件裡呼叫了
methods: {
checkAndSetOption(){
let option = this.option //配置等於父元件傳過來的資料
if(isValidOption(option)){
this.myEcharts.setOption(option); //渲染出來
this.myEcharts.hideLoading(); //隱藏載入動畫
}else{
this.myEcharts.showLoading(); //載入動畫
}
}
}
1.7 增強元件功能 - 資料不合法提示
當傳入的 option 值不符合規定時。基於這一標識，我們可以對 echarts 元件進行優化，當 option 不合法或資料為空時給出提示資訊而不是顯示空白甚至報錯。