在vue項目中封裝echarts的步驟

Posted on by

為什麼需要封裝echarts

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

我希望這個echarts組件能設計成什麼樣

  • 業務數據和樣式配置數據分離，我隻需要傳入業務數據就行瞭
  • 它的大小要完全由使用者決定
  • 不會因為縮放出現變形問題，而是能很好地自適應
  • 有時候某個圖表的樣式可能有點不一樣，希望能保留自己配置樣式的靈活性
  • 無論傳入什麼數據都能正確地更新視圖
  • 如果我傳入的數據為空，能展示一個空狀態

公共組件結構建議

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

vue單文件代碼

echart_pie完整代碼如下：

<template>
 <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完整代碼如下：

<template>
 <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方法，這是最安全的，也是最有效的。

組件使用示例

<template>
<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>

效果圖

當數據正常時，效果如下

當無數據時，效果如下

關於靈活性

這裡面提供的封裝隻是一種大概的思路，實際項目中，可能會與這裡出現偏差。軟件開發沒有銀彈可言，非常適合我這個項目的，可能在細節上不太適合看這篇文章的你。但是思路是類似的，可以對照著做一些調整。

以上就是在vue項目中封裝echarts的步驟的詳細內容，更多關於vue項目中封裝echarts的資料請關註WalkonNet其它相關文章！

推薦閱讀：