How to encapsulate ECharts components in vue3

1. Foreword

Front-end development often needs to use ECharts charts to render data information. In a project, we often need to use multiple charts. Choosing to encapsulate ECharts component reuse can reduce the amount of code and increase development. efficiency.

2. Encapsulating ECharts components

Why should we encapsulate components

• Avoid duplication of workload and improve reusability

• Make the code logic clearer and facilitate the later maintenance of the project

• Encapsulating components allows users not to care about the internal implementation and principles of the components. It enables a team to run in a better and hierarchical manner

The encapsulated ECharts component implements the following functions:

• Use components to pass option attributes in ECharts

• ##Manually/automatically set the chart size

• chart adaptive width and height

• Dynamic display of the acquired back-end data

This article uses the vue3 typescript writing method .

Code implementation:

ECharts component:

<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 component usage:

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

Effect:

The above is the detailed content of How to encapsulate ECharts components in vue3. For more information, please follow other related articles on the PHP Chinese website!