1. 程式人生 > >做一個可複用的 echarts-vue 元件(延遲動畫載入)

做一個可複用的 echarts-vue 元件(延遲動畫載入)

在 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 不合法或資料為空時給出提示資訊而不是顯示空白甚至報錯。

PS:暫時更新到這了,如果有後續,我回接著更新了

原文地址:https://segmentfault.com/a/1190000012803831