So kapseln Sie ECharts-Komponenten in vue3

1. Vorwort

Die Front-End-Entwicklung muss häufig ECharts-Diagramme verwenden, um Dateninformationen zu rendern. Die Entscheidung, ECharts-Komponenten zu kapseln, kann die Wiederverwendung reduzieren die Menge an Code, erhöhen die Entwicklungseffizienz.

2. Kapselung von ECharts-Komponenten

Warum sollten wir Komponenten kapseln

• Vermeiden Sie doppelte Arbeitsbelastung und verbessern Sie die Wiederverwendbarkeit #Durch die Kapselung von Komponenten müssen sich Benutzer nicht um die interne Implementierung und die Prinzipien der Komponenten kümmern, sodass ein Team besser und hierarchischer arbeiten kann

• Das Die gekapselte ECharts-Komponente implementiert die folgenden Funktionen:
Verwenden Sie die Komponente, um die

Attribute in

ECharts 🎜 zu übergeben 🎜#

Diagrammgröße manuell/automatisch einstellen

• Adaptive Breite und Höhe des Diagrammsoption

  # 🎜🎜#
Dynamische Anzeige der erfassten Back-End-Daten
• Dieser Artikel verwendet die Schreibmethode vue3 + Typoskript. #🎜🎜 ## 🎜🎜 ## 🎜🎜 ## 🎜🎜##Code -Implementierung:#🎜🎜 ## 🎜🎜 ## 🎜🎜 ## 🎜🎜#Echarts Komponente:#🎜🎜 ## 🎜🎜#

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

  #🎜🎜 #

  Verwendung der ECharts-Komponente:

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

• Effekt:

Das obige ist der detaillierte Inhalt vonSo kapseln Sie ECharts-Komponenten in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!