vue3 echarts5 graph关系图谱 点击图例节点消失线不消失重复生成问题

    const myChart = ref(null);const myCharts = ref(null);onMounted(() => {// 这种会导致线仍然存在 重复生成myCharts.value = echarts.init(myChart.value);myCharts.value.setOption(option);});return {myChart,myCharts,};

现象:如下图1 点击图例类目2,第一次如图2消失,第二次重复点击类目2如图三,线保留 ,每点一次线叠加保留,问题很大

问题在于第二次ref对象获取echarts.init(myChart.value),导致的上述现象,个人项目赶时间,没找到解决问题的根本方法,试了几种方式取巧

方法一:

    onMounted(() => {// 这种可行let myChart = echarts.init(document.getElementById("mainindicator"));myChart.setOption(option);});

方法二:

// 获取标签容器let indexChart = ref(null);// 这种可行,不使用ref对象且setup全局使用let indexChart22 = null; const state = reactive({indexChart2: null,});onMounted(async () => {console.log('初始化图表');// 初始化// let graphChart = echarts.init(indexChart.value);indexChart22 = echarts.init(indexChart.value);console.log(indexChart22);// option 配置项,推荐放在外部引入。indexChart22.setOption(option);window.onresize = function () {//自适应大小, 不用的话不会自适应大小。indexChart.value.resize();};});return {...toRefs(state),indexChart,};

希望有好方法的给我留个言,或者有效的链接

 

 

 

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

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

相关文章

非常完整的coco screator socketio

https://github.com/SeaPlanet/cocoscreator_chat 前端源码 https://github.com/socketio/socket.io-client https://cdnjs.com/libraries/socket.io 转载于:https://www.cnblogs.com/suneil/p/11288628.html

JavaScript 中 obj.hasOwnProperty(prop) 方法

语法 obj.hasOwnProperty(prop) 参数 prop 要检测的属性的 String 字符串形式表示的名称,或者 Symbol。 返回值 用来判断某个对象是否含有指定的属性的布尔值 Boolean。 描述 所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测…

python面向对象初识

面向对象编程 1.面向对象初步了解 ​ 面向过程编程与函数编程对比: s1 ajdsgkaffddha count 0 for i in s1:count 1 print(f字符串的长度为{count}) # 面向过程编程每计算一次便使用一次for循环def my_len(s): # 计算数据类型长度的函数,可重复使用…

Vue3 VSCode新建项目报错The template root requires exactly one element.

1.首先我们点击左侧第四个图标插件2.输入框搜索vetur插件3.点击设置图标,再点击扩展设置4.搜素vetur>validation>template,取消vetur>validation>template的勾选 然后就不会报错了

计算机视觉概述

关于计算机视觉的介绍性文章,包括计算机视觉的定义,和人类视觉的区别以及涉及到的学科等等。 1. 什么是计算机视觉 计算机视觉既是工程领域,也是科学领域中的一个富有挑战性重要研究领域。计算机视觉是一门综合性的学科,它已经吸引…

Java生鲜电商平台-电商支付流程架构实战

Java生鲜电商平台-电商支付流程架构实战 说明:我一直秉承的就是接地气的业务架构实战。我的文章都有一个这样的核心。 1. 业务场景 2. 解决问题。 3.代码实现。 4.代码重构。 5.总结与复盘。 6.缺点与防范 一、场景描述 想必大家都曾遇到过这个问题,在电…

vue3.0 AntDesignVue2.0 table的rowkey报错问题解决方法

Warning: [antdv: Each record in table should have a unique key prop,or set rowKey to an unique primary key.] Warning: [antdv: Table] Each record in dataSource of table should have a unique key prop, or set rowKey of Table to an unique primary key 提示因为…

模式识别扫盲

模式识别是对表征事物或现象的各种形式的信息进行处理和分析,以对事物或现象进行描述、辨认、分类和解释的过程,是信息科学和人工智能的重要组成部分。英文“Pattern”源于法文“Patron”,本来是指可作为大家典范的理想的人,或用以…

vue2项目使用codemirror插件实现代码编辑器功能

1、使用npm安装依赖 npm install --save codemirror 2、在页面中放入如下代码 <template><textarea ref"mycode" class"codesql" v-model"code" style"height:200px;width:600px;"></textarea> </template>…

CentOS 6.5系统安装配置LAMP(Apache+PHP5+MySQL)服务器环境

安装篇&#xff1a; 一、安装Apache yum install httpd #根据提示&#xff0c;输入Y安装即可成功安装 /etc/init.d/httpd start#启动Apache 备注&#xff1a;Apache启动之后会提示错误&#xff1a; 正在启动 httpd:httpd: Could not reliably determine the servers fully qual…

前端有用的库

HTML awesome-html5 精选的HTML5资源精选清单 CSS tailwindcss 与Tailwind CSS相关的很棒的事情awesome-css-frameworks 很棒的CSS框架列表awesome-css-cn CSS 资源大全中文版&#xff0c;内容包括&#xff1a;CSS预处理器、框架、CSS结构、代码风格指南、命名习惯等等awesom…

计算机视觉牛人(转载)(最早在自动化所论坛上发现的)

paper毕竟是死的, 写paper的人才是活的. 那么我现在研究一下cv圈的格局, 按师承关系, 借鉴前人, 我总结a tree stucture of cv guys.David Marr----->Shimon Ullman (Weizmann) ----->Eric Grimson (MIT)----->Daniel Huttenlocher (Cornell)----->Pedro Felzenszw…

Java生鲜电商平台-促销系统的架构设计与源码解析

Java生鲜电商平台-促销系统的架构设计与源码解析 说明&#xff1a;本文重点讲解现在流行的促销方案以及源码解析,让大家对促销&#xff0c;纳新有一个深入的了解与学习过程. 促销系统是电商系统另外一个比较大&#xff0c;也是比较复杂的系统&#xff0c;作为一个卖货的&#x…

vue3中websocket用法

1.0 认识 websocket #1.0.1 什么是 websocket 和 http 协议类似&#xff0c;websocket 也是是一个网络通信协议&#xff0c;是用来满足前后端数据通信的。 #1.0.2 websocket 相比于 HTTP 的优势 HTTP 协议&#xff1a;客户端与服务器建立通信连接之后&#xff0c;服务器端只…

介绍几个医学图像处理会议

Information Processing in Medical Imaging &#xff0c; IPMI &#xff0c;医学图像处理最顶级的会议&#xff0c;两年召开一次&#xff0c;全球大概入选 50 篇左右&#xff0c;一个非常小圈子的会&#xff0c;据说通常是关在一个偏僻的地方开一周&#xff0c;会议口头报告提…

python翻译

translator.py # -*- coding: utf-8 -*- # author: inspurer(月小水长) # pc_type lenovo # create_time: 2019/4/6 15:44 # file_name: translator.py # github https://github.com/inspurer # qq邮箱 2391527690qq.co…

promise并发

一、Pomise.all的使用 Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时&#xff0c;成功和失败的返回值是不同的&#xff0c;成功的时候返回的是一个结果数组&#xff0c;而失败的时候则返回最先被reject失败状态的值。 let p1 new Promise((resolve, rej…

计算机视觉方面的三大国际会议是ICCV, CVPR和ECCV

ICCV的全称是International Comference on Computer Vision&#xff0c;正如很多和他一样的名字的会议一行&#xff0c;这样最朴实的名字的会议&#xff0c;通常也是这方面最nb的会议。ICCV两年一次&#xff0c;与ECCV正好错开&#xff0c;是公认的三个会议中级别最高的。它的举…

Scanner类+Random

引用数据类型的使用 数据类型 变量名 new 数据类型(); 变量名.方法名(); import java.util.Scanner; publicclass ScannerDemo01 { publicstaticvoid main(String[] args) { //创建Scanner引用类型的变量 Scanner sc new Scanner(System.in); //获取数字 System.out.print…

手写vue2的Lazyload

调用方式&#xff0c;express写个后台服务调图片&#xff0c;具体使用不贴了 import VueLazyload from "./modules/vue-lazyload";Vue.use(VueLazyload,{loading: http://localhost:3000/images/loading.gif,error: http://localhost:3000/images/error.jpg,preload…