在 vue 項目使用 echarts 的場景中，以下三點不容忽視：1. 可視化的數據往往是異步加載的；2. 若一個頁面存在大量的圖表（ 尤其當存在關系圖和地圖時 ），往往會導致該頁面的渲染速度很慢並可能在幾秒內卡死，產生極差的用戶體驗。3. 引入 echarts 組件導致編譯后的文件過大從而使得首次訪問的加載極慢。關於第三點，大家可以參考之前的撰文 優化 Vue 項目編譯文件大小。以下針對上述前兩點，給出數據異步、延遲渲染的 echarts vue 組件的設計和實現方式，並對實現之中可能存在的問題進行介紹。 用Vue開發動態刷新Echarts組件
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 不合法或數據為空時給出提示信息而不是顯示空白甚至報錯。