說明
隨着echarts版本的更迭，很多書寫方式都有了變化，本文於2021/04/25更新了一次，具體可查看源碼：github源碼地址
為什么需要封裝echarts
- 每個開發者在制作圖表時都需要從頭到尾書寫一遍完整的option配置，十分冗余
- 在同一個項目中，各類圖表設計十分相似，甚至是相同，沒必要一直做重復工作
- 可能有一些開發者忘記考慮echarts更新數據的特性，以及窗口縮放時的適應問題。這樣導致數據更新了echarts視圖卻沒有更新，窗口縮放引起echarts圖形變形問題
我希望這個echarts組件能設計成什么樣
- 業務數據和樣式配置數據分離，我只需要傳入業務數據就行了
- 它的大小要完全由使用者決定
- 不會因為縮放出現變形問題，而是能很好地自適應
- 有時候某個圖表的樣式可能有點不一樣，希望能保留自己配置樣式的靈活性
- 無論傳入什么數據都能正確地更新視圖
- 如果我傳入的數據為空，能展示一個空狀態
公共組件結構建議
- 當你把它書寫為一個公共組件時，我我希望它應該是這樣：將單獨機械的配置表獨立成一份文件，暴露一個必要的vue單文件，同時攜帶一份README說明文檔，當然，文檔里面需要有關於你寫的組件的使用示例和入參含義說明，這在大型項目中非常重要。
vue單文件代碼
- echart_pie完整代碼如下：
<template>
<div class="chart"></div>
</template>
<script>
import { merge } from "lodash";
import * as echarts from "echarts";
import { BASIC_OPTION } from "./default_option";
import { COLOR_ARRAY } from "../color";
import ResizeListener from "element-resize-detector";
export default {
name: "ChartPie",
props: {
// 正常的業務數據，對應echarts餅圖配置中series[0].data
seriesData: {
type: Array,
required: true,
default: () => [],
},
// 表示需要特殊定制的配置
// 一般UI會規定一個統一的設計規范（比如顏色，字體，圖例格式，位置等）
// 但不排除某個圖標會和設計規范不同，需要特殊定制樣式，所以開放這個配置，增強靈活性
extraOption: {
type: Object,
default: () => ({}),
},
},
data() {
return {
chart: null,
};
},
watch: {
seriesData: {
deep: true,
handler() {
this.updateChartView();
},
},
},
mounted() {
this.chart = echarts.init(this.$el);
this.updateChartView();
window.addEventListener("resize", this.handleWindowResize);
this.addChartResizeListener();
},
beforeDestroy() {
window.removeEventListener("resize", this.handleWindowResize);
},
methods: {
/**
* 將業務數據加入到基礎樣式配置中
* @returns {Object} 完整的echart配置
*/
assembleDataToOption() {
// 這部分的圖例formatter取決於UI要求，如果你的項目中不需要，就可以不寫formatter
// 由於echarts版本的迭代，這里的寫法也有稍許改變
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 `${name} ${percent}`;
};
return merge(
{},
BASIC_OPTION,
{ color: COLOR_ARRAY },
{
legend: { formatter },
series: [{ data: this.seriesData }],
},
this.extraOption
);
},
/**
* 對chart元素尺寸進行監聽，當發生變化時同步更新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);
},
/**
* 當窗口縮放時，echart動態調整自身大小
*/
handleWindowResize() {
if (!this.chart) return;
this.chart.resize();
},
},
};
</script>
<style lang="less" scoped>
.chart {
width: 100%;
height: 100%;
}
</style>
- index完整代碼如下：
<template>
<Empty v-if="isSeriesEmpty" description="暫無數據" />
<chart-pie v-else v-bind="$props" />
</template>
<script>
import { isEmpty } from "lodash";
import ChartPie from "./echart_pie.vue";
import { Empty } from "vant";
export default {
name: "EchartPie",
components: { ChartPie, Empty },
props: ChartPie.props,
computed: {
// 針對餅圖數據是不是無效的判斷
isSeriesEmpty() {
return (
isEmpty(this.seriesData) || this.seriesData.every((item) => !item.value)
);
},
},
};
</script>
關於源碼的說明
- 在源碼中，我用到了lodash的一個公共函數
merge,它表示遞歸合並來源對象自身和繼承的可枚舉屬性到目標對象。后續的來源對象屬性會覆蓋之前同名的屬性 - 另外一個有幸被我寵幸的函數是
isEmpty，當我傳入的業務數據為空時，比如空數組[]、undefined、null時，都會被認為這是一個無數據的情況，這時候我們就展示一個空狀態的組件，它可能由一張背景圖構成； - 在綁定到具體的DOM元素時，我沒有用
querySelector選擇器去選擇一個類或者是用Math.random生成的id，因為這兩者都不是絕對可靠的，我直接使用當前vue示例關聯的根DOM 元素$el - 我監聽窗口大小的變化，並為這種情況添加對應的事件處理函數--echarts自帶的
resize方法，使echarts圖形不會變形 - 將對應DOM的寬高設為100%，讓其大小完全由使用者提供的容器控制
setOption方法的第二個參數表示傳入的新option是否不與之前的舊option進行合並，默認居然是false，即合並。這顯然不行，我們需要每次的業務配置都是完全獨立的- 命名非常語義化，一看就懂
- 保留了自己需要單獨配置一些定制樣式的靈活性，即extraOption
default_option.js應該包括哪些內容
- 正常情況下暴露一個基礎配置
BASIC_OPTION就可以了
element-resize-detector是干啥的？
這是一個用於監聽DOM元素尺寸變化的插件。我們已經對窗口縮放做了監聽，但是有時候其父級容器的大小也會動態改變的。
我們對父級容器的寬度進行監聽，當父級容器的尺寸發生變化時，echart能調用自身的resize方法，保持視圖正常。
當然，這個不適用於tab選項卡的情況，在tab選項卡中，父級容器從display:none到有實際的clientWidth，可能會比注冊一個resizeDetector先完成，所以等開始監聽父級容器resize的時候，可能為時已晚。
在tab選項卡中很容易出現這種場景：
看起來非常的逗，只有一點點大。解決這個問題，最有效的方法還是在切換選項卡時手動去通過ref獲取echart實例，並手動調用resize方法，這是最安全的，也是最有效的。
組件使用示例
<template>
<div class="echart-pie-wrap">
<echart-pie :series-data="dataList" :extra-option="extraOption" />
</div>
</template>
<script>
import EchartPie from "@/components/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">
.echart-pie-wrap {
display: flex;
justify-content: center;
align-items: center;
width: 90vw;
height: 90vh;
margin: 20px auto;
}
</style>
效果圖
- 當數據正常時，效果如下
image.png
- 當無數據時，效果如下
image.png
關於靈活性
這里面提供的封裝只是一種大概的思路，實際項目中，可能會與這里出現偏差。軟件開發沒有銀彈可言，非常適合我這個項目的，可能在細節上不太適合看這篇文章的你。但是思路是類似的，可以對照着做一些調整。