vue3封装echarts组件---通俗易懂

1、封装的原因

如果在vue项目中有多个组件或者同个组件多出地方需要不同的图表,因此自己封装一个方便多次复用的Mycharts图表组件。

2、具体步骤:

2.1 安装echarts

pnpm i echarts --save

2.2 新建MyCharts组件 :

~components/echarts/MyCharts.vue:

这里需要引入echarts:

import * as echarts from 'echarts';

<template><div><!-- 准备一个有宽高的dom ———— 其他内容从父组件传过来 --><div :id="uid" :style="style"></div></div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts';
const props =  defineProps({dataSource: {type: Object,default: null,required: true},canvasWidth: {type: String,default: '',required: true},canvasHeight: {type: String,default: '',required: true}
})
const uid = ref('')
const myChart = ref(null)
// 时间戳+随机字符
uid.value = new Date().getTime() + Math.random().toString(32).slice(2, 10)
console.log('uid:', uid.value);let style = computed(() => ({width: props.canvasWidth,height: props.canvasHeight
}))
console.log('style:', style.value);const init = () => {// 基于准备好的dom,初始化echarts实例myChart.value = echarts.init(document.getElementById(uid.value))// 绘制图表myChart.value.setOption(props.dataSource)
}
onMounted(() => {// nextTick(() => {//     init()// })init()
})</script>
<style scoped></style>

2.3 需要调用MyCharts组件的父组件:

<template><div :style="{ transform: `scale(${scale})` }"><div class="title">封装echarts图表</div><!-- 调用图表组件 --><MyCharts :dataSource="dataSource" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"></MyCharts><MyCharts :dataSource="dataSource2" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight"></MyCharts></div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import MyCharts from '../../components/echarts/MyCharts.vue'    // 引入封装的图表组件
import { useSelfAdaption } from '../../hooks/useSelfAdaption'const dataSource = reactive({title: {text: '周销售总额'},tooltip: {},xAxis: {data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {},series: [{name: '小米',type: 'bar',data: [60, 45, 52, 38, 49, 55, 66]}]
})
const dataSource2 = reactive({title: {text: '数据都想躺平'},tooltip: {},xAxis: {data: ['梦想', '咸鱼', '躺平', '鸡汤', '努力', '暴富']},yAxis: {},series: [{name: 'vivo',type: 'line',data: [50, 80, 66, 70, 69, 71]}]
})
const canvasWidth = ref('400px')
const canvasHeight = ref('200px')// 自适应 - 缩放
const { scale } = useSelfAdaption()</script>
<style lang="less" scoped>
.title{text-align: center;
}
</style>

3、效果:

4、这里我还引入了前面封装好的自适应大屏的useSelfAdaption的hooks方法 :

import { useSelfAdaption } from '../../hooks/useSelfAdaption'// 自适应 - 缩放
const { scale } = useSelfAdaption()

使用: :style="{ transform: `scale(${scale})` }"

<template><div :style="{ transform: `scale(${scale})` }"><div class="title">封装echarts图表</div>

这样你就成功封装好了一个echarts图表组件并成功使用啦!

扩展:

        性能优化:

在数据可视化大屏中,图表的性能尤为重要。我们可以通过以下方式进行优化:

合理使用debounce来减少窗口大小变化时的resize事件触发频率。
使用canvas渲染模式,相比于svg,canvas在大数据量下有更好的性能表现。
利用ECharts的showLoading和hideLoading方法,在数据加载时显示加载动画,避免用户看到空白的图表。

        交互优化:

为了提升用户体验,我们可以增加一些交互功能:

提供缩放控制,允许用户通过鼠标滚轮或者按钮来缩放图表。
实现图表的导出功能,允许用户将当前的图表保存为图片或者PDF文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22023.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

x264 参考帧管理原理:i_poc 变量

POC H.264中的POC(Picture Order Count)用于表示解码帧的显示顺序。当视频码流中存在B帧时,解码顺序和显示顺序可能不一致,因此需要根据POC来重新排列视频帧的显示顺序,以避免跳帧或画面不连贯的问题。 具体来说,POC的作用包括: 重排显示顺序:POC确保即使在存在B帧的情…

基于javacv ffmpeg 使用原生ffmpeg命令

基于javacv ffmpeg 使用原生ffmpeg命令 1. ffmpeg2. ffprobe 相关阅读&#xff1a; javacv ffmpeg使用笔记 测试过程中&#xff0c;发现ffmpeg-6.0-1.5.9-linux-x86_64.jar 存在问题&#xff08;ffmpeg原生命令执行失败&#xff09;&#xff0c;降级到ffmpeg-5.1.2-1.5.8-linux…

RPG Maker MV 踩坑十一 精灵及背景绘制问题

精灵绘制问题 RPG Maker MV战斗问题入场飞身战斗背景绘制精灵集及精灵 RPG Maker MV战斗问题 在RMMV中战斗是在场景中调用战斗管理器&#xff0c;通过管理器去操作角色对象行动及精灵的绘制的。 入场飞身 在其中就发现一个问题加载图片进场时&#xff0c;会偏高&#xff0c;…

Python编程学习第一篇——Python零基础快速入门(五)—元组(Tuple)操作

Python元组是一种不可变的有序集合&#xff0c;可以存储多个不同类型的数据。元组使用小括号来表示&#xff0c;其中的元素用逗号分隔开。与列表不同&#xff0c;元组的元素不能被修改、删除或添加。它的一些常规操作包括元组的创建、访问、添加、修改、删除、运算等等&#xf…

电力电子功率模块在工程应用中测温NTC的使用

电力电子功率模块在工程应用中测温NTC的使用 1.概述2.什么是NTC3.模块内部NTC3.1 绝缘隔离措施3.2 NTC热量考虑 4.使用模拟方法测量NTC温度4.1 分压电阻大小 5.使用数字方法测量NTC温度 1.概述 最近做项目的时候突然被问到一个问题。做实验测温用的NTC到底怎么用&#xff1f;为…

【Python】超时请求或计算的处理

超时机制 一般应用于处理阻塞问题 场景&#xff1a; 复杂度较大的计算&#xff08;解析&#xff09;某个数值、加解密计算等请求中遇到阻塞&#xff0c;避免长时间等待网络波动&#xff0c;避免长时间请求&#xff0c;浪费时间 1. requests 请求超时机制 reqeusts 依赖中的…

[大师C语言(第十九篇)]C语言函数式编程技术详解

引言 函数式编程&#xff08;Functional Programming&#xff0c;FP&#xff09;是一种编程范式&#xff0c;强调通过使用纯函数和不可变数据来编写代码。这种范式具有许多优点&#xff0c;如易于测试、可维护性高、并发友好等。尽管C语言被认为是一种过程式编程语言&#xff…

JAVA设计模式-策略模式及在Springboot2.X中写法

JAVA设计模式-策略模式及在Springboot2.X中写法 一、经典的策略模式写法二、Springboot2.X中策略模式写法 策略模式的定义&#xff1a;策略模式是一种行为型设计模式,定义了一系列算法,并将每个算法封装起来,使它们可以互相替换 策略模式&#xff1a;在策略模式&#xff08;Str…

算法 java 排序和查找

排序和查找 冒泡排序&#xff08;稳定&#xff09;选择排序&#xff08;不稳定&#xff09;插入排序&#xff08;稳定&#xff09;希尔排序&#xff08;不稳定&#xff09;归并排序&#xff08;稳定&#xff09;快速排序&#xff08;不稳定&#xff09;堆排序计数排序桶排序基数…

YOLOv8+PyQt5海洋船只检测(可以重新训练,yolov8模型,从图像、视频和摄像头三种路径识别检测)

1.效果视频&#xff1a;海洋船只检测yoloV8检测&#xff08;https://mbd.pub/o/bread/mbd-ZpaYk55r&#xff09;_哔哩哔哩_bilibili资源包含可视化的海洋船只检测系统&#xff0c;可对于高空拍摄到的海洋图片进行轮船检测&#xff0c;基于最新的YOLOv8训练的海洋船只检测模型&a…

多线程知识-11

Runnable 和 Thread 用哪个好 使用Runnable接口的好处是&#xff1a; 避免了单继承的限制&#xff1a;当你的类已经继承了另一个类时&#xff0c;你仍然可以实现Runnable接口来创建线程。提高代码的复用性&#xff1a;你可以将Runnable对象传递给多个线程来执行&#xff0c;从…

C++设计模式-策略模式,AI角色动态选择行为

运行在VS2022&#xff0c;x86&#xff0c;Debug下。 27. 策略模式 策略模式让算法的选择与使用独立开来&#xff0c;使得代码更灵活、可扩展和易维护。应用&#xff1a;如在游戏开发中&#xff0c;AI角色需要根据环境和条件做出不同的行为&#xff0c;如寻路、攻击、躲避等。可…

深度解析CSS中为什么会有Stacking Context的概念

CSS中的堆叠上下文&#xff08;Stacking Context&#xff09;概念是为了管理和控制网页元素的重叠顺序而引入的。堆叠上下文的引入解决了以下几个关键问题&#xff1a; 层次管理&#xff1a; 在网页中&#xff0c;多个元素可能会相互重叠&#xff0c;堆叠上下文定义了这些元素的…

01-CompressionWebpackPlugin---提高 Web 应用性能的利器

CompressionWebpackPlugin—提高 Web 应用性能的利器 笔记分享 在现代 Web 开发中&#xff0c;优化资源加载速度是提升用户体验的重要环节。减少文件大小可以显著提升网页加载速度&#xff0c;从而改善用户体验。CompressionWebpackPlugin 是一个强大的 Webpack 插件&#xff…

【安装笔记-20240529-Windows-Electerm 终端工具】

安装笔记-系列文章目录 安装笔记-20240529-Windows-Electerm 终端工具 文章目录 安装笔记-系列文章目录安装笔记-20240529-Windows-Electerm 终端工具 前言一、软件介绍名称&#xff1a;Wireshark主页官方介绍功能特性 二、安装步骤测试版本&#xff1a;electerm-1.39.35-win-…

【蓝桥杯】常见的数据结构

&#x1f338;个人主页&#xff1a;Yang-ai-cao &#x1f4d5;系列专栏&#xff1a;蓝桥杯 C语言 &#x1f34d;博学而日参省乎己&#xff0c;知明而行无过矣 目录 &#x1f338;个人主页&#xff1a;Yang-ai-cao &#x1f4d5;系列专栏&#xff1a;蓝桥杯 C语言 &…

Spring项目中Ordered接口的应用:全局过滤器(GlobalFilter)的顺序控制

在Spring框架&#xff0c;尤其是Spring Cloud Gateway或Spring WebFlux项目中&#xff0c;Ordered接口扮演着重要的角色&#xff0c;特别是在实现全局过滤器(GlobalFilter)时&#xff0c;用于控制过滤器执行的优先级。下面将介绍如何在Spring项目中使用Ordered接口来管理Global…

【AIoT-Robot】3d hand pose

手语是聋哑人士的主要沟通工具,它是利用手部和身体的动作来传达意义。虽然手语帮助它的使用者之间互相沟通,但聋哑人士与一般人的沟通却十分困难,这个沟通障碍是源于大部分人不懂得手语。 1. 手势&&手语 手势:手的姿势 ,通常称作手势。它指的是人在运用手臂时,所…

初识springcloud

springcloud eureka eureka的作用 消费者该如何获取服务提供者具体信息&#xff1f; 服务提供者启动时向eureka注册自己的信息,eureka保存这些信息消费者,根据服务名称向eureka拉取提供者信息 如果有多个服务提供者&#xff0c;消费者该如何选择&#xff1f; 服务消费者利…

创建模块

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中&#xff0c;自定义模块有两个作用&#xff1a;一个是规范代码&#xff0c;让代码更易于阅读&#xff0c;另一个是方便其他程序使用已经编…