在vue項(xiàng)目中封裝echarts的正確姿勢(shì)

為什么需要封裝echarts

* 每個(gè)開(kāi)發(fā)者在制作圖表時(shí)都需要從頭到尾書寫一遍完整的option配置，十分冗余
* 在同一個(gè)項(xiàng)目中，各類圖表設(shè)計(jì)十分相似，甚至是相同，沒(méi)必要一直做重復(fù)工作
*
可能有一些開(kāi)發(fā)者忘記考慮echarts更新數(shù)據(jù)的特性，以及窗口縮放時(shí)的適應(yīng)問(wèn)題。這樣導(dǎo)致數(shù)據(jù)更新了echarts視圖卻沒(méi)有更新，窗口縮放引起echarts圖形變形問(wèn)題
我希望這個(gè)echarts組件能設(shè)計(jì)成什么樣

* 業(yè)務(wù)數(shù)據(jù)和樣式配置數(shù)據(jù)分離，我只需要傳入業(yè)務(wù)數(shù)據(jù)就行了
* 它的大小要完全由使用者決定
* 不會(huì)因?yàn)榭s放出現(xiàn)變形問(wèn)題，而是能很好地自適應(yīng)
* 有時(shí)候某個(gè)圖表的樣式可能有點(diǎn)不一樣，希望能保留自己配置樣式的靈活性
* 無(wú)論傳入什么數(shù)據(jù)都能正確地更新視圖
* 如果我傳入的數(shù)據(jù)為空，能展示一個(gè)空狀態(tài)
公共組件結(jié)構(gòu)建議

* 當(dāng)你把它書寫為一個(gè)公共組件時(shí)，我我希望它應(yīng)該是這樣：
將單獨(dú)機(jī)械的配置表獨(dú)立成一份文件，暴露一個(gè)必要的vue單文件，同時(shí)攜帶一份README說(shuō)明文檔，當(dāng)然，文檔里面需要有關(guān)于你寫的組件的使用示例和入?yún)⒑x說(shuō)明，這在大型項(xiàng)目中非常重要。


vue單文件代碼

* 完整代碼如下： <template>
??<div?class="chart"></div>
</template>

<script>
import?{?merge,?isEmpty?}?from?"lodash";
import?echart?from?"echarts";
import?{?BASIC_OPTION,?EMPTY_OPTION?}?from?"./default_option";

export?default?{
??props:?{
????//?業(yè)務(wù)數(shù)據(jù)
????dataList:?{
??????type:?Array,
??????default:?()?=>?[]
????},
????//?特殊的樣式定制
????extraOption:?{
??????type:?Object,
??????default:?()?=>?({})
????}
??},
??data()?{
????return?{
??????chart:?null
????};
??},
??methods:?{
????/**
?????*?將業(yè)務(wù)數(shù)據(jù)加入到基礎(chǔ)樣式配置中
?????*?@returns?{Object}?完整的echart配置
?????*/
????assembleDataToOption()?{
??????return?merge(
????????{},
????????BASIC_OPTION,
????????{
??????????series:?[{?data:?this.dataList?}]
????????},
????????this.extraOption
??????);
????},

????/**
?????*?更新echart視圖
?????*/
????updateChartView()?{
??????if?(!this.chart)?return;

??????const?fullOption?=?isEmpty(this.dataList)
??????????EMPTY_OPTION
????????:?this.assembleDataToOption();
??????this.chart.setOption(fullOption,?true);
????},

????/**
?????*?當(dāng)窗口縮放時(shí)，echart動(dòng)態(tài)調(diào)整自身大小
?????*/
????handleWindowResize()?{
??????if?(!this.chart)?return;
??????this.chart.resize();
????}
??},
??watch:?{
????dataList:?{
??????deep:?true,
??????handler:?()?=>?this.updateChartView
????}
??},
??mounted()?{
????this.chart?=?echart.init(this.$el);
????this.updateChartView();
????window.addEventListener("resize",?this.handleWindowResize);
??},
??beforeDestroy()?{
????window.removeEventListener("resize",?this.handleWindowResize);
??}
};
</script>

<style?lang="less"?scoped>
.chart?{
??width:?100%;
??height:?100%;
}
</style>


關(guān)于源碼的說(shuō)明

* 在源碼中，我用到了lodash的一個(gè)公共函數(shù)merge,它表示遞歸合并來(lái)源對(duì)象自身和繼承的可枚舉屬性到目標(biāo)對(duì)象。后續(xù)的來(lái)源對(duì)象屬性會(huì)覆蓋之前同名的屬性
* 另外一個(gè)有幸被我寵幸的函數(shù)是isEmpty，當(dāng)我傳入的業(yè)務(wù)數(shù)據(jù)為空時(shí)，比如空數(shù)組[]、undefined、null
時(shí)，都會(huì)被認(rèn)為這是一個(gè)無(wú)數(shù)據(jù)的情況，這時(shí)候我們就選用一個(gè)空狀態(tài)的echarts配置，即EMPTY_OPTION
* 在綁定到具體的DOM元素時(shí)，我沒(méi)有用querySelector選擇器去選擇一個(gè)類或者是用Math.random
生成的id，因?yàn)檫@兩者都不是絕對(duì)可靠的，我直接使用當(dāng)前vue示例關(guān)聯(lián)的根DOM 元素$el
* 我監(jiān)聽(tīng)窗口大小的變化，并為這種情況添加對(duì)應(yīng)的事件處理函數(shù)--echarts自帶的resize方法，使echarts圖形不會(huì)變形
* 將對(duì)應(yīng)DOM的寬高設(shè)為100%，讓其大小完全由使用者提供的容器控制
* setOption
方法的第二個(gè)參數(shù)表示傳入的新option是否不與之前的舊option進(jìn)行合并，默認(rèn)居然是false，即合并。這顯然不行，我們需要每次的業(yè)務(wù)配置都是完全獨(dú)立的
* 命名非常語(yǔ)義化，一看就懂
* 保留了自己需要單獨(dú)配置一些定制樣式的靈活性，即extraOption
* 關(guān)于dataList和extraOption的具體含義，使用示例，都放在README.md文件做詳細(xì)說(shuō)明，使用者一看文檔就能上手
default_option.js應(yīng)該包括哪些內(nèi)容

* 應(yīng)該包括兩部分：正常情況下的基礎(chǔ)配置BASIC_OPTION，異常情況下（數(shù)據(jù)為空）的EMPTY_OPTION，如下：


組件使用示例
<template>
??<div?class="echart-wrapper">
????<chart-pie?:data-list="pieData"?:extra-option="option"?/>
??</div>
</template>

<script>
import?ChartPie?from?"@/components/echarts/echart_pie/EchartPie.vue";

export?default?{
??name:?"home",
??data()?{
????return?{
??????//?業(yè)務(wù)數(shù)據(jù)
??????pieData:?[
????????{
??????????name:?"西瓜",
??????????value:?20
????????},
????????{
??????????name:?"橘子",
??????????value:?13
????????},
????????{
??????????name:?"楊桃",
??????????value:?33
????????}
??????],
??????//?定制化配置覆蓋默認(rèn)配置
??????option:?{
????????color:?["#e033f7",?"#15c28e",?"#2267e6"]
??????}
????};
??},
??components:?{
????ChartPie
??}
};
</script>

<style?lang="less"?scoped>
.echart-wrapper?{
??width:?300px;
??height:?300px;
??margin:?10px?auto;
}
</style>


效果圖

*
當(dāng)數(shù)據(jù)正常時(shí)，效果如下

*
當(dāng)無(wú)數(shù)據(jù)時(shí)，效果如下

可以更進(jìn)一步優(yōu)化的地方

* 我這一手封裝已經(jīng)是上乘之作，如果一定說(shuō)哪里不足的話，我認(rèn)為在resize的節(jié)流方面可以考慮引入lodash中的throttle節(jié)流函數(shù)，進(jìn)一步優(yōu)化性能。

• ? 上一篇：技術(shù)到底是否重要之我的見(jiàn)解
• ? 下一篇：解析一下阿里出品的泰山版 Java 開(kāi)發(fā)手冊(cè)