vue3实现echarts——小demo
版本:
效果:
代码:
<template><div class="middle-box"><div class="box-title">检验排名TOP10</div><div class="box-echart" id="chart1" :loading="loading1"></div><Empty v-if="chart1Empty" :image="simpleImage" class="box-empty" /></div>
</template>
<script setup>import { Empty } from 'ant-design-vue';import { onMounted, ref } from 'vue';import * as echarts from 'echarts';const loading1 = ref(false);const chart1Empty = ref(true);let chart1 = null;onMounted(() => {getDataOne();});const getDataOne = async () => {loading1.value = true;//接口1drawDataOne(res.data, '#595FE8');chart1Empty.value = false;loading1.value = false}// 图1const drawDataOne = (chartData, columnBarColor) => {if (chart1 != null && chart1 !='' && chart1 != undefined) {chart1.dispose(); //销毁}let chartDom = document.getElementById('chart1');chart1 = echarts.init(chartDom);let option = getColumnBarEchartsOption(chartData, columnBarColor);chart1.setOption(option);window.addEventListener('resize',, chart1.resize);};
</script>
注意事项:
1.<Empty>开始根据!chart1来显示和隐藏,但是由于chart1不是响应式数据,不能根据接口实现响应式变化。所以新增ref变量chart1Empty。不建议使用reactive里多个state对象,会有坑,如下
2.vue3和echarts的bug:如果用ref来定义变量,如下图,会出现resize失败的问题。所以推荐使用非响应式变量。比如代码中呈现的普通变量定义方式:let chart1 = null。
3.上述定义变量还会导致:柱状图和折线图的tooltip不显示问题。
原因:
Vue3 底层使用了 proxy 代理创建实例,其创建出来的实例与echarts真正使用的那个存在兼容性问题,所以Echarts 无法从中获取内部变量;故设置echarts实例时,不要使用ref、reactive等响应式方法创建echarts对象,应该使用shallowReactive、shallowRef、或者普通变量即可。
相关文章:
vue3实现echarts——小demo
版本: 效果: 代码: <template><div class"middle-box"><div class"box-title">检验排名TOP10</div><div class"box-echart" id"chart1" :loading"loading1"&…...
Python 项目依赖离线管理 pip + requirements.txt
背景 项目研发环境不支持联网,无法通过常规 pip install 来安装依赖,此时需要在联网设备下载依赖,然后拷贝到离线设备进行本地安装。 两台设备的操作系统、Python 版本尽可能一致。 离线安装依赖 # 在联网设备上安装项目所需的依赖 # -d …...
jdk动态代理代码实现
1、jdk动态代理代码实现 1、接口 public interface IUserService {void save();void delete();}2、接口实现 Service public class UserServiceImpl implements IUserService {Overridepublic void save() {System.out.println("UserServiceImpl.save");}Override…...
mybatis的xml如何使用java枚举
mybatis的xml如何使用java枚举 使用方式 ${com.haier.baseManage.enums.LoganUploadTaskTypeEnumLOG_TYPE.type} 例子 <?xml version"1.0" encoding"UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" &quo…...
SQL Server中设置端口号
在SQL Server中设置端口号可以通过SQL Server配置管理器进行。以下是具体步骤: 使用SQL Server 配置管理器设置端口 打开SQL Server配置管理器: 在Windows开始菜单中搜索“SQL Server 配置管理器”,然后打开它。 配置SQL Server网络配置&…...
CSS Border(边框)
CSS Border(边框) 引言 在网页设计中,边框是增强元素视觉效果和页面布局的重要工具。CSS 提供了丰富的边框样式属性,允许开发者自定义边框的宽度、颜色、样式等。本文将详细介绍 CSS 边框的相关属性,包括基本用法和高级技巧,帮助…...
【鸿蒙学习笔记】@Prop装饰器:父子单向同步
官方文档:Prop装饰器:父子单向同步 [Q&A] Prop装饰器作用 Prop装饰的变量可以和父组件建立单向的同步关系。Prop装饰的变量是可变的,但是变化不会同步回其父组件。 [Q&A] Prop装饰器特点 1・Prop装饰器不能在Entry装饰的…...
设计模式(实战项目)-状态模式
需求背景:存在状态流转的预约单 一.数据库设计 CREATE TABLE appointment (id bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT 主键id,appoint_type int(11) NOT NULL COMMENT 预约类型(0:线下查房...),appoint_user_id bigint(20) NOT NULL COMMENT 预约人…...
【python】OpenCV—Color Map
文章目录 cv2.applyColorMapcv2.putText小试牛刀自定义颜色 参考学习来自 OpenCV基础(21)使用 OpenCV 中的applyColorMap实现伪着色 cv2.applyColorMap cv2.applyColorMap() 是 OpenCV 中的一个函数,用于将灰度图像或单通道图像应用一个颜色…...
MySQL:表的内连接和外连接、索引
文章目录 1.内连接2.外连接2.1 左外连接2.2 右外连接 3.综合练习4.索引4.1见一见索引4.2 硬件理解4.3 MySQL 与磁盘交互基本单位(软件理解)4.4 (MySQL选择的数据结构)索引的理解4.5 聚簇索引 VS 非聚簇索引 5.索引操作5.1 创建索引5.2 查询索引5.3 删除索引 1.内连接 内连接实…...
Chrome备份数据
Chrome备份数据 1、 导出谷歌浏览器里的历史记录 参考:https://blog.csdn.net/qq_32824605/article/details/127504219 在资源管理器中找到History文件,文件路径: C:\Users\你的电脑用户名\AppData\Local\Google\Chrome\User Data\Default …...
visual studio远程调试
场景一(被远程调试的电脑) 确定系统位数 我这里是x64的 找到msvsmon.exe msvsmon.exe目录位置解释: “F:\App\VisualStudio\an\Common7\IDE\”是visual studio所在位置、 “Remote Debugger\”是固定位置、 “x64”是系统位数。 拼起来就是…...
if __name__ == “__main__“
在Python中,if __name__ "__main__": 这行代码非常常见,它用于判断当前运行的脚本是否是主程序。这里的 __name__ 是一个特殊变量,当Python文件被直接运行时,__name__ 被自动设置为字符串 "__main__"。但是&…...
数据识别概述
数据识别场景 数据识别确实可以分为两种主要类型:直接识别和间接识别(或称为从文本中发现)。下面我将详细解释这两种类型: 直接识别: 定义:直接识别是指直接判断某个数据是否符合特定的标准或条件。应用场…...
pytorch统计学分布
1、pytorch统计学函数 import torcha torch.rand(2,2) print(a) print(torch.sum(a, dim0)) print(torch.mean(a, dim0)) print(torch.prod(a, dim0))print(torch.argmax(a, dim0)) print(torch.argmin(a, dim0)) print(torch.std(a)) print(torch.var(a)) print(torch.median…...
【网络安全学习】漏洞利用:BurpSuite的使用-03-枚举攻击案例
如何使用BurpSuite进行枚举攻击 1.靶场选择 BurpSuite官方也是有渗透的教学与靶场的,这次就使用BurpSuite的靶场进行练习。 靶场地址:https://portswigger.net/web-security 登录后如下图所示,选择**【VIEW ALL PATHS】**: 找…...
redis 消息订阅命令
在 Redis 中,消息订阅和发布是一种用于实现消息传递的机制。主要命令包括 SUBSCRIBE、UNSUBSCRIBE、PUBLISH 和 PSUBSCRIBE 等。下面是如何使用这些命令的详细说明和示例。 1. SUBSCRIBE 命令 SUBSCRIBE 命令用于订阅一个或多个频道,以接收这些频道发布…...
springboot接口防抖【防重复提交】
什么是防抖 所谓防抖,一是防用户手抖,二是防网络抖动。在Web系统中,表单提交是一个非常常见的功能,如果不加控制,容易因为用户的误操作或网络延迟导致同一请求被发送多次,进而生成重复的数据记录。要针对用…...
每日一题——Python实现PAT乙级1026 程序运行时间(举一反三+思想解读+逐步优化)五千字好文
一个认为一切根源都是“自己不够强”的INTJ 个人主页:用哲学编程-CSDN博客专栏:每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 代码结构和逻辑 时间复杂度 空间复杂度 代码优化建议 总结 我要更强 …...
还在Excel中管理您的持续改进项目吗?
对于大多数公司来说,Microsoft Excel是一种可靠的资源,它确实提供了极高的价值。然而,当它被用来跟踪持续改进项目时,它的价值就减少了。浪费时间从不同内部系统的不同报告中收集数据,会占用推动重要变革的时间。让我们…...
CentOS 7 内存占用过大导致 OOM Killer 杀掉了 Java 进程
说明 Linux进程被杀掉(OOM killer),查看系统日志 oom killer 详解 测试服务器, 有一个 Java 应用, 其进程偶尔会消失掉, 已排除人为杀死的可能 该服务器内存常年处于快被占满的状态, 怀疑是内存原因, 导致服务器主动杀死了该应用的 Java 进程…...
在postgrel中使用hints
在 PostgreSQL 中,可以使用查询提示(Query Hints)来影响查询优化器的行为,但需要注意的是,PostgreSQL 并不像一些商业数据库那样有丰富的提示语法,而是提供了一些基本的方式来引导优化器。 使用查询提示的…...
OceanBase Meetup北京站|跨行业应用场景中的一体化分布式数据库:AI赋能下的探索与实践
随着业务规模的不断扩张和数据处理需求的日益复杂化,传统数据库架构逐渐暴露出业务稳定性波动、扩展性受限、处理效率降低以及运营成本高等一系列问题。众多行业及其业务场景纷纷踏上了数据库现代化升级之路。 为应对这些挑战,7月6日,OceanB…...
Spring Boot:轻松设置全局异常处理
Spring Boot:轻松设置全局异常处理 在软件开发中,异常处理是一项至关重要的任务。对于使用Spring Boot的开发者来说,设置全局异常处理不仅可以提高代码的整洁度,还可以提升用户体验。本文将详细介绍如何在Spring Boot中轻松设置全…...
Omni3D目标检测
Omni3D是一个针对现实场景中的3D目标检测而构建的大型基准和模型体系。该项目旨在推动从单一图像中识别3D场景和物体的能力,这对于计算机视觉领域而言是一个长期的研究目标,并且在机器人、增强现实(AR)、虚拟现实(VR&a…...
前端三件套开发模版——产品介绍页面
今天有空,使用前端三件套html、css、js制作了一个非常简单的产品制作页面,与大家分享,希望可以满足大家应急的需求。本页面可以对产品进行“抢购”、对产品进行介绍,同时可以安排一张产品的高清大图,我也加入了页面的背…...
Android Bitmap 和Drawable的区别
Bitmap 和 Drawable 是 Android 图形绘制的两种常用方式,它们有各自的特点和使用场景。下面将详细解释它们之间的区别,并通过示例代码说明如何使用它们。 Bitmap 解释 Bitmap 是一种用于存储图像像素数据的类,通常用于图像处理和操作。Bit…...
Linux和windows网络配置文件的修改
Linux和windows网络配置文件的修改 网络配置文件是计算机网络管理中至关重要的一部分。正确配置网络文件可以确保计算机与网络设备之间的通信顺畅,避免网络故障。本文将详细介绍网络配置文件的修改方法,包括常见命令、使用方法举例,以及一些…...
【.NET全栈】第16章 Web开发
文章目录 前言16.1 HTML概述16.1.1 HTML的基本概念16.1.2 HTML语言的基本元素16.1.3 格式设置16.1.4 超级链接16.1.5 图像16.1.6 表格16.1.7 框架16.1.8 表单 16.2 ASP.NET Web Forms的组织16.2.1 认识ASP.NET16.2.2 Web Forms的组织 16.3 Web服务器控件16.3.1 使用Label和Text…...
检测水管缺水的好帮手-管道光电液位传感器
管道光电液位传感器是现代清水管道管理中的重要技术创新,不仅提高了检测液位的精确度,还解决了传统机械式和电容式传感器存在的诸多问题,成为检测管道缺水的可靠利器。 该传感器采用先进的光学感应原理,利用红外光学组件通过精密…...
渗透测试流程基本八个步骤
渗透测试遵循软件测试的基本流程,但由于其测试过程与目标的特殊性,在具体实现步骤上渗透测试与常见软件测试并不相同。渗透测试流程主要包括8个步骤,如下图所示: 下面结合上图介绍每一个步骤所要完成的任务。 (1 )明确目标 当测…...
2024年移动手游趋势:休闲类手游收入逆势增长,欧美玩家成为主力
移动手游广告情报平台Sensor Tower近期发布的报告显示,从宏观数据来看,尽管2023年对于移动游戏市场来说是艰难的一年,无论是总下载量亦或是总收入都较去年有所下降,尤其是Google Play。但在总体下降的大趋势下,休闲游戏…...
npm 淘宝镜像证书过期,错误信息 Could not retrieve https://npm.taobao.org/mirrors/node/latest
更换 npm 证书 问题描述报错原因更换步骤1 找到 nvm 安装目录2 发现证书过期3 更换新地址4 保存后,重新安装成功 问题描述 在使用 nvm 安装新版本时,未成功,出现报错: Could not retrieve https://npm.taobao.org/mirrors/node/l…...
axios发送请求,后端无法获取cookie
1.前端 axios默认不携带cookie 添加如下代码 import axios from "axios" const requrst axios.create({baseURL: import.meta.env.VITE_APP_URL,timeout: 5000,}) //让axios携带cookie requrst.defaults.withCredentials true 2.后端nestjs main.ts app.enabl…...
【Spring Boot 源码学习】初识 ConfigurableEnvironment
《Spring Boot 源码学习系列》 初识 ConfigurableEnvironment 一、引言二、主要内容2.1 Environment2.1.1 配置文件(profiles)2.1.2 属性(properties) 2.2 ConfigurablePropertyResolver2.2.1 属性类型转换配置2.2.2 占位符配置2.…...
开关电源中强制连续FCCM模式与轻载高效PSM,PFM模式优缺点对比笔记
文章目录 前言一、连续FCCM模式优点:缺点: 二,轻载高效PSM,PFM优点:缺点: 总结 前言 今天我们来学习下开关电源中,强制连续FCCM模式与轻载高效PSM,PFM模式优缺点对比 一、连续FCCM模式 优点: …...
5分钟教你用AI把老照片动起来,别再去花49块9的冤枉钱了
文章目录 需要的工具 最近,AI视频在各大平台上,又火了。 只是火的形式,变成了将老照片动起来,打情感牌,或者做很多经典电视剧的再整活。 直接把可灵的生成时间,从以前的4分钟,生生的干成了20分钟…...
Ruby 环境变量
Ruby 环境变量 概述 环境变量在编程中扮演着重要的角色,尤其是在Ruby这样的动态编程语言中。它们是操作系统用来存储有关其操作环境的信息的变量,可以在程序运行时影响其行为。Ruby程序可以通过环境变量来获取配置信息、系统细节或用户特定的设置。本文将深入探讨Ruby中环境…...
BPF:BCC工具 funccount 统计内核函数调用(内核函数、跟踪点USDT探针)认知
写在前面 博文内容涉及BCC工具 funccount 认知funccount 可以帮助用户追踪和分析Linux系统上特定函数、系统探针或USDT探针的运行次数。这对于性能分析、故障排查和系统优化等场景非常有用。理解不足小伙伴帮忙指正 😃,生活加油 不必太纠结于当下,也不必…...
DPO算法推导
DPO 核心思想:直接使用偏好数据进行策略优化,省去 reward 模型策略优化。 技术背景知识: 首先给定prompt x,生成两个答案 ( y 1 , y 2 ) Π S F T ( y ∣ x ) (y_1,y_2)~\Pi^{SFT}(y|x) (y1,y2) ΠSFT(y∣x) ,并通…...
Qt源码分析:窗体绘制与响应
作为一套开源跨平台的UI代码库,窗体绘制与响应自然是最为基本的功能。在前面的博文中,已就Qt中的元对象系统(反射机制)、事件循环等基础内容进行了分析,并捎带阐述了窗体响应相关的内容。因此,本文着重分析Qt中窗体绘制相关的内容…...
docker 安装 禅道
docker pull hub.zentao.net/app/zentao:20.1.1 sudo docker network create --subnet172.172.172.0/24 zentaonet 使用 8087端口号访问 使用禅道mysql 映射到3307 sudo docker run \ --name zentao2 \ -p 8087:80 \ -p 3307:3306 \ --networkzentaonet \ --ip 172.172.172.…...
【简要说说】make 增量编译的原理
make 增量编译的原理 make是一个工具,它可以根据依赖关系和时间戳来自动执行编译命令。 当您修改了源代码文件后,make会检查它们的修改时间是否比目标文件(如可执行文件或目标文件)新,如果是,就会重新编译…...
DETRs Beat YOLOs on Real-time Object Detection论文翻译
cvpr 2024 论文名称 DETRs在实时目标检测上击败YOLO 地址 https://arxiv.longhoe.net/abs/2304.08069 代码 https://github.com/lyuwenyu/RT-DETR 目录 摘要 1介绍 2.相关工作 2.1实时目标探测器 2.2.端到端物体探测器 3.检测器的端到端速度 3.1.NMS分析 3.2.端到端速度…...
SpringBoot 多数据源配置
目录 一. 引入maven依赖包 二. 配置yml 三、创建 xml 分组文件 四、切换数据源 一. 引入maven依赖包 <dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.6.1&…...
RK3568驱动指南|第十六篇 SPI-第192章 mcp2515驱动编写:完善write和read函数
瑞芯微RK3568芯片是一款定位中高端的通用型SOC,采用22nm制程工艺,搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码,支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU,可用于轻量级人工…...
#BI建模与数仓建模有什么区别?指标体系由谁来搭建?
问题1: 指标体系是我们数仓来搭建还是分析师来做,如何去推动? 问题2:BI建模与数仓建模有什么区别? 指标体系要想做好,其实是分两块内容的,一块是顶层设计阶段,业务指标体系的搭建&am…...
如何用Python实现三维可视化?
Python拥有很多优秀的三维图像可视化工具,主要基于图形处理库WebGL、OpenGL或者VTK。 这些工具主要用于大规模空间标量数据、向量场数据、张量场数据等等的可视化,实际运用场景主要在海洋大气建模、飞机模型设计、桥梁设计、电磁场分析等等。 本文简单…...
chrome.storage.local.set 未生效
之前chrome.storage.local.set 和 get 一直不起作用 使用以下代码运行成功。 chrome.storage.local.set({ pageState: "main" }).then(() > {console.log("Value is set");});chrome.storage.local.get(["pageState"]).then((result) > …...
泛微开发修炼之旅--30 linux-Ecology服务器运维脚本
文章链接:30 linux-ecology服务器运维脚本...