[Echarts使用]:bug记录

news2024/11/26 19:42:35
问题1: z / z2 / zlevel of displayable is invalid, which may cause unexpected errors

// 在series 选项中设置zlevel、z 属性即可解决
let option: echarts.EChartsCoreOption = {
		...,
		series: {
			name: data.name,
			type: "line",
			smooth: true,
			showSymbol: false,
			data: data.list,
			zlevel: 1,
            z: 1
		}
	};

问题2:There is a chart instance already initialized on the dom.

// 初始化echarts实例时检查是否已经存在 即可解决
<template>
	<div ref="lineChartRef" class="line-chart" style="width:100%;height:300px"></div>
</template>
<script lang="ts" setup>
import { ref, nextTick } from "vue";
import echarts from "@/plugin/echarts";
import { useEcharts } from "@/hooks/useEcharts";

const lineChartRef = ref<HTMLElement>();
let myChart: echarts.ECharts | undefined;
const renderLineChart = async (data: { [key: string]: any }) => {
	await nextTick();
	// 查看echart实例是否存在
	myChart = echarts.getInstanceByDom(lineChartRef.value as HTMLElement);
	if (!myChart) {
		myChart = echarts.init(lineChartRef.value as HTMLElement);
	}
	let option: echarts.EChartsCoreOption = {
		// ...这里忽略配置
	};
	useEcharts(myChart, option);
};

defineExpose({
	renderLineChart
});
</script>

问题3:Unable to preventDefault inside passive event listener invocation.

// 通过劫持addEventListener事件,将passive改成true就可以解决Unable to preventDefault inside passive event listener invocation报错
(function () {
	if (typeof EventTarget !== "undefined") {
		let originalFunc = EventTarget.prototype.addEventListener; // 先存储原来的事件
		EventTarget.prototype.addEventListener = function (type, fn, capture) {
			if (typeof capture !== "boolean") {
				capture = capture || {};
				capture.passive = false; // 这句是关键的
			}
			originalFunc.call(this, type, fn, capture);
		};
	}
})();

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

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

相关文章

计算机毕业设计——springboot养老院管理系统 养老院后台管理

1&#xff0c;绪论 1.1 背景调研 养老院是集医疗、护理、康复、膳食、社工等服务服务于一体的综合行养老院&#xff0c;经过我们前期的调查&#xff0c;院方大部分工作采用手工操作方式,会带来工作效率过低&#xff0c;运营成本过大的问题。 院方可用合理的较少投入取得更好…

【zookeeper选举源码分析】

文章目录 为什么要看源码&#xff1a; 1、提升技术功底&#xff1a;学习源码里的优秀设计思想&#xff0c;比如一些疑难问题的解决思路&#xff0c;还有一些优秀的设计模式&#xff0c;整体提升自己的技术功底 2、深度掌握技术框架&#xff1a;源码看多了&#xff0c;对于一个新…

2024-01-01 力扣高频SQL50题目 练习笔记

1. 1661求机器平均运行时间 在做这道题的时候&#xff0c;我遇到了4个问题 # 求平均的问题 如何找到个数? -> 相减对应列值后,直接average 就行。因为avg就是自动确定要除的个数&#xff08;当然要联合正确的group by 分组&#xff09; # 怎么根据machine_id和process_id…

解决npm,pnpm,yarn等安装electron超时等问题

我在安装electron的时候&#xff0c;出现了超时等等各种问题&#xff1a; &#xff08;RequestError: connect ETIMEDOUT 20.205.243.166:443&#xff09; npm yarn&#xff1a;Request Error: connect ETIMEDOUT 20.205.243.166:443 RequestError: socket hang up npm ER…

ThreadLocal共享变量

一、ThreadLocal 我们知道多线程访问同一个共享变量时&#xff0c;会出现线程安全问题&#xff0c;为了保证线程安全开发者需要对共享变量的访问操作进行适当的同步操作&#xff0c;如加锁等同步操作。 除此之外&#xff0c;Java提供了ThreadLocal类&#xff0c;当一个共享变…

python实现Ethernet/IP协议的客户端(三)

Ethernet/IP是一种工业自动化领域中常用的网络通信协议&#xff0c;它是基于标准以太网技术的应用层协议。作为工业领域的通信协议之一&#xff0c;Ethernet/IP 提供了一种在工业自动化设备之间实现通信和数据交换的标准化方法。python要实现Ethernet/IP的客户端&#xff0c;可…

Spring Cloud Gateway + Nacos 灰度发布

前言 本文将会使用 SpringCloud Gateway 网关组件配合 Nacos 实现灰度发布&#xff08;金丝雀发布&#xff09; 环境搭建 创建子模块服务提供者 provider&#xff0c;网关模块 gateway 父项目 pom.xml 配置 <?xml version"1.0" encoding"UTF-8"?…

数据结构OJ实验9-图存储结构和遍历

A. 图综合练习--构建邻接表 题目描述 已知一有向图&#xff0c;构建该图对应的邻接表。 邻接表包含数组和单链表两种数据结构&#xff0c;其中每个数组元素也是单链表的头结点&#xff0c;数组元素包含两个属性&#xff0c;属性一是顶点编号info&#xff0c;属性二是指针域n…

数据结构期末复习(fengkao课堂)

学习数据结构时&#xff0c;以下建议可能对您有所帮助&#xff1a; 理解基本概念&#xff1a;首先&#xff0c;确保您理解数据结构的基本概念&#xff0c;例如数组、链表、栈、队列、树、图等。了解它们的定义、特点和基本操作。 学习时间复杂度和空间复杂度&#xff1a;了解如…

【LeetCode:34. 在排序数组中查找元素的第一个和最后一个位置 | 二分】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

simulink代码生成(八)——应用串口输入的16进制数

1、串口输入的是16进制数&#xff0c;如何将其应用到算法中&#xff1f; 串口输入的数据是16进制数&#xff1b;要解决这个问题必须要理解matlab的数据类型&#xff1b;数据类型一般用来标明数据的系列参数&#xff0c;包含有精度、动态范围、性能和存储的资源。模型会默认使…

你好2024!

大家好&#xff0c;我是小悟 2024年1月1日&#xff0c;新年的第一天&#xff0c;阳光明媚&#xff0c;空气中弥漫着希望和新的开始的气息。在这个特别的日子里&#xff0c;大家纷纷走出家门&#xff0c;迎接新年的到来。 街道上&#xff0c;熙熙攘攘的人群中&#xff0c;有孩…

开放原子训练营(第四季)TobudOS——TobudOS内核移植(keil版)

前言 12月份参加了开放原第四季线下活动&#xff0c;觉得很有意义。通过这篇博文&#xff0c;记录一下这次活动进行的移植TobudOS内核的过程&#xff0c;下面就让我们开始吧。 开发板介绍 本次使用的开发板型号为STM32H750&#xff0c;当然了&#xff0c;其他型号的开发版也…

Django 实现Web便签

效果图 会用到的知识 目录结构与URL路由注册request与response对象模板基础与模板继承ORM查询后台管理 实现步骤 1. terminal 输入 django-admin startapp the_10回车 2. 注册&#xff0c; 在 tutorial子文件夹settings.py INSTALLED_APPS 中括号添加 "the_10" IN…

C++日期类的实现

前言&#xff1a;在类和对象比较熟悉的情况下&#xff0c;我们我们就可以开始制作日期表了&#xff0c;实现日期类所包含的知识点有构造函数&#xff0c;析构函数&#xff0c;函数重载&#xff0c;拷贝构造函数&#xff0c;运算符重载&#xff0c;const成员函数 1.日期类的加减…

pyqt5用qtdesign设计页面时,去掉页面的空白界面、边框和标题栏

前言 Windows默认的标题栏有时候自己觉得不太美观&#xff0c;就想自己设计一个&#xff0c;然后把默认的去掉&#xff0c;并且把长方形的边框和多余的空表界面去掉&#xff0c;就是下图中圈出来的区域&#xff1a; 去掉之后的效果如图&#xff1a; 这样我们就可以自定义窗…

SpringBoot + Vue 抖音全平台项目

简介 本项目是一个短视频平台&#xff0c;拥有热度排行榜&#xff0c;热门视频&#xff0c;兴趣推送&#xff0c;关注推送&#xff0c;内容审核等功能。 源码下载 网盘 (访问密码: 8418) 登录/注册 首页 创作中心 架构设计 上传视频业务流程 视频推送流程 1.用户订阅分类后…

OSPFv2 LSA类型

OSPFv2需要了解的6种LSA&#xff0c;分别是&#xff1a;1类LSA、2类LSA、3类LSA、4类LSA、5类LSA、7类LSA。 我们先了解一下LSA的组成&#xff0c;LSA由LSA头部和LSA内容组成&#xff0c;其中LSA头部是每一类LSA都相同的&#xff0c;有Type&#xff08;LSA的类型&#xff09;、…

iMazing 2 .17.16最新官方中文版免费下载安装激活

iMazing 2 .17.16最新版是一款帮助用户管理IOS手机的应用程序&#xff0c;iMazing2最新版能力远超iTunes提供的终极的iOS设备管理器。IMazing与你的iOS设备(iPhone、 iPad或iPod)相连&#xff0c;使用起来非常的方便。作为苹果指定的iOS设备同步工具。 mazing什么意思 iMazing…

软件推荐:MobaXterm

介绍 MobaXterm 是远程计算的终极工具箱&#xff0c;它提供了几乎所有重要的远程网络工具&#xff0c;SSH、RDP、FTP、VNC&#xff0c;只要你能想到的&#xff0c;都可以在MobaXterm中找到。除了海量协议外&#xff0c;MobaXterm 还支持安装额外的插件来扩展其功能。 软件官网…