当前位置: 首页 > news >正文

vue3 封装ECharts组件

一、前言

前端开发需要经常使用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 形式,预防页面缩放而出现模糊问题;图表过于复杂时建议使用 CanvasmyChart = 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><Echartsid="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>

options.ts文件

// 所有用到的 echarts option 都在这里进行配置
const chartOption = {// 温湿度折线图testOption(data: any, dimensions: any) {const option = {grid: {left: '2%',right: '2%',bottom: '10%',containLabel: true},legend: {top: 'bottom',textStyle: {color: '#999'}},dataset: {dimensions: dimensions,source: data},series: [{name: 'Nightingale Chart',type: 'pie',radius: [50, 130],center: ['50%', '50%'],roseType: 'area',itemStyle: {borderRadius: 1,color: function (params: any) {//自定义颜色const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];return colorList[params.dataIndex];}}}]};return option;}
}

效果:

相关文章:

vue3 封装ECharts组件

一、前言 前端开发需要经常使用ECharts图表渲染数据信息&#xff0c;在一个项目中我们经常需要使用多个图表&#xff0c;选择封装ECharts组件复用的方式可以减少代码量&#xff0c;增加开发效率。 ECharts图表大家应该用的都比较多&#xff0c;基础的用法就不细说了&#xff…...

Spring Security 6.0系列【30】授权服务器篇之JOSE规范

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 3.0.4 本系列Spring Security 版本 6.0.2 本系列Spring Authorization Server 版本 1.0.2 源码地址:https://gitee.com/pearl-organization/study-spring-security-demo 文章目录 1. 前言2. JOSE 规范3. JW…...

维度表设计原则

维度的作用一般是查询约束、分类汇总以及排序等&#xff0c;我们在进行维度表设计时&#xff0c;应当提前考虑&#xff1a; &#xff08;1&#xff09;维度属性尽量丰富&#xff0c;为数据使用打下基础 比如淘宝商品维度有近百个维度属性&#xff0c;为下游的数据统计、分析、…...

【requests模块上】——02爬虫基础——如桃花来

目录索引 requests请求&#xff1a;1. 基于get请求&#xff1a;*基础写法&#xff1a;**带参数的get请求&#xff1a;* 2. 基于post请求&#xff1a; 获取数据&#xff1a;1. 获取json数据&#xff1a;2. 获取二进制数据&#xff1a; 初步伪装小爬虫——添加headers: 引入&…...

Springboot +Flowable,详细解释啥叫流程实例(一)

一.简介 上一篇中学习了Flowable 中的流程模板&#xff08;流程定义&#xff09;的部署问题&#xff0c;这一篇来学习什么叫流程实例。 部署之后的流程模板&#xff0c;还不能直接运行&#xff0c;例如我们部署了一个请假流程&#xff0c;现在 张三想要请假&#xff0c;他就需…...

信息安全复习十:Web与电子商务安全

一、章节梗概 1.信息安全的学科内容 2.Web和电子商务安全问题提出 3.安全套接字协议SSL与传输层安全协议TLS 4.安全电子交易(SET)简要介绍 复习&#xff1a; 密码学内容&#xff1a;对称密钥密码、公开密钥密码、报文鉴别 PKI&#xff1a;数字签名、数字证书、信任关系 身份认…...

flutter 启动其他app server或者页面失败

1.目标Service 设置 android:exported"true" 2.目标Service需要声明自定义权限。客户端需要声明权限。 3.目标Service需要添加<intent-filter></intent-filter> 检查以上的声明和权限&#xff0c; 如果还是不行 说明是 Android 11引入了*包可见性*’ …...

【linux-进程2】进程控制

&#x1f308;环境变量 &#x1f344;初识 系统带的命令可以直接运行&#xff08;ls ll命令等&#xff09;&#xff0c;但是我们自己写的命令必须要带上路径才能运行&#xff08;./myproc&#xff09;&#xff0c;这是什么原因导致的&#xff1f;如果我们也想自己写的命令直接…...

【五一创作】多域名环境和Office 365混合部署方案

目录 一、多域名环境是什么? 二、Office 365是什么? 三、多域名环境与Office 365的结合 总结 一、多域名环境是什么? 多域名环境指的是一个企业拥有多个域名,这些域名可能隶属于不同的子公司、部门或者品牌,但是都归属于同一个母公司。例如,一个中国电信集团旗下有…...

Vue:路由route

一、概念 1、组成 每一个路由都由 key 和 value 组成。 keyvalue路由 route。 2、本质 路由的本质&#xff1a;一个路由表达了一组对应关系。路由器的本质&#xff1a;管理多组对应关系。 3、路由的工作原理 点击之后路径变化——>路由器监视到变化——>根据路径…...

Windows系统被faust勒索病毒攻击勒索病毒解密服务器与数据库解密恢复

在近期&#xff0c;一种名为faust后缀的勒索病毒威胁已经引起了全球计算机系统安全领域的关注。faust勒索病毒是一种基于RSA加密算法的恶意软件&#xff0c;能够加密目标计算机系统上的所有文件&#xff0c;并向用户勒索赎金来承诺解密恢复操作。下面为大家介绍一下Windows系统…...

Java面试题总结 | Java面试题总结7- Redis模块(持续更新)

Redis 文章目录 Redisredis的线程模型Redis的Mysql的区别Redis和传统的关系型数据库有什么不同&#xff1f;Redis常见的数据结构zset数据结构Redis中rehash过程redis为什么不考虑线程安全的问题呢Redis单线程为什么还能这么快&#xff1f;为什么Redis是单线程的&#xff1f;red…...

虹科案例 | 如何通过智能、非接触式测量解决方案,提高起重机的安全和效率?

PART 1 案例详情 自建造初期以来&#xff0c;起重机行业已经走了很长一段路。技术的使用在行业进步中发挥了重要作用&#xff0c;降低了使用桥式起重机的危险性。特别是&#xff0c;智能、非接触式测量解决方案通过使用高架升降机更安全、更高效、更高效&#xff0c;为行业的进…...

流程图拖拽视觉编程-流程编辑器

目录 一、简介 二、流程编辑器-视图实现 三、参考资料 一、简介 前期文章&#xff1a; 流程图拖拽视觉编程--概述_Jason~shen的博客-CSDN博客 本期内容&#xff1a; 本期将介绍流程编辑器模块的实现方法&#xff0c;效果图如下所示。该模块基于QT Graphics/View实现&…...

6.hashcode与equals区别与联系

1.hashCode介绍 hashCode() 的作用是获取哈希码&#xff0c;也称为散列码;它实际上是返回一个int整数。 这个哈希码的作用是确定该对象在哈希表中的索引位置。hashCode() 定义在JDK的Object.java中&#xff0c;这就意味着Java中的任何类都包含有hashCode() 函数。 2.equals介…...

智能家居“落地者”:三翼鸟用场景方案持续链接大众消费

互联网分析沙龙(techxue)原创 作者 &#xff5c; 锡海 编辑 &#xff5c; 七喜 从上海车展再到AWE2023展会&#xff0c;只要有大型活动的地方&#xff0c;都能看到人潮汹涌的景象&#xff0c;久违的烟火气又回来了。数据显示&#xff0c;社会消费已出现较为强劲反弹&#xff0…...

【MATLAB图像处理实用案例详解(12)】——利用BP神经网络实现图像压缩

目录 一、图像压缩二、BP神经网络实现图像压缩原理三、算法步骤3.1 图像块划分3.2 归一化3.3 建立BP神经网络3.4 保存结果 四、效果演示 一、图像压缩 常见的文件压缩软件如WinZip、WinRAR等采用的是无损压缩&#xff0c;能够完全恢复原文件内容。多媒体信息具有信息量大、冗余…...

java学习之枚举

目录 一、枚举引出 二、分析问题 三、 解决方案-枚举 四、枚举的二种实现方式 五、应用案例 六、小结 一、枚举引出 package enum_;public class Enumeration01 {public static void main(String[] args) {Season spring new Season("春天", "温暖")…...

IPsec中IKE与ISAKMP过程分析(主模式-消息2)

IPsec中IKE与ISAKMP过程分析&#xff08;主模式-消息1&#xff09;_搞搞搞高傲的博客-CSDN博客 IPsec协议族中IKE&#xff08;Internet Key Exchange&#xff09;是一种基于ISAKMP的协议&#xff0c;它为建立IPSec安全通信隧道提供了一种无痕密钥交换的机制。简单来说&#xff…...

KDZR-10A三相直流电阻测试仪

一、产品概述 直流电阻的测量仪是变压器、互感器、电抗器、电磁操作机构等感性线圈制造中半成品、成品出厂试验、安装、交接试验及电力部门预防性试验的项目&#xff0c;能有效发现感性线圈的选材、焊接、连接部位松动、缺股、断线等制造缺陷和运行后存在的隐患。 为了满足感…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

MySQL 隔离级别:脏读、幻读及不可重复读的原理与示例

一、MySQL 隔离级别 MySQL 提供了四种隔离级别,用于控制事务之间的并发访问以及数据的可见性,不同隔离级别对脏读、幻读、不可重复读这几种并发数据问题有着不同的处理方式,具体如下: 隔离级别脏读不可重复读幻读性能特点及锁机制读未提交(READ UNCOMMITTED)允许出现允许…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时&#xff0c;显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...