在vue專案中封裝echarts的正確姿勢
阿新 • • 發佈：2020-04-11
為什麼需要封裝echarts
- 每個開發者在製作圖表時都需要從頭到尾書寫一遍完整的option配置，十分冗餘
- 在同一個專案中，各類圖表設計十分相似，甚至是相同，沒必要一直做重複工作
- 可能有一些開發者忘記考慮echarts更新資料的特性，以及視窗縮放時的適應問題。這樣導致資料更新了echarts檢視卻沒有更新，視窗縮放引起echarts圖形變形問題
我希望這個echarts元件能設計成什麼樣
- 業務資料和樣式配置資料分離，我只需要傳入業務資料就行了
- 它的大小要完全由使用者決定
- 不會因為縮放出現變形問題，而是能很好地自適應
- 有時候某個圖表的樣式可能有點不一樣，希望能保留自己配置樣式的靈活性
- 無論傳入什麼資料都能正確地更新檢視
- 如果我傳入的資料為空，能展示一個空狀態
公共元件結構建議
- 當你把它書寫為一個公共元件時，我我希望它應該是這樣：將單獨機械的配置表獨立成一份檔案，暴露一個必要的vue單檔案，同時攜帶一份README說明文件，當然，文件裡面需要有關於你寫的元件的使用示例和入參含義說明，這在大型專案中非常重要。
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: {
// 業務資料
dataList: {
type: Array,
default: () => []
},
// 特殊的樣式定製
extraOption: {
type: Object,
default: () => ({})
}
},
data() {
return {
chart: null
};
},
methods: {
/**
* 將業務資料加入到基礎樣式配置中
* @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);
},
/**
* 當視窗縮放時，echart動態調整自身大小
*/
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>
關於原始碼的說明
- 在原始碼中，我用到了lodash的一個公共函式
merge,它表示遞迴合併來源物件自身和繼承的可列舉屬性到目標物件。後續的來源物件屬性會覆蓋之前同名的屬性 - 另外一個有幸被我寵幸的函式是
isEmpty，當我傳入的業務資料為空時，比如空陣列[]、undefined、null時，都會被認為這是一個無資料的情況，這時候我們就選用一個空狀態的echarts配置，即EMPTY_OPTION - 在繫結到具體的DOM元素時，我沒有用
querySelector選擇器去選擇一個類或者是用Math.random生成的id，因為這兩者都不是絕對可靠的，我直接使用當前vue示例關聯的根DOM 元素$el - 我監聽視窗大小的變化，併為這種情況新增對應的事件處理函式--echarts自帶的
resize方法，使echarts圖形不會變形 - 將對應DOM的寬高設為100%，讓其大小完全由使用者提供的容器控制
setOption方法的第二個引數表示傳入的新option是否不與之前的舊option進行合併，預設居然是false，即合併。這顯然不行，我們需要每次的業務配置都是完全獨立的- 命名非常語義化，一看就懂
- 保留了自己需要單獨配置一些定製樣式的靈活性，即extraOption
- 關於dataList和extraOption的具體含義，使用示例，都放在README.md檔案做詳細說明，使用者一看文件就能上手
default_option.js應該包括哪些內容
- 應該包括兩部分：正常情況下的基礎配置
BASIC_OPTION，異常情況下（資料為空）的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 {
// 業務資料
pieData: [
{
name: "西瓜",
value: 20
},
{
name: "橘子",
value: 13
},
{
name: "楊桃",
value: 33
}
],
// 定製化配置覆蓋預設配置
option: {
color: ["#e033f7", "#15c28e", "#2267e6"]
}
};
},
components: {
ChartPie
}
};
</script>
<style lang="less" scoped>
.echart-wrapper {
width: 300px;
height: 300px;
margin: 10px auto;
}
</style>
效果圖
-
當資料正常時，效果如下
-
當無資料時，效果如下
可以更進一步優化的地方
- 我這一手封裝已經是上乘之作，如果一定說哪裡不足的話，我認為在resize的節流方面可以考慮引入lodash中的throttle節流函式，進一步優化效能。