在vue項目中封裝echarts的正確姿式

爲何須要封裝echarts

• 每一個開發者在製做圖表時都須要從頭至尾書寫一遍完整的option配置，十分冗餘
• 在同一個項目中，各種圖表設計十分類似，甚至是相同，不必一直作重複工做
• 可能有一些開發者忘記考慮echarts更新數據的特性，以及窗口縮放時的適應問題。這樣致使數據更新了echarts視圖卻沒有更新，窗口縮放引發echarts圖形變形問題

我但願這個echarts組件能設計成什麼樣

• 業務數據和樣式配置數據分離，我只須要傳入業務數據就好了
• 它的大小要徹底由使用者決定
• 不會由於縮放出現變形問題，而是能很好地自適應
• 有時候某個圖表的樣式可能有點不同，但願能保留本身配置樣式的靈活性
• 不管傳入什麼數據都能正確地更新視圖
• 若是我傳入的數據爲空，能展現一個空狀態

公共組件結構建議

• 當你把它書寫爲一個公共組件時，我我但願它應該是這樣：將單獨機械的配置表獨立成一份文件，暴露一個必要的vue單文件，同時攜帶一份README說明文檔，固然，文檔裏面須要有關於你寫的組件的使用示例和入參含義說明，這在大型項目中很是重要。

vue單文件代碼

• echart_pie完整代碼以下：

<div class="chart">div>template><script>import { merge } from 'lodash';
import echart from 'echarts';
import { BASIC_OPTION } from './default_option';
import { COLOR_ARRAY } from '../color';
import ResizeListener from 'element-resize-detector';

export default {
  name: 'ChartPie',
  props: {
    seriesData: {
      type: Array,
      required: true,
      default: () => []
    },
    extraOption: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    seriesData: {
      deep: true,
      handler() {
        this.updateChartView();
      }
    }
  },
  mounted() {
    this.chart = echart.init(this.$el);
    this.updateChartView();
    window.addEventListener('resize', this.handleWindowResize);
    this.addChartResizeListener();
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleWindowResize);
  },
  methods: {
    /**
     * 將業務數據加入到基礎樣式配置中
     * @returns {Object} 完整的echart配置
     */
    assembleDataToOption() {
      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 `{a|${name}}{b|${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完整代碼以下：

<van-empty v-if="isSeriesEmpty" />
  <chart-pie v-else v-bind="$props" />template><script>import { isEmpty } from 'lodash';import ChartPie from './echart_pie.vue';export default {  name: 'EchartPie',  components: { ChartPie },  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方法，這是最安全的，也是最有效的。

組件使用示例

<div class="echart-pie-wrap">
  <echart-pie :series-data="dataList" :extra-option="extraOption" />div>template><script>import EchartPie from '@/components/echarts/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" scoped>.echart-wrapper {  width: 300px;  height: 300px;  margin: 10px auto;
}style>

效果圖

• 當數據正常時，效果以下

• 當無數據時，效果以下

關於靈活性

這裏面提供的封裝只是一種大概的思路，實際項目中，可能會與這裏出現誤差。軟件開發沒有銀彈可言，很是適合我這個項目的，可能在細節上不太適合看這篇文章的你。可是思路是相似的，能夠對照着作一些調整。