Comment encapsuler les composants ECharts dans vue3

1. Avant-propos

Le développement front-end doit souvent utiliser des graphiques ECharts pour restituer les informations sur les données. Dans un projet, nous devons souvent utiliser plusieurs graphiques. Choisir d'encapsuler les composants ECharts pour les réutiliser peut réduire la quantité de code et augmenter l'efficacité du développement. .

2. Encapsuler les composants ECharts

Pourquoi devrions-nous encapsuler les composants

• Éviter la duplication de la charge de travail et améliorer la réutilisabilité

• Rendre la logique du code plus claire et faciliter la maintenance ultérieure du projet

• Encapsulation composants Il permet aux utilisateurs de ne pas se soucier de la mise en œuvre interne et des principes du composant, et permet à une équipe de fonctionner de manière meilleure et hiérarchique

Le composant ECharts encapsulé implémente les fonctions suivantes :

• Utilisation de la livraison du composant L'attribut dans EChartsoption

• Définir manuellement/automatiquement la taille du graphique

• largeur et hauteur adaptatives du graphique

• Affichage dynamique des données back-end acquises

Cet article utilise vue 3 + Méthode d'écriture dactylographiée.

Implémentation du code :

Composant ECharts :

<template>
  <div :id="id" :class="className" : />
</template>
<script setup lang="ts">
//按需导入需要用到的 vue函数 和 echarts
import { onMounted, onBeforeUnmount, defineProps, watch } from "vue";
import * as echarts from &#39;echarts&#39;;
//获取 dom 和 父组件数据 并定义"myChart"用于初始化图表
let myChart: echarts.ECharts;
const props = defineProps({
  id: {
    type: String,
    default: &#39;chart&#39;,
    required: true
  },
  className: {
    type: String,
    default: &#39;&#39;
  },
  width: {
    type: String,
    default: &#39;100%&#39;,
  },
  height: {
    type: String,
    default: &#39;300px&#39;,
  },
  loading: {
    type: Boolean,
    default: true,
  },
  fullOptions: {
    type: Object,
    default: () => ({}),
    required: true
  },
})
//重绘图表函数
const resizeHandler = () => {
  myChart.resize();
}
//设置防抖，保证无论拖动窗口大小，只执行一次获取浏览器宽高的方法
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 形式，预防页面缩放而出现模糊问题；图表过于复杂时建议使用 Canvas
  myChart = echarts.init(document.getElementById(props.id) as HTMLDivElement, { renderer: &#39;svg&#39; })
  myChart.showLoading({
    text: &#39;&#39;,
    color: &#39;#409eff&#39;,
    textColor: &#39;#000&#39;,
    maskColor: &#39;rgba(255, 255, 255, .95)&#39;,
    zlevel: 0,
    lineWidth: 2,
  });
  if (!props.loading) {
    myChart.hideLoading();
    myChart.setOption(props.fullOptions.options, true);
  }
  //自适应不同屏幕时改变图表尺寸
  window.addEventListener(&#39;resize&#39;, cancalDebounce);
})
//页面销毁前，销毁事件和实例
onBeforeUnmount(() => {
  window.removeEventListener(&#39;resize&#39;, cancalDebounce)
  myChart.dispose()
})
//监听图表数据时候变化，重新渲染图表
watch(() => [props.fullOptions.options, props.loading], () => {
  if (!props.loading) {
    myChart.hideLoading();
    myChart.setOption(props.fullOptions.options, true);
  }
}, { deep: true })
</script>

Utilisation du composant ECharts :

<template>
  <Echarts
    id="echarts"
    height="300px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
// 引进Echarts 组件
import Echarts from &#39;@/components/Echarts/Echarts.vue&#39;;
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
import chartOption from &#39;@/components/Echarts/options&#39;;
 
const echartsOptions = reactive({
  options: { },
  init: false
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const testData = [26,27,24,23];
  const testDimensions = [&#39;家用电器&#39;,&#39;户外运动&#39;,&#39;汽车用品&#39;,&#39;手机数码&#39;];
  echartsOptions.options = chartOption.testOption(testData, testDimensions);
});
</script>

Effet :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!