Bagaimana untuk merangkum komponen ECharts dalam vue3

1. Kata Pengantar

Pembangunan bahagian hadapan selalunya perlu menggunakan carta ECharts untuk memaparkan maklumat data Dalam projek, kita selalunya perlu menggunakan berbilang carta Memilih untuk merangkum komponen ECharts boleh mengurangkan jumlahnya kod dan meningkatkan kecekapan pembangunan.

2. Mengekapsulkan komponen ECharts

Mengapa kita harus merangkum komponen

• Elakkan pertindihan beban kerja dan meningkatkan kebolehgunaan semula

• Jadikan logik kod lebih jelas dan memudahkan penyelenggaraan projek kemudiannya

• Komponen merangkum membolehkan pengguna tidak mengambil berat tentang pelaksanaan dalaman dan prinsip komponen . Ia membolehkan pasukan berjalan dengan cara yang lebih baik dan berhierarki

Komponen ECharts yang dikapsulkan melaksanakan fungsi berikut: 🎜>Gunakan komponen untuk menghantar atribut dalam

ECharts

• menetapkan saiz carta secara manual/automatikoption

• carta sendiri Sesuaikan dengan lebar dan tinggi

• Paparan dinamik data bahagian belakang yang diperoleh

• Artikel ini menggunakan kaedah penulisan vue3 + skrip taip.

Pelaksanaan kod:

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

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

Kesan:

Atas ialah kandungan terperinci Bagaimana untuk merangkum komponen ECharts dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!