爲何須要封裝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>
效果圖
-
當數據正常時，效果以下
vue -
當無數據時，效果以下
數組
能夠更進一步優化的地方
- 我這一手封裝已是上乘之做，若是必定說哪裏不足的話，我認爲在resize的節流方面能夠考慮引入lodash中的throttle節流函數，進一步優化性能。