域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過

這篇文章主要介紹了在vue項(xiàng)目中封裝echarts的步驟，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

為什么需要封裝echarts

每個(gè)開發(fā)者在制作圖表時(shí)都需要從頭到尾書寫一遍完整的option配置，十分冗余

在同一個(gè)項(xiàng)目中，各類圖表設(shè)計(jì)十分相似，甚至是相同，沒必要一直做重復(fù)工作

可能有一些開發(fā)者忘記考慮echarts更新數(shù)據(jù)的特性，以及窗口縮放時(shí)的適應(yīng)問題。這樣導(dǎo)致數(shù)據(jù)更新了echarts視圖卻沒有更新，窗口縮放引起echarts圖形變形問題

我希望這個(gè)echarts組件能設(shè)計(jì)成什么樣

業(yè)務(wù)數(shù)據(jù)和樣式配置數(shù)據(jù)分離，我只需要傳入業(yè)務(wù)數(shù)據(jù)就行了

它的大小要完全由使用者決定

不會(huì)因?yàn)榭s放出現(xiàn)變形問題，而是能很好地自適應(yīng)

有時(shí)候某個(gè)圖表的樣式可能有點(diǎn)不一樣，希望能保留自己配置樣式的靈活性

無論傳入什么數(shù)據(jù)都能正確地更新視圖

如果我傳入的數(shù)據(jù)為空，能展示一個(gè)空狀態(tài)

公共組件結(jié)構(gòu)建議

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

vue單文件代碼

echart_pie完整代碼如下：

<template>
<div class="chart"></div>
</template>

<script>
import { merge } from 'lodash';
import echart from 'echarts';
import { BASIC_OPTION } from './default_option';
import { COLOR_ARRAY } from '../color';
import ResizeListener from 'element-resize-detector';

export default {
name: 'ChartPie',
props: {
seriesData: {
type: Array,
required: true,
default: () => []
},
extraOption: {
type: Object,
default: () => ({})
}
},
data() {
return {
chart: null
};
},
watch: {
seriesData: {
deep: true,
handler() {
this.updateChartView();
}
}
},
mounted() {
this.chart = echart.init(this.$el);
this.updateChartView();
window.addEventListener('resize', this.handleWindowResize);
this.addChartResizeListener();
},
beforeDestroy() {
window.removeEventListener('resize', this.handleWindowResize);
},
methods: {
/**
* 將業(yè)務(wù)數(shù)據(jù)加入到基礎(chǔ)樣式配置中
* @returns {Object} 完整的echart配置
*/
assembleDataToOption() {
const formatter = name => {
const total = this.seriesData.reduce((acc, cur) => acc + cur.value, 0);
const data = this.seriesData.find(item => item.name === name) || {};
const percent = data.value
? `${Math.round((data.value / total) * 100)}%`
: '0%';

return `{a|${name}}{b|${percent}}`;
};

return merge(
{},
BASIC_OPTION,
{ color: COLOR_ARRAY },
{
legend: { formatter },
series: [{ data: this.seriesData }]
},
this.extraOption
);
},

/**
* 對(duì)chart元素尺寸進(jìn)行監(jiān)聽，當(dāng)發(fā)生變化時(shí)同步更新echart視圖
*/
addChartResizeListener() {
const instance = ResizeListener({
strategy: 'scroll',
callOnAdd: true
});

instance.listenTo(this.$el, () => {
if (!this.chart) return;
this.chart.resize();
});
},

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

const fullOption = 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();
}
}
};
</script>

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

index完整代碼如下：

<template>
<van-empty v-if="isSeriesEmpty" />
<chart-pie v-else v-bind="$props" />
</template>

<script>
import { isEmpty } from 'lodash';
import ChartPie from './echart_pie.vue';

export default {
name: 'EchartPie',
components: { ChartPie },
props: ChartPie.props,
computed: {
isSeriesEmpty() {
return (
isEmpty(this.seriesData) || this.seriesData.every(item => !item.value)
);
}
}
};
</script>

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

在源碼中，我用到了lodash的一個(gè)公共函數(shù)merge,它表示遞歸合并來源對(duì)象自身和繼承的可枚舉屬性到目標(biāo)對(duì)象。后續(xù)的來源對(duì)象屬性會(huì)覆蓋之前同名的屬性

另外一個(gè)有幸被我寵幸的函數(shù)是isEmpty，當(dāng)我傳入的業(yè)務(wù)數(shù)據(jù)為空時(shí)，比如空數(shù)組[]、undefined、null時(shí)，都會(huì)被認(rèn)為這是一個(gè)無數(shù)據(jù)的情況，這時(shí)候我們就展示一個(gè)空狀態(tài)的組件，它可能由一張背景圖構(gòu)成；

在綁定到具體的DOM元素時(shí)，我沒有用querySelector選擇器去選擇一個(gè)類或者是用Math.random生成的id，因?yàn)檫@兩者都不是絕對(duì)可靠的，我直接使用當(dāng)前vue示例關(guān)聯(lián)的根DOM 元素$el

我監(jiān)聽窗口大小的變化，并為這種情況添加對(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ú)立的

命名非常語義化，一看就懂

保留了自己需要單獨(dú)配置一些定制樣式的靈活性，即extraOption

default_option.js應(yīng)該包括哪些內(nèi)容

正常情況下暴露一個(gè)基礎(chǔ)配置BASIC_OPTION就可以了

element-resize-detector是干啥的？

這是一個(gè)用于監(jiān)聽DOM元素尺寸變化的插件。我們已經(jīng)對(duì)窗口縮放做了監(jiān)聽，但是有時(shí)候其父級(jí)容器的大小也會(huì)動(dòng)態(tài)改變的。

我們對(duì)父級(jí)容器的寬度進(jìn)行監(jiān)聽，當(dāng)父級(jí)容器的尺寸發(fā)生變化時(shí)，echart能調(diào)用自身的resize方法，保持視圖正常。

當(dāng)然，這個(gè)不適用于tab選項(xiàng)卡的情況，在tab選項(xiàng)卡中，父級(jí)容器從display:none到有實(shí)際的clientWidth，可能會(huì)比注冊(cè)一個(gè)resizeDetector先完成，所以等開始監(jiān)聽父級(jí)容器resize的時(shí)候，可能為時(shí)已晚。

在tab選項(xiàng)卡中很容易出現(xiàn)這種場(chǎng)景：

看起來非常的逗，只有一點(diǎn)點(diǎn)大。解決這個(gè)問題，最有效的方法還是在切換選項(xiàng)卡時(shí)手動(dòng)去通過ref獲取echart實(shí)例，并手動(dòng)調(diào)用resize方法，這是最安全的，也是最有效的。

組件使用示例

<template>
<div class="echart-pie-wrap">
<echart-pie :series-data="dataList" :extra-option="extraOption" />
</div>
</template>

<script>
import EchartPie from '@/components/echarts/echart_pie';

export default{
components: { EchartPie },
data() {
return {
dataList: [
{
name: "西瓜",
value: 20
},
{
name: "橘子",
value: 13
},
{
name: "楊桃",
value: 33
}
],
extraOption: {
color: [ '#fe883a', '#2d90d1','#f75981', '#90e2a9']
}
}
}
}

</script>

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

效果圖

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

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

關(guān)于靈活性

這里面提供的封裝只是一種大概的思路，實(shí)際項(xiàng)目中，可能會(huì)與這里出現(xiàn)偏差。軟件開發(fā)沒有銀彈可言，非常適合我這個(gè)項(xiàng)目的，可能在細(xì)節(jié)上不太適合看這篇文章的你。但是思路是類似的，可以對(duì)照著做一些調(diào)整。

以上就是在vue項(xiàng)目中封裝echarts的步驟的詳細(xì)內(nèi)容，更多關(guān)于vue項(xiàng)目中封裝echarts的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

來源：腳本之家

鏈接：https://www.jb51.net/article/202900.htm

申請(qǐng)創(chuàng)業(yè)報(bào)道，分享創(chuàng)業(yè)好點(diǎn)子。點(diǎn)擊此處，共同探討創(chuàng)業(yè)新機(jī)遇！