vue3怎么封装ECharts组件

这篇文章主要介绍了vue3怎么封装ECharts组件的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3怎么封装ECharts组件文章都会有所收获，下面我们一起来看看吧。

一、前言

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

二、封装ECharts组件

为什么要封装组件

• 避免重复的工作量，提升复用性

• 使代码逻辑更加清晰，方便项目的后期维护

• 封装组件可以让使用者不去关心组件的内部实现以及原理，能够使一个团队更好的有层次的去运行

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

• 使用组件传递ECharts中的option属性

• 手动/自动设置chart尺寸

• chart自适应宽高

• 动态展示获取到的后端数据

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

代码实现：

ECharts组件：

<template><div:id="id":class="className":/></template><scriptsetuplang="ts">//按需导入需要用到的vue函数和echartsimport{onMounted,onBeforeUnmount,defineProps,watch}from"vue";import*asechartsfrom'echarts';//获取dom和父组件数据并定义"myChart"用于初始化图表letmyChart:echarts.ECharts;constprops=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},})//重绘图表函数constresizeHandler=()=>{myChart.resize();}//设置防抖，保证无论拖动窗口大小，只执行一次获取浏览器宽高的方法constdebounce=(fun:{():void;():void;},delay:number|undefined)=>{lettimer:number|undefined;returnfunction(){if(timer){clearTimeout(timer);}timer=setTimeout(()=>{fun();},delay);}};constcancalDebounce=debounce(resizeHandler,50);//页面成功渲染，开始绘制图表onMounted(()=>{//配置为svg形式，预防页面缩放而出现模糊问题；图表过于复杂时建议使用CanvasmyChart=echarts.init(document.getElementById(props.id)asHTMLDivElement,{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><Echartsid="echarts"height="300px":full-options="echartsOptions":loading="loading"></Echarts></template><scriptsetuplang="ts">//引进Echarts组件importEchartsfrom'@ponents/Echarts/Echarts.vue';//引进Echarts的options配置文件，可根据项目模块来创建该配置文件importchartOptionfrom'@ponents/Echarts/options';constechartsOptions=reactive({options:{},init:false});//此处可请求接口来获取数据//我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），onMounted(()=>{consttestData=[26,27,24,23];consttestDimensions=['家用电器','户外运动','汽车用品','手机数码'];echartsOptions.options=chartOption.testOption(testData,testDimensions);});</script>

效果：

关于“vue3怎么封装ECharts组件”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3怎么封装ECharts组件”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注主机评测网行业资讯频道。

上一篇：vue中的事件修饰符有哪些及如何使用

下一篇：vue中axios的post请求,415错误问题怎么解决

---