vue3封裝ECharts組件詳解

更新時間：2023年04月27日 10:54:20 作者：Huang_xianlong

前端開發(fā)需要經(jīng)常使用ECharts圖表渲染數(shù)據(jù)信息，在一個項目中我們經(jīng)常需要使用多個圖表，選擇封裝ECharts組件復用的方式可以減少代碼量，增加開發(fā)效率。感興趣的可以閱讀一下本文

一、前言

前端開發(fā)需要經(jīng)常使用ECharts圖表渲染數(shù)據(jù)信息，在一個項目中我們經(jīng)常需要使用多個圖表，選擇封裝ECharts組件復用的方式可以減少代碼量，增加開發(fā)效率。

二、封裝ECharts組件

為什么要封裝組件

避免重復的工作量，提升復用性
使代碼邏輯更加清晰，方便項目的后期維護
封裝組件可以讓使用者不去關(guān)心組件的內(nèi)部實現(xiàn)以及原理，能夠使一個團隊更好的有層次的去運行

封裝的ECharts組件實現(xiàn)了以下的功能：

使用組件傳遞ECharts中的 option 屬性
手動/自動設(shè)置chart尺寸
chart自適應寬高
動態(tài)展示獲取到的后端數(shù)據(jù)

本文使用的是vue3 + typescript的寫法。

代碼實現(xiàn)：

ECharts組件：

<template>
  <div :id="id" :class="className" :style="{ height, width }" />
</template>
<script setup lang="ts">
//按需導入需要用到的 vue函數(shù) 和 echarts
import { onMounted, onBeforeUnmount, defineProps, watch } from "vue";
import * as echarts from 'echarts';
//獲取 dom 和 父組件數(shù)據(jù) 并定義"myChart"用于初始化圖表
let myChart: echarts.ECharts;
const props = defineProps({
  id: {
    type: String,
    default: 'chart',
    required: true
  },
  className: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '300px',
  },
  loading: {
    type: Boolean,
    default: true,
  },
  fullOptions: {
    type: Object,
    default: () => ({}),
    required: true
  },
})
//重繪圖表函數(shù)
const resizeHandler = () => {
  myChart.resize();
}
//設(shè)置防抖，保證無論拖動窗口大小，只執(zhí)行一次獲取瀏覽器寬高的方法
const debounce = (fun: { (): void; (): void; }, delay: number | undefined) => {
  let timer: number | undefined;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fun();
    }, delay);
  }
};
const cancalDebounce = debounce(resizeHandler, 50);
//頁面成功渲染，開始繪制圖表
onMounted(() => {
  //配置為 svg 形式，預防頁面縮放而出現(xiàn)模糊問題；圖表過于復雜時建議使用 Canvas
  myChart = echarts.init(document.getElementById(props.id) as HTMLDivElement, { renderer: 'svg' })
  myChart.showLoading({
    text: '',
    color: '#409eff',
    textColor: '#000',
    maskColor: 'rgba(255, 255, 255, .95)',
    zlevel: 0,
    lineWidth: 2,
  });
  if (!props.loading) {
    myChart.hideLoading();
    myChart.setOption(props.fullOptions.options, true);
  }
  //自適應不同屏幕時改變圖表尺寸
  window.addEventListener('resize', cancalDebounce);
})
//頁面銷毀前，銷毀事件和實例
onBeforeUnmount(() => {
  window.removeEventListener('resize', cancalDebounce)
  myChart.dispose()
})
//監(jiān)聽圖表數(shù)據(jù)時候變化，重新渲染圖表
watch(() => [props.fullOptions.options, props.loading], () => {
  if (!props.loading) {
    myChart.hideLoading();
    myChart.setOption(props.fullOptions.options, true);
  }
}, { deep: true })
</script>

ECharts組件的用法:

<template>
  <Echarts
    id="echarts"
    height="300px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
// 引進Echarts 組件
import Echarts from '@/components/Echarts/Echarts.vue';
// 引進Echarts 的options配置文件，可根據(jù)項目模塊來創(chuàng)建該配置文件
import chartOption from '@/components/Echarts/options';
 
const echartsOptions = reactive({
  options: { },
  init: false
});
// 此處可請求接口來獲取數(shù)據(jù)
// 我的options配置使用的是dataset的形式，傳進options中的兩個參數(shù)data（圖表的數(shù)據(jù)）和dimension（圖表的維度），
onMounted(() => {
  const testData = [26,27,24,23];
  const testDimensions = ['家用電器','戶外運動','汽車用品','手機數(shù)碼'];
  echartsOptions.options = chartOption.testOption(testData, testDimensions);
});
</script>

效果：