vue3封装ECharts组件详解

 更新时间:2023年04月27日 10:54:20   作者:Huang_xianlong  
前端开发需要经常使用ECharts图表渲染数据信息,在一个项目中我们经常需要使用多个图表,选择封装ECharts组件复用的方式可以减少代码量,增加开发效率。感兴趣的可以阅读一下本文

一、前言

前端开发需要经常使用ECharts图表渲染数据信息,在一个项目中我们经常需要使用多个图表,选择封装ECharts组件复用的方式可以减少代码量,增加开发效率。

二、封装ECharts组件

为什么要封装组件

  • 避免重复的工作量,提升复用性
  • 使代码逻辑更加清晰,方便项目的后期维护
  • 封装组件可以让使用者不去关心组件的内部实现以及原理,能够使一个团队更好的有层次的去运行

封装的ECharts组件实现了以下的功能:

  • 使用组件传递ECharts中的 option 属性
  • 手动/自动设置chart尺寸
  • chart自适应宽高
  • 动态展示获取到的后端数据

本文使用的是vue3 + typescript的写法。

代码实现:

ECharts组件:

<template>
  <div :id="id" :class="className" :style="{ height, width }" />
</template>
<script setup lang="ts">
//按需导入需要用到的 vue函数 和 echarts
import { onMounted, onBeforeUnmount, defineProps, watch } from "vue";
import * as echarts from 'echarts';
//获取 dom 和 父组件数据 并定义"myChart"用于初始化图表
let myChart: echarts.ECharts;
const props = defineProps({
  id: {
    type: String,
    default: 'chart',
    required: true
  },
  className: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%',
  },
  height: {
    type: String,
    default: '300px',
  },
  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: 'svg' })
  myChart.showLoading({
    text: '',
    color: '#409eff',
    textColor: '#000',
    maskColor: 'rgba(255, 255, 255, .95)',
    zlevel: 0,
    lineWidth: 2,
  });
  if (!props.loading) {
    myChart.hideLoading();
    myChart.setOption(props.fullOptions.options, true);
  }
  //自适应不同屏幕时改变图表尺寸
  window.addEventListener('resize', cancalDebounce);
})
//页面销毁前,销毁事件和实例
onBeforeUnmount(() => {
  window.removeEventListener('resize', 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 '@/components/Echarts/Echarts.vue';
// 引进Echarts 的options配置文件,可根据项目模块来创建该配置文件
import chartOption from '@/components/Echarts/options';
 
const echartsOptions = reactive({
  options: { },
  init: false
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式,传进options中的两个参数data(图表的数据)和dimension(图表的维度),
onMounted(() => {
  const testData = [26,27,24,23];
  const testDimensions = ['家用电器','户外运动','汽车用品','手机数码'];
  echartsOptions.options = chartOption.testOption(testData, testDimensions);
});
</script>

效果:

到此这篇关于vue3封装ECharts组件详解的文章就介绍到这了,更多相关vue3封装ECharts内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • uniapp使用uview的简单案例

    uniapp使用uview的简单案例

    uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,这篇文章主要给大家介绍了关于uniapp使用uview的简单案例,需要的朋友可以参考下
    2023-03-03
  • Vue源码学习记录之手写vm.$mount方法

    Vue源码学习记录之手写vm.$mount方法

    在我们开发中,经常要用到Vue.extend创建出Vue的子类来构造函数,通过new 得到子类的实例,然后通过$mount挂载到节点,今天通过本文给大家讲解手写vm.$mount方法 ,感兴趣的朋友一起看看吧
    2022-11-11
  • VUE页面中加载外部HTML的示例代码

    VUE页面中加载外部HTML的示例代码

    本篇文章主要介绍了VUE页面中加载外部HTML的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 一文详解VueUse中useAsyncState的实现原理

    一文详解VueUse中useAsyncState的实现原理

    在Vue 3 Composition API中,我们可以使用自定义钩子函数来封装可复用的逻辑,useAsyncState是一个用于管理异步状态的自定义钩子函数,本文将给大家介绍一下useAsyncState的实现原理,感兴趣的朋友可以参考下
    2024-01-01
  • Vue使用el-upload批量上传图片时报错问题处理方法

    Vue使用el-upload批量上传图片时报错问题处理方法

    相信大家都知道在element-ui中,el-upload可以进行文件多选操作,下面这篇文章主要给大家介绍了关于Vue使用el-upload批量上传图片时报错问题的处理方法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • 如何处理vue router 路由传参刷新页面参数丢失

    如何处理vue router 路由传参刷新页面参数丢失

    这篇文章主要介绍了如何处理vue router 路由传参刷新页面参数丢失,对vue感兴趣的同学,可以参考下
    2021-05-05
  • Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

    Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)

    今天小编就为大家分享一篇Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue-以文件流-blob-的形式-下载-导出文件操作

    vue-以文件流-blob-的形式-下载-导出文件操作

    这篇文章主要介绍了vue-以文件流-blob-的形式-下载-导出文件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue单文件组件基础模板小结

    Vue单文件组件基础模板小结

    本篇文章主要介绍了Vue单文件组件基础模板小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue中v-model、v-bind和v-on三大指令的区别详解

    vue中v-model、v-bind和v-on三大指令的区别详解

    v-model和v-bind都是数据绑定的方式,下面这篇文章主要给大家介绍了关于vue中v-model、v-bind和v-on三大指令的区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11

最新评论