1. 程式人生 > >在vue專案中封裝echarts的正確姿勢

在vue專案中封裝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,當我傳入的業務資料為空時,比如空陣列[]undefinednull時,都會被認為這是一個無資料的情況,這時候我們就選用一個空狀態的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節流函式,進一步優化效能。