uniapp页面使用多个echarts出现数据渲染错乱问题解决

news2024/11/24 20:48:36

首先,uniapp当中使用echarts是在通过使用renderjs的script模板的前提下实现的,在官方提供的案例当中,核心代码是这一部分:
在这里插入图片描述
但如果将其封装为组件,并在一个页面当中引用多次来生成多个charts图标,那么这个时候就会出现上下之间charts图错乱的问题
问题解决:

initEcharts() {
	myChart = echarts.init(this.$el)
	myChart.setOption(this.option)
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {
	myChart = echarts.init(ownerInstance.$el)
	myChart.setOption(newValue)
}

经过分析和反复测验,发现只需要在这两个钩子当中重新init charts,并且init需要通过this.$el来获取而并不能通过document.getElementById来获取,这样,在组件渲染多个charts的时候,就可以通过获取到当前的实例来精准的渲染出来

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

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

相关文章

大语言模型:以Amazon Titan等大语言模型为例介绍

大语言模型(Large Language Model)是一种人工智能技术,通过对海量文本数据进行训练,学习语言的结构、规则和语义,从而可以生成具有自然语言风格的文本或回答自然语言的问题。大语言模型一般基于神经网络技术&#xff0…

如何销售产品说话技巧

如何销售产品说话技巧 在销售产品的过程中,说话技巧的重要性不言而喻。一个出色的销售人员必须掌握如何运用流畅、通顺的语言,措辞优美,更有吸引力地表达自己的观点。以下是一些有助于提高销售产品说话技巧的建议: 1. 深入了解你…

03_歌词滚动效果

03_歌词滚动效果 文章目录 03_歌词滚动效果效果一、数据准备①:歌词②:音频等 二、代码实现①:首页②:样式③:js逻辑④:测试 效果 一、数据准备 ①:歌词 var lrc [00:00.95]夜微凉 - 徐珊 [0…

Windows10 下 CUDA 新旧多版本共存

前言 为了运行一个 Tensorflow1.6.0 的项目,CPU 跑了三个多小时才完成一个 epoch,还得用 GPU。但这个版本的 TF 只能在 10 以下的 CUDA 平台,但是以前的 Pytorch 也要继续啊。所以需要在本地 Windows 下安装多个版本 CUDA,其实有两…

MySQL事务(简单明了)

目录 1. 事务的特性(ACID): 2. 事务的语法: 3. 隔离级别: 4. 保存点(Savepoints): 5. 示例: 1. 事务的特性(ACID): 原子性&#…

每日一练2023.11.27——考试座位号【PTA】

题目要求: 每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位。正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该考生的考试座位号码&#xff0c…

sCrypt 现已支持各类主流前端框架

sCrypt 现已支持各类主流前端框架,包括: ReactNext.jsAngularSvelteVue 3.x or 2.x bundled with Vite or Webpack 通过在这些支持的前端框架中集成sCrypt开发环境,你可以直接在前端项目里访问合约实例和调用合约,方便用户使用Se…

js用到的算法

1.对象数组中,对象中有对象,数组根据对象中的对象打平 [{indexValueMap: { 68443: 0, 68457: 0 },rowName1: 固定收益类,rowName2: 交易类,rowName3: 次级},{indexValueMap: { 68443: 0, 68457: 0 },rowName1: 固定收益类,rowName2: 交易类,rowName3: 中…

Skywalking接入实际应用做日志跟踪

Skywalking客户端挂载 从官网下载skywalking-agent客户端,并挂在到应用服务器指定目录 挂载到应用主机中,好处是解决打包应用镜像的时候,镜像过大,部署成本过高。 docker-compose部署应用,并接入skywalking服务,这里以gateway为例 versio…

【活动回顾】sCrypt在2023伦敦区块链大会上的精彩表现

2023伦敦区块链大会,是本年度最盛大的比特币及区块链行业活动。大会于2023年5月31日至6月2日,在伦敦女王伊丽莎白二世中心举行,旨在展示BSV区块链的真正潜力。 sCrypt Inc 的创始人兼 CEO 刘晓晖, 作为演讲嘉宾出席了会议。他向大…

FreeImage 编译安装

FreeImage下载: The FreeImage Project 点击第6行: Download FreeImage 3.18.0 或: wget http://downloads.sourceforge.net/freeimage/FreeImage3170.zip #解压 unzip FreeImage3170.zip -d freeImage 编译FreeImage源代码可能需要遵循…

BUUCTF刷题之路--ciscn_2019_es_21

这题考察的是一个栈迁移的知识。作为入门学习栈迁移是个不可多得的好题。程序简单并且是32位的架构。保护也没有开,因此对于理解栈迁移再好不过了。看一下这题的基本信息: 栈迁移的基本原理其实就是栈的空间不够我们利用。也就是不不足以覆盖返回地址&am…

基于单片机设计的超声波测距仪(采用HC-SR04模块)

一、前言 本项目是基于单片机设计的超声波测距仪,主要采用了STC89C52单片机和HC-SR04超声波测距模块。通过LCD1602液晶显示屏来展示测量的距离信息。 超声波测距技术是一种常见的非接触式测距方法,利用超声波的传播速度测量物体与测距器之间的距离。它…

「C++」类和对象1

🎇个人主页:Ice_Sugar_7 🎇所属专栏:C启航 🎇欢迎点赞收藏加关注哦! 文章目录 🍉前言:初识面向对象🍉类🍌类的定义🍌访问限定符🥝类的…

CloudCompare 源码编译

一、下载源码 二、cmake 编译 这里面有四个比较重要的地方 1、源码的位置 2、生成的位置 3、项目的位置 4、qt 的位置 三、编译 开始测试,先用那个项目做测试 没有问题 然后用build的那个打开 加入Qt 的相关库到qcc中 启动项目生成cloudcompare 启动 ok ,完成…

阿里云ACE认证之国际版与国内版对比!

大厂疯狂裁员,互联网行业迎来寒冬,技术人员被动陷入疯狂内卷。在愈加内卷的IT领域,“云计算”作为少有的蓝海,无疑是打工人未来实现职场提升、摆脱内卷的绝佳选择! 对于云计算行业的人来说,最值得考的肯定是…

守护机器智能时代,上海迅软科技终端防泄密方案横空出世!

客户简要介绍 某智能科技股份有限公司是一家专注于数字化、自动化和新能源的机器人公司。公司致力于为劳动密集程度比较高的行业制造有用且价格合理的机器人,目前已广泛应用于农业、园艺、施工、测绘和设施服务等领域。在新加坡、美国、瑞典、大陆及香港等多地有研发…

C++相关闲碎记录(1)

1、C绘制爱心图像 #include <iostream> #include <cmath>using namespace std;int main() {// 心形曲线公式 (x^2 y^2 - a)^3 - x^2*y^3 0double a 1;double bound 1.5 * sqrt(a);double step 0.05;for (double y bound; y > -bound; y - step) {for (do…

vue或uniapp中keep-alive的使用,(附带生命周期原理图)

什么是keep-alive&#xff1f; keep-alive是一个内置组件&#xff0c;用于缓存和管理组件的状态。 当 keep-alive包裹一个组件时&#xff0c;这个组件的状态将会被缓存起来&#xff0c;而不是每次重新渲染。这在多个视图之间切换时特别有用&#xff0c;可以避免重复的创建和销…

【Spring】Spring是什么?

文章目录 前言什么是Spring什么是容器什么是 IoC传统程序开发控制反转式程序开发理解Spring IoCDI Spring帮助网站 前言 前面我们学习了 servlet 的相关知识&#xff0c;但是呢&#xff1f;使用 servlet 进行网站的开发步骤还是比较麻烦的&#xff0c;而我们本身程序员就属于是…