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

Echarts 报提示 There is a chart instance already initialized on the dom.

在这里插入图片描述
在这里插入图片描述

问题原因:

每次执行 Echarts图例方法都会拿到相关的dom元素执行Echarts图例初始化操作

但是每次执行的时候拿到的dom元素又是相同的,Echarts初始化执行的时候检查到这个dom上面已经有了一个

图表了 就不会再重新拿到这个dom元素执行初始化操作

解决方案:

每次重新拿到数据 都重新执行 Echarts初始化操作(先注销当前dom元素,再重新执行 Echarts初始化操作),这样能够保证每次渲染的数据都是最新的

<div id="test"></div>
data () {myChart:null  //把echarts实例方法data中,方便后面执行注销操作
}// 先判断当前echarts实例是否存在
// 存在 代表是重新执行例这个实例,需要注销echarts实例,重新初始化
// 不存在 代表是第一次进行初始化实例,不用进行注销操作
if(this.myChart){// 执行注销实例操作this.myChart.dispose()
}
// 重新初始化echarts实例
this.myChart = this.$echarts.init(document.getElementById('test'));

相关文章:

  • docker的快速入门教程
  • excel 动态列导出
  • docker离线搭建仓库
  • 用A*算法求解八数码问题
  • 【C++】STL(二) string容器
  • SpringBoot中定时任务、corn表达式
  • Oracle 的同义词(Synonym) 作用
  • 加速你的应用:探索Redis的极致性能与多样化应用
  • 客户案例|100M 768 维向量数据,Zilliz Cloud 稳定支持 Shulex VOC 业
  • Java基于SpringBoot+Vue的人事管理系统,附源码
  • 洛谷 P1036 [NOIP2002 普及组] 选数
  • WPF实现一个表格数据从cs获取动态渲染
  • linux使用LVM管理磁盘,并扩容“磁盘“
  • Windows安装Go语言及VScode配置
  • oracle触发器
  • CentOS 7 防火墙操作
  • CentOS学习笔记 - 12. Nginx搭建Centos7.5远程repo
  • Essential Studio for ASP.NET Web Forms 2017 v2,新增自定义树形网格工具栏
  • LeetCode541. Reverse String II -- 按步长反转字符串
  • Linux学习笔记6-使用fdisk进行磁盘管理
  • Puppeteer:浏览器控制器
  • python 学习笔记 - Queue Pipes,进程间通讯
  • vue.js框架原理浅析
  • vue:响应原理
  • 代理模式
  • 欢迎参加第二届中国游戏开发者大会
  • 简单实现一个textarea自适应高度
  • 双管齐下,VMware的容器新战略
  • 小程序 setData 学问多
  • 新版博客前端前瞻
  • 阿里云ACE认证学习知识点梳理
  • 格斗健身潮牌24KiCK获近千万Pre-A轮融资,用户留存高达9个月 ...
  • ​Java并发新构件之Exchanger
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • ​linux启动进程的方式
  • #git 撤消对文件的更改
  • #Linux(权限管理)
  • %check_box% in rails :coditions={:has_many , :through}
  • (SpringBoot)第七章:SpringBoot日志文件
  • (安全基本功)磁盘MBR,分区表,活动分区,引导扇区。。。详解与区别
  • (笔试题)合法字符串
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • (算法二)滑动窗口
  • 、写入Shellcode到注册表上线
  • .aanva
  • .htaccess配置常用技巧
  • .NET gRPC 和RESTful简单对比
  • .Net MVC + EF搭建学生管理系统
  • .NET 回调、接口回调、 委托
  • .net6使用Sejil可视化日志
  • .NET开发不可不知、不可不用的辅助类(三)(报表导出---终结版)
  • .net开发时的诡异问题,button的onclick事件无效
  • @NestedConfigurationProperty 注解用法
  • @RequestMapping用法详解
  • [ 隧道技术 ] 反弹shell的集中常见方式(二)bash反弹shell