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、或者普通变量即可。

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

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

相关文章

配置管理工具 Puppet:安装、配置和编写简单的 Puppet Manifest

配置管理工具 Puppet&#xff1a;安装、配置和编写简单的 Puppet Manifest Puppet 是一种流行的开源配置管理工具&#xff0c;它允许你自动化和管理服务器配置。通过 Puppet&#xff0c;你可以确保服务器以一致和可重复的方式配置&#xff0c;从而提高效率、减少错误并降低管理…

CDGA考试真题(二)

1. 文件和内容管理是针对存储在关系型数据库之外的数据和信息的采集、存储、访问和使用过程的管理。重点在于保持文件和其他非结构化或半结构化信息的完整性,并使这些信息能够被访问。以下哪项不属于此目标:(D) A、确保能够高效地采集和使用非结构化的数据和信息B、确保结构…

VSCode常用快捷键和功能

格式化代码&#xff1a; ShiftAltF JS中自动输入console.log()的方法&#xff1a; 先在vscode中&#xff0c;找到文件 > 首选项 > 配置用户代码片段&#xff0c;在弹出的下拉框处方输入javascript.json&#xff0c;复制下面的代码&#xff0c;覆盖原来的代码&#xff0…

Linux操作系统中逻辑卷的缩减

流程&#xff1a;第一步先是要缩减逻辑卷的文件系统。 第二步就是要去缩减逻辑卷的物理边界。 注意事项&#xff1a; 1.逻辑卷要处于卸载状态&#xff0c; 2.建议先备份数据 3.在缩减逻辑卷的时候&#xff0c;要注意xfs文件系统的逻辑卷是不支持直接进行缩减的。 4.在缩减…

选择结构作业题(五.2)

阿尔法编程第五章(31--50) 31.有 3 个整数 a,b,c,由键盘输入,输出其中最大的数。 // 请在此处编写 C 程序 #include<stdio.h>int max(int a,int b) {if(a>b)return a;else if(a<b)return b; } int main(){int a,b,c;scanf("%d %d %d",&a,&am…

Linux:DHCP服务配置

目录 一、DHCP概述以及DHCP的好处 1.1、概述 1.2、DHCP的好处 二、DHCP的模式与分配方式 2.1、模式 2.2、DHCP的分配方式 三、DHCP工作原理 四、安装DHCP服务 五、DHCP局部配置并且测试 5.1、subnet 网段声明 5.2、客户机预留指定的固定ip地址 一、DHCP概述以及DHCP…

下载nvm 管理多个node版本并切换

nvm管理多个node版本并切换 安装nvm时不能安装任何node版本&#xff08;先删除node再安装nvm&#xff09;&#xff0c;保证系统无任何node.js残留 1. 卸载node 控制面板中卸载nodejs 删除以下文件夹&#xff1a; C:\Program Files (x86)\Nodejs C:\Program Files\Nodejs C…

MybatisX插件的简单使用教程

搜索mybatis 开始生成 module path&#xff1a;当前项目 base package:生成的包名&#xff0c;建议先独立生成一个&#xff0c;和你原本的项目分开 encoding&#xff1a;编码&#xff0c;建议UTF-8 class name strategy&#xff1a;命名选择 推荐选择camel&#xff1a;驼峰命…

Go:hello world

开启转职->Go开发工程师 下面是我的第一个go的程序 在上面的程序介绍&#xff1a; 1、package main 第一行代码package main定义了包名。必须在源文件中非注释的第一行指明这个文件属于哪个包&#xff0c;如&#xff1a;package main。package main表示一个可独立执行的程…

spRAG框架学习小结

spRAG是什么 spRAG是一个针对非结构化数据的检索引擎。它特别擅长处理对密集文本的复杂查询&#xff0c;比如财务报告、法律文件和学术论文。有两种关键方法用于提高性能&#xff0c;超越了普通的RAG系统&#xff1a; 自动上下文&#xff08;AutoContext&#xff09;&#xff…

µCOS-III 任务同步机制-任务信号量

1. 什么是任务信号量 任务信号量是一种用于任务间同步和通信的计数器&#xff0c;通常用于解决任务间的竞争条件和资源共享问题。在C/OS-III中&#xff0c;任务信号量提供了二进制信号量和计数信号量两种类型&#xff1a; 二进制信号量&#xff1a;只能取值0或1&#xff0c;适…

Debezium报错处理系列之第109篇:解决升级日志解析jar包重启集群出现的字段类型和值不匹配的错误

Debezium报错处理系列之第109篇:解决升级日志解析jar包重启集群出现的字段类型和值不匹配的错误 一、完整报错二、错误原因三、解决方法Debezium从入门到精通系列之:研究Debezium技术遇到的各种错误解决方法汇总: Debezium从入门到精通系列之:百篇系列文章汇总之研究Debezi…

函数式接口的定义及常见类型

文章目录 什么是函数式接口函数式接口的语法基本函数式接口定制化函数接口参考资料 什么是函数式接口 函数式接口是一个具有且仅有一个抽象方法&#xff08;Abstract Method&#xff09;的接口。在Java中&#xff0c;函数式接口被用于支持函数式编程的特性&#xff0c;允许将函…

传统IO和NIO文件拷贝过程

参考&#xff1a;https://blog.csdn.net/weixin_57323780/article/details/130250582

昇思25天学习打卡营第9天|ResNet50图像分类

一、Resnet残差网络模型 构建残差网络结构;Building BlockBottleneck 残差结构由两个分支构成&#xff1a;一个主分支 &#x1d439;(&#x1d465;)&#xff0c;一个shortcuts&#xff08;图中弧线表示,&#x1d465;&#xff09;。 得到残差网络结构:&#x1d439;(&#x…

考研高数(怎么理解某一点偏导数不等于零就可确定一个函数,而偏导数等于零不一定能确定一个函数)

偏导数不等于零可以确定一个函数 这是因为偏导数不等于零保证了x与y值一一对应的关系&#xff0c;从而可以说明两者具有函数关系yy(x)。具体来说&#xff0c;如果对y的偏导数不等于零&#xff0c;那么对于一个给定的x值&#xff0c;不会存在两个不同的y值使得函数F(x,y)0成立。…

Leetcode 3212. Count Submatrices With Equal Frequency of X and Y

Leetcode 3212. Count Submatrices With Equal Frequency of X and Y 1. 解题思路2. 代码实现 题目链接&#xff1a;3212. Count Submatrices With Equal Frequency of X and Y 1. 解题思路 这一题我的思路就是一个二维累计数组的实现&#xff0c;具体来说&#xff0c;我们事…

SpringMVC常见的注解

一、Spring MVC Spring Web MVC是基于ServletAPI构建的原始web 框架&#xff0c;一开始就包含在Spring 框架中&#xff0c;通常被称为“Spring MVC”。 1.MVC 是什么&#xff1f; MVC(Model、View、Controller&#xff09;是软件工程中的一种软件架构设计模型。它把软件系统分…

STM32-输入捕获IC和编码器接口

本内容基于江协科技STM32视频学习之后整理而得。 文章目录 1. 输入捕获IC1.1 输入捕获IC简介1.2 频率测量1.3 输入捕获通道1.4 主从触发模式1.5 输入捕获基本结构1.6 PWMI基本结构 2. 输入捕获库函数及代码2.1 输入捕获库函数2.2 6-6 输入捕获模式测频率2.2.1 硬件连接2.2.2 硬…

ArduPilot开源代码之AP_VisualOdom_Backend

ArduPilot开源代码之AP_VisualOdom_Backend 1. 源由2. 类定义2.1 类与构造函数2.2 公共部分2.3 保护部分2.4 成员变量 3. 重要例程3.1 AP_VisualOdom_Backend::healthy3.2 AP_VisualOdom_Backend::quality3.3 AP_VisualOdom_Backend::handle_vision_position_delta_msg3.4 AP_V…