為什麼需要封裝echarts 每個開發者在製作圖表時都需要從頭到尾書寫一遍完整的option配置，十分冗餘 在同一個項目中，各類圖表設計十分相似，甚至是相同，沒必要一直做重覆工作 可能有一些開發者忘記考慮echarts更新數據的特性，以及視窗縮放時的適應問題。這樣導致數據更新了echarts視圖卻沒 ...
為什麼需要封裝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節流函數，進一步優化性能。
