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

vue3【实战】图表【组件封装】Chart （原生 ECharts ，支持自适配屏幕缩放，动态响应图表配置修改）

news 来源：原创 2025/7/14 12:15:22

效果预览

在这里插入图片描述

技术方案

vue3 ( vite | TS | AutoImport ) + Element Plus + UnoCSS + ECharts

技术要点

ECharts 实例的类型

let myChart: echarts.ECharts | null = null

默认生成随机 id

  id: {type: String,default: () => Math.random().toString(36).substring(2, 8)},

深度监听图表配置的改变

watch(props.option,() => {if (myChart) {myChart.setOption(props.option)}},{ deep: true }
)

挂载页面后，再创建图表实例

onMounted(() => {// 基于准备好的dom，初始化echarts实例myChart = echarts.init(document.getElementById(props.id))// 绘制图表myChart.setOption(props.option)if (props.autoResize) {window.addEventListener('resize', () => {myChart?.resize()})}
})

销毁页面时，销毁图表实例

onUnmounted(() => {if (props.autoResize) {window.removeEventListener('resize', () => {myChart?.resize()})}myChart?.dispose()
})

代码实现

安装依赖

npm install echarts --save

src/components/Chart.vue

<script setup lang="ts">
import * as echarts from 'echarts'const props = defineProps({option: {type: Object,default: () => ({})},id: {type: String,default: () => Math.random().toString(36).substring(2, 8)},width: {type: String,default: '100%'},height: {type: String,default: '350px'},autoResize: {type: Boolean,default: true}
})let myChart: echarts.ECharts | null = nullonMounted(() => {// 基于准备好的dom，初始化echarts实例myChart = echarts.init(document.getElementById(props.id))// 绘制图表myChart.setOption(props.option)if (props.autoResize) {window.addEventListener('resize', () => {myChart?.resize()})}
})watch(props.option,() => {if (myChart) {myChart.setOption(props.option)}},{ deep: true }
)onUnmounted(() => {if (props.autoResize) {window.removeEventListener('resize', () => {myChart?.resize()})}myChart?.dispose()
})
</script><template><div :style="{ width: width, height: height }" :id="props.id"></div>
</template>

页面使用

<script setup lang="ts">
let ChartConfig = reactive({title: {text: 'ECharts 入门示例2'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]
})
function changeChartTitle() {ChartConfig.title.text = 'ECharts 修改标题'
}
</script><template><div class="p-20"><el-button class="w-100px" type="primary" @click="changeChartTitle">修改图表标题</el-button><Chart class="m-10" height="400px" :option="ChartConfig" /></div>
</template>

vue3【实战】图表【组件封装】Chart （原生 ECharts ，支持自适配屏幕缩放，动态响应图表配置修改）

效果预览技术方案 vue3 ( vite | TS | AutoImport ) Element Plus UnoCSS ECharts 技术要点 ECharts 实例的类型 let myChart: echarts.ECharts | null null默认生成随机 id id: {type: String,default: () > Math.random().toString(36).substring(2, 8)},深度监听图…...

编程日记 2025/7/14 12:15:22

Oracle系统性能监控工具oswatcher演示

1、关于 OSW OSWatcher 的使用符合 Oracle 的标准许可条款，并且不需要额外的许可即可使用！！！！ OSWatcher (oswbb) 是一种 UNIX shell 脚本的集合，主要用于收集和归档操作系统和网络的度量，以便…...

编程日记 2025/7/14 19:13:51

Unix、GNU、BSD 风格中 ps 参数的区别

注：本文为“不同风格中 ps 命令参数的区别”相关文章合辑。未去重。 BSD 风格和 UNIX 风格中 ps 参数的区别作者：Daniel Stori 译者：LCTT Name1e5s | 2017-06-17 10:53 One Last Question ps aux 以及 ps -elf 都是查看进程的方式&…...

编程日记 2025/7/14 9:31:52

Jenkins环境一站式教程：从安装到配置，打造高效CI/CD流水线环境-Ubuntu 22.04.5 环境离线安装配置 Jenkins 2.479.1

文章目录 Jenkins环境一站式教程：从安装到配置，打造高效CI/CD流水线环境-Ubuntu 22.04.5 环境离线安装配置 Jenkins 2.479.1一、环境准备1.1 机器规划1.2 环境配置1.2.1 设置主机名1.2.2 停止和禁用防火墙1.2.3 更新系统二、安装配置Jenkins2.1 安装JDK…...

编程日记 2025/7/14 18:42:02

百度文心一言全解析

一、技术基础模型架构多层神经网络构建：深度神经网络结构，包含多个隐藏层，有效处理复杂语言信息。注意力机制运用：精准聚焦文本关键部分，理解语义关联与重要性分布。多头注意力并行：多维度分析文本&#…...

编程日记 2025/7/14 19:14:51

在python中使用布尔逻辑

布尔是python中常见类型。它的值只能是两项内容之一：true或false. 编写"if"语句若要在python中表达条件逻辑，可以使用if语句。——编写If语句离不开逻辑运算符：等于、不等于、小于、大于或等于、大于和大于或等于。在python中…...

编程日记 2025/7/12 17:15:45

【Web】AlpacaHack Round 7 (Web) 题解

Treasure Hunt flag在md5值拼接flagtxt的文件里，如 d/4/1/d/8/c/d/9/8/f/0/0/b/2/0/4/e/9/8/0/0/9/9/8/e/c/f/8/4/2/7/e/f/l/a/g/t/x/t 访问已经存在的目录状态码是301 访问不存在的目录状态码是404 基于此差异可以写爆破脚本这段waf可以用url编码绕过做个lab …...

编程日记 2025/7/14 18:31:45

汽车48V电气系统

汽车48V电气系统汽车48V电气系统汽车48V电气系统设计汽车48V电气系统测试汽车48V系统是48V供电和12V供电共存的么？48V供电系统是如何与12V供电系统共存的？48V电气系统测试的难点有哪些？在汽车48V电气系统通信测试中，如何向12V的控制器和48V的控制器供电？汽车48V电气系统通…...

编程日记 2025/7/11 8:10:10

完美解决Qt Qml窗口全屏软键盘遮挡不显示

1、前提说明：我使用的是第三方软键盘 QVirtualKeyboard QVirtualKeyboard: Qt5虚拟键盘支持中英文,仿qt官方的virtualkeyboard模块,但使用QWidget实现。 - Gitee.com 由于参考了几篇文章尝试但没有效果，链接如下： 文章一：可能…...

编程日记 2025/7/14 5:11:56

docker逃逸总结

一、检查是否在docker容器中通过以下两个地方来判断 # 是否存在此文件 ls -al /.dockerenv# 在其中是否包含docker字符串 cat /proc/1/cgroup除了上面两种外还有其他方式判断，如检测mount、fdisk -l查看硬盘、判断PID 1的进程名等也可用来辅助判断。容器逃逸…...

编程日记 2025/7/13 21:46:23

DSA 和 ECDSA 签名算法

DSA 和 ECDSA 签名算法基本介绍Java实现DSA创建密钥对签名验签 ECDSA创建密钥对签名验签 Go实现ECDSA创建密钥对签名验签 DSA创建密钥对签名验签基本介绍 DSA 是一种基于离散对数问题的数字签名算法。它使用私钥和公钥对来进行签名和验证操作。 ECDSA 是基于椭圆曲线密码体制…...

编程日记 2025/7/14 4:09:26

Scrapy的简单实现

Scrapy的简单实现 1. Scrapy是什么 Scrapy是一个用于抓取网站（即网页爬取）和从网页中提取结构化数据的开源框架。它为编写网络爬虫来抓取网站内容提供了高效、灵活的方式，并将这些信息以常见的格式保存，如JSON、CSV或XML。Scrap…...

编程日记 2025/7/14 19:04:36

Python之爬虫入门--示例（2）

一、Requests库安装可以使用命令提示符指令直接安装requests库使用 pip install requests 二、爬取JSON数据 （1）、点击网络 （2）、刷新网页 （3）、这里有一些数据类型，选择全部 &#xff08…...

编程日记 2025/7/14 18:50:16

JS的for in和for of

for...in 语句工作原理遍历属性：for...in 遍历对象的所有可枚举属性，这些属性不仅限于对象本身的属性，还包括原型链上的可枚举属性。返回键名：每次迭代时，循环变量会得到当前属性的键（即字符串形式的属…...

编程日记 2025/7/14 18:35:31

Spring IoC的基本概念

引言在 Java 中，出现了大量轻量级容器，这些容器有助于将来自不同项目的组件组装成一个有凝聚力的应用程序。这些容器的底层是它们如何执行布线的常见模式，它们将这一概念称为“控制反转”。 🏢 本章内容 🏭 IoC服务…...

编程日记 2025/7/14 19:17:57

解决GitHub项目泄露API密钥问题

文章目录所有的步骤参考gpt步骤一使用环境变量步骤二撤销并移除历史中的API密钥(1) 安装: pip install git-filter-repo(2) 清除特定文件 git filter-repo --path PATH_TO_YOUR_FILE --invert-paths出错解决步骤三处理移除的 origin 远程步骤四强制推送到GitHub步骤五重…...

编程日记 2025/7/13 23:47:55

【BUG】VMware｜vmrest正在运行此虚拟机，无法配置或删除快照

VMware版本：VMware 16 文章目录省流版问题解决方案详细解释版问题解决方案总结省流版问题只读，因为vmrest正在运行虚拟机。解决方案参考：虚拟机设置，只读，因为vmrest正在运行此虚拟机。有谁遇到过这种问题吗&…...

编程日记 2025/7/14 18:56:06

Ruby On Rails 笔记2——表的基本知识

Active Record Basics — Ruby on Rails Guides Active Record Migrations — Ruby on Rails Guides 原文链接自取 1.Active Record是什么？ Active Record是MVC模式中M的一部分，是负责展示数据和业务逻辑的一层，可以帮助你创建和使用Ruby…...

编程日记 2025/7/14 5:17:06

VideoConvertor.java ffmpeg.exe

VideoConvertor.java ffmpeg.exe 视频剪切原理入点和出点选中时间点，导出...

编程日记 2025/7/13 15:03:47

java.lang.IllegalStateException: Error processing condition on org.springframework.boot.autoconfigur

在运行代码的过程中，报出以下错误： java.lang.IllegalStateException: Error processing condition on org.springframework.boot.autoconfigure.data.redis.RedisAutoConfiguration.redisTemplate 或者是： Caused by: java.lang.IllegalArgu…...

编程日记 2025/7/9 20:49:58

C#设计模式--策略模式（Strategy Pattern）

策略模式是一种行为设计模式，它使你能在运行时改变对象的行为。在策略模式定义了一系列算法或策略，并将每个算法封装在独立的类中，使得它们可以互相替换。通过使用策略模式，可以在运行时根据需要选择不同的算法，而不需…...

编程日记 2025/7/11 2:38:29

Webpack Tree Shaking 技术原理及应用实战，优化代码，精简产物

前言在前端开发中，优化代码体积和提升应用性能是至关重要的课题。Webpack 提供了多种优化手段来帮助开发者实现这一目标，Tree Shaking 就是其中一种非常重要的优化技术，它通过在编译阶段移除未被使用的代码模块，从而显著减小最终…...

编程日记 2025/7/13 8:21:09

C++（十二）

前言： 本文将进一步讲解C中，条件判断语句以及它是如何运行的以及内部逻辑。一，if-else,if-else语句。在if语句中，只能判断两个条件的变量，若想实现判断两个以上条件的变体，就需要使用if-else,if-else语…...

编程日记 2025/7/14 16:26:51

ModelScope-Agent(1): 基于开源大语言模型的可定制Agent系统

目录简介快速入门简介 github地址快速入门看前两篇，调用千问API和天气API # 选用RolePlay 配置agent from modelscope_agent.agents.role_play import RolePlay # NOQArole_template 你扮演一个天气预报助手，你需要查询相应地区的天气&#x…...

编程日记 2025/7/13 17:23:05

Jmeter进阶篇（30）深入探索 JMeter 监听器

前言在性能测试领域里，Apache JMeter 是一款经典而强大的工具，而其中的监听器（Listeners）组件更是发挥着不可或缺的关键作用。监听器就像敏锐的观察者，默默记录测试执行过程中的各种数据，作为系统性能分析的数据依据。本文将带你全方位走进 JMeter 监听器的奇妙世界，…...

编程日记 2025/7/13 18:43:16

HTTP multipart/form-data 请求

序言最近在写项目的过程中有一个需求是利用 HTTP 协议传输图片和视频，经过查询方法相应的方法发现使用 multipart/form-data 的方式，这是最常见处理二进制文件的表单编码类型。学习了一下午，现在总结一下使用的方法和相关的知识点&#x…...

编程日记 2025/7/10 22:12:40

记录关于阿里云智能媒体预览pdf文件的问题

pdf仅支持预览，不支持编辑，需要将权限设置成只读。 readonly参数一定要传，不能不传！！！！ readonly的设置一定要用示例提供的方法！！！！ 用WebofficeP…...

编程日记 2025/7/3 6:41:36

Milvus向量数据库01-基础概念

Milvus向量数据库01-基础概念 Zilliz Cloud 集群由全托管 Milvus 实例及相关计算资源构成。您可以在 Zilliz Cloud 集群中创建 Collection，然后在 Collection 中插入 Entity。Zilliz Cloud 集群中的 Collection 类似于关系型数据库中的表。Collection 中的 Entity …...

编程日记 2025/7/7 5:18:52

字节高频算法面试题：小于 n 的最大数

问题描述（感觉n的位数需要大于等于2，因为n的位数1的话会有点问题，“且无重复”是指nums中存在重复，但是最后返回的小于n最大数是可以重复使用nums中的元素的）： 思路： 先对nums倒序排序暴力回…...

编程日记 2025/7/14 16:57:40

PowerShell 脚本实战：解决 GitLab 仓库文件批量重命名难题

使用PowerShell脚本解决文件重命名问题：一次实践经验分享在软件开发过程中，我们经常会遇到需要批量处理文件的情况。最近，我在一个项目中就遇到了这样一个需求：将GitLab仓库中所有的.ts和.py文件的扩展名修改为原扩展名加上&quo…...

编程日记 2025/7/8 4:29:47

爬取的数据能实时更新吗？

在当今数字化时代，实时数据更新对于企业和个人都至关重要。无论是市场分析、商品类目监控还是其他需要实时数据的应用场景，爬虫技术都能提供有效的解决方案。本文将探讨如何利用PHP爬虫实现数据的实时更新，并提供相应的代码示例。 1. 实时数…...

编程日记 2025/7/11 22:32:37

【SKFramework框架核心模块】3-6、FSM有限状态机模块

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群：398291828小红书小破站大家好，我是佛系工程师☆恬静的小魔龙☆，不定时更新Unity开发技巧，觉得有用记得一键三连哦。一、前言【Unity3D框架】SKFramework框架完全教程《全…...

编程日记 2025/7/14 5:15:37

Python之爬虫入门（1）

目录一、简介二、爬虫的功能 1、爬虫的用处 2、爬虫的应用场景三、爬虫的实现步骤四、GET和POST方法 1、GET方法 （1）、简介 （2）、适用场景 2、POST方法 （1）、简介 （2）…...

编程日记 2025/7/7 23:59:21

《MySQL 表结构设计基础》

一、引言 MySQL 表结构设计是数据库开发中的重要环节，合理的设计不仅能提高数据库性能，还能使数据更易于维护和管理。本文将详细介绍 MySQL 表结构设计的基础要点。在数据库开发中，MySQL 表结构设计的重要性不言而喻。一个良好的表结构设计…...

编程日记 2025/7/1 11:49:29

微信小程序 - 解决报错{“errno“：600001,“errMsg“：“request：fail errcode：-202cronet_error_code：-202error_msg：net：：

前言关于此问题网上的教程都无法解决，如果您的报错信息与我相似，即可解决。在微信小程序开发中，详细解决小程序请求接口报错：{“errno”：600001,“errMsg”：“request：fail errcode：-202cronet_error_code：-202error_msg：net：：ERR_CERT_AUTH ORITY_INVALID”}，微…...

编程日记 2025/7/12 14:25:13

k8s 为什么需要Pod？

Pod，是 Kubernetes 项目中最小的 API 对象，更加专业的说，Pod，是 Kubernetes 项目的原子调度单位。 Pod 是 Kubernetes 里的原子调度单位。这就意味着，Kubernetes 项目的调度器，是统一按照 Pod 而非容器的资…...

编程日记 2025/7/14 11:00:30

react 使用状态管理调用列表接口渲染列表（包含条件查询，统一使用查询按钮，重置功能），避免重复多次调用接口的方法

react开发调用api接口一般使用useEffect来监听值的变化，通过值的变化与否来进行接口调用。比如我们要进行一个查询接口 const [pageParams, setPage] useState({name: ,id: ,});const [dataList, setDataList] useState([]);const getList async () > {const…...

编程日记 2025/7/8 1:19:03

常见限流算法详细解析

常见限流算法详细解析分布式系统中，由于接口API无法控制上游调用方的行为，因此当瞬时请求量突增时，会导致服务器占用过多资源，发生响应速度降低、超时、乃至宕机，甚至引发雪崩造成整个系统不可用。限流，…...

编程日记 2025/7/13 21:05:24

第四十一天 ASP应用 HTTP.sys 漏洞 iis6文件解析漏洞和短文件漏洞 access数据库泄露漏洞

前言随着时代的发展现在呀，这个ASp已经淡出大众的视线了 ，ASP之前的火爆程度无异于现在的PHP 大家的童年 4399 什么的网站都是这个搭建的ASP 简介 | 菜鸟教程那大家想问为什么你妹的这个这么火的网站搭建语言被淘汰了呢其实多半是以为它的不开…...

编程日记 2025/7/14 14:54:37

LLM输出评估标准

LLM输出评估标准 LLM评估方法响应的完整性和简洁性：确定大模型的响应是否完全解决用户查询，简洁性则评估生成响应的相关性。文本相似性指标：将生成的文本与参考文本进行比较，评估它们的相似度，并给出得分以理解大模…...

编程日记 2025/7/9 11:47:06

ansible学习笔记之02command模块与shell模块

目录 1、概述 2、模块介绍 2.1 command模块 2.2 shell模块 2.3 小结 3、实验 3.1 测试ls命令 3.2 测试环境变量 3.3 测试操作符">" 1、概述本文介绍ansible的command模块与shell模块，并通过实验比对两个模块的异同。 2、模块介绍 2.1…...

编程日记 2025/7/14 10:26:30

Python 在同一/或不同PPT文档之间复制幻灯片

复制幻灯片可以帮助我们更高效地完成工作，节省大量的制作时间。通过复制现有的幻灯片，可以快速创建新的演示文稿，而无需重新设计板式样式等。此外，复制幻灯片还可以帮助我们保持内容的一致性，使整个PPT演示文稿看起来更…...

编程日记 2025/7/9 9:10:53

4. React 性能优化技巧：如何让你的应用更快

在构建大型应用时，性能优化是一个非常重要的话题。React 提供了许多优化工具，帮助我们提高应用的渲染速度和响应能力。本文将分享一些常见的 React 性能优化技巧。 4.1. 使用 React.memo 缓存组件当组件的 props 没有变化时，React 默认不会…...

编程日记 2025/7/13 8:38:25

云标准：云计算标准

目录云计算标准的定义和分类云计算标准的内容云计算标准的重要性云计算标准化组织 5.云计算标准的具体实例云计算标准是确保云计算技术、服务和应用发展的重要规范，它们对于提高云计算系统的互操作性、可靠性和安全性至关重要。以下是对云计算标准的详细解…...

编程日记 2025/7/9 1:04:07

Redis【2】- SDS源码分析

1 简介&基础用法 Redis 中用得最多的就是字符串，在 C 语言中其实可以直接使用 char* 字符数组来实现字符串，也有很多可以直接使用得函数。但是 Redis 并没有使用 C 语言原生的字符串，而是自己实现了一个 SDS（简单动态字符串&…...

编程日记 2025/7/14 19:04:40

力扣打卡8：最长上升子序列

链接：300. 最长递增子序列 - 力扣（LeetCode） 本题我开始想到的是dp，复杂度为O(n^2)，这也是很经典的解法。看到进阶解法可以O(nlogn)，想到可能是要用到二分，但是，我想到的是和map排…...

编程日记 2025/7/12 11:19:48

记录一次老平台改造通知用户刷新页面，纯前端实现

记录一次老平台改造通知用户刷新页面，纯前端实现方案概述背景现状问题本质方案设计前提设计实现其他补充写在最后的话抛出一个问题方案概述背景前端构建完上线，用户还停留还在老页面，用户不知道网页重新部署了，跳转页面的时…...

编程日记 2025/7/14 1:25:46

ubuntu22.04 使用可以用的镜像源获取你要的镜像

默认的是不行的不管pull啥镜像仍然会出现这个错误 Error response form daemon:Get "https://registry-1.docker.io/v2": net/http: request canceled while waiting for connection (Client.Timeout exceeded while await) 操作方法是如果在目录没有/etc/docker…...

编程日记 2025/7/9 13:02:37