vue使用echarts图表渲染异常本地正常，线上时有时无的渲染

我也是踩坑了，经过半天的挣扎和寻找资料最终得出来的结果！
经过仔细检查可以看出，直接声明的div里会被echarts自动挂载一个_echarts_instance_属性，导致echarts挂载页面渲染的时候存在一个缓存问题，参考下图：

解决方案：把她清空之后，后面就能正常挂载到页面上进行渲染了，参考下图：

// 主要代码：document.getElementById("instrument").setAttribute('_echarts_instance_', '')// 我所写的项目是vue3,但是用的是以前拷贝的vue2代码，所以需要用到markRaw函数，
// 如果使用vue3编写就无需加markRawthis.loadChart = markRaw(echarts.init(document.getElementById("instrument")));// 绘制图表this.loadChart.setOption(this.option,true);

都到这里了，那问题就解决了，如果还有页面数据没有解决的话就使用下面两个echarts官方API来清空数据和清空画布，如果有帮助的话给个鼓励点个赞吧~~~~

//清空画布this.loadChart.clear();//清空数据this.loadChart.dispose();

vue使用echarts图表渲染异常本地正常，线上时有时无的渲染相关推荐

Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...
vue使用echarts图表自适应的几种解决方案
这篇文章主要给大家介绍了关于vue使用echarts图表自适应的几种解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 1. ...
vue使用echarts图表小结
vue使用echarts图表小结仪表盘曲线图三曲线双曲线柱状图柱状图一柱状图二饼图饼图一饼图二饼图三其他树状水球注:部分效果为动图叠加仪表盘 const getOpti ...
Vue中echarts图表x轴文字倾斜展示(防止字迹展示重叠)
前言 Vue中echarts图表x轴文字倾斜展示效果图代码 axisLabel: {fontSize: 12,color: '#666',interval: 0,//主要是下面的代码-倾斜rota ...
vue项目本地跨域、线上跨域、本地链接线上地址跨域、https站点使用ws协议跨域问题解决
本地跨域---->配置vue.config.js .env.development文件 # just a flag ENV = 'development'# base api VUE_APP_B ...
java access 不在本地_线上的java项目访问不到线上数据库,但是这个数据库我本地可以连接到,求解...
java.lang.Exception: 数据库连接失败:Cannot create PoolableConnectionFactory (Server connection failure duri ...
解决PC浏览器调用摄像头失败(本地可以,线上失败)
解决PC浏览器调用摄像头失败(本地可以,线上失败) 原因:浏览器为了安全http协议获取不到摄像头权限解决方案 1.切换https 如果域名可以使用https,切换为https即可 2.修改浏览器设 ...
Vue使用echarts图表实现k线图（分K，日K，周K，月K）
前言: 因为K线图需要庞大的数据,这里我用的是mock.js随机产生的数据,效果相对后台反给的数据来说波动比较大. mock.js产生的效果图: 其实真正用到项目中就比较缓和效果图: 开始步入正题 ...
vue实现echarts图表下载（含多张图表），导出图片格式
使用插件: html2canvas npm安装: npm install html2canvas 组件引入: import html2canvas from "html2canvas&quo ...

vue使用echarts图表渲染异常本地正常，线上时有时无的渲染

vue使用echarts图表渲染异常本地正常，线上时有时无的渲染相关推荐

最新文章

热门文章