vue3 で ECharts コンポーネントをカプセル化する方法-Vue.js-php.cn

vue3 で ECharts コンポーネントをカプセル化する方法

王林

リリース： 2023-05-20 15:22:06

転載

2112 人が閲覧しました

1. はじめに

フロントエンド開発では、多くの場合、データ情報をレンダリングするために ECharts チャートを使用する必要があります。プロジェクトでは、多くの場合、複数のチャートを使用する必要があります。ECharts コンポーネントの再利用をカプセル化することを選択すると、コードを作成して開発効率を向上させます。

2. ECharts コンポーネントのカプセル化

コンポーネントをカプセル化する理由

ワークロードの重複を回避し、再利用性を向上させる
コードロジックを明確にし、後のプロジェクトのメンテナンスを容易にする
コンポーネントをカプセル化することで、ユーザーはコンポーネントの内部実装や原則を気にする必要がなくなります。 . これにより、チームがより適切かつ階層的な方法で実行できるようになります。

カプセル化された ECharts コンポーネントは、次の関数を実装します:

##コンポーネントを使用して、ECharts で option 属性を渡します
##チャートサイズを手動/自動で設定します
##取得したバックエンドデータの動的表示
##この記事では vue3 タイプスクリプトの記述を使用します方法。

コードの実装:

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>

ログイン後にコピー

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>

ログイン後にコピー