当前位置: 首页 > news >正文

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

首先,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的时候,就可以通过获取到当前的实例来精准的渲染出来

相关文章:

  • java中如何用stream流的方式给实体类赋值代码实例?
  • 基于C#实现Prim算法
  • Linux 安装显卡驱动
  • Python基础语法之学习字符串快速格式化
  • 【Web-Note】 JavaScript概述
  • 关于JSON
  • MybtisPlus快速开发(从controller到mapper)
  • 第二十章总结。。。
  • centos 安装谷歌浏览器
  • WordPress 只允许游客浏览指定分类的文章
  • 技术前沿丨Teranode如何实现无限扩容
  • Docker安装可视化工具Portainer
  • 如何在VS2022上的MFC项目中操作Excel(VS2010、VS2012、VS2015、VS2017、VS2019使用方法一样)
  • vue运用之el-cascader组件
  • Python语言学习笔记之五(Python代码注解)
  • android 一些 utils
  • DOM的那些事
  • JavaScript新鲜事·第5期
  • niucms就是以城市为分割单位,在上面 小区/乡村/同城论坛+58+团购
  • Octave 入门
  • PAT A1050
  • Promise面试题,控制异步流程
  • select2 取值 遍历 设置默认值
  • Terraform入门 - 3. 变更基础设施
  • Webpack 4 学习01(基础配置)
  • 大型网站性能监测、分析与优化常见问题QA
  • 基于遗传算法的优化问题求解
  • 解析带emoji和链接的聊天系统消息
  • 微信小程序:实现悬浮返回和分享按钮
  • 物联网链路协议
  • 找一份好的前端工作,起点很重要
  • Nginx惊现漏洞 百万网站面临“拖库”风险
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • ​LeetCode解法汇总2670. 找出不同元素数目差数组
  • # Apache SeaTunnel 究竟是什么?
  • #define 用法
  • #Lua:Lua调用C++生成的DLL库
  • (html5)在移动端input输入搜索项后 输入法下面为什么不想百度那样出现前往? 而我的出现的是换行...
  • (js)循环条件满足时终止循环
  • (TipsTricks)用客户端模板精简JavaScript代码
  • (超详细)语音信号处理之特征提取
  • (二)linux使用docker容器运行mysql
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • (个人笔记质量不佳)SQL 左连接、右连接、内连接的区别
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (学习日记)2024.01.19
  • (学习日记)2024.04.04:UCOSIII第三十二节:计数信号量实验
  • (原创)boost.property_tree解析xml的帮助类以及中文解析问题的解决
  • .mysql secret在哪_MySQL如何使用索引
  • .net 4.0 A potentially dangerous Request.Form value was detected from the client 的解决方案
  • .NET CLR基本术语
  • .net 打包工具_pyinstaller打包的exe太大?你需要站在巨人的肩膀上-VC++才是王道
  • .NET 同步与异步 之 原子操作和自旋锁(Interlocked、SpinLock)(九)
  • .NET/C# 中你可以在代码中写多个 Main 函数,然后按需要随时切换