Vue Echarts渲染数据导致残留脏数据的问题处理
更新时间：2024年08月13日 09:20:52 作者：苏生Susheng
这篇文章主要介绍了Vue Echarts渲染数据导致残留脏数据的问题处理,文中通过代码示例给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
问题背景
前提说明：
- 不同组件中都使用了Echarts
- 多个组件在一个父组件中动态渲染
- 组件中存在多种数据渲染，有Echarts，也有集合，也有文本，这些数据放在一个集合对象中返回到前端
- Echarts中的数据从数据库读取出来(返回的是一个可以直接解析的option的JSON格式的数据)
- 组件中使用mount挂载触发获取option数据
- 父组件中点击上一条、下一条存在组件切换
- 不同组件切换时，组件确实重新加载，数据重新获取，能够重新渲染
问题说明：
- 同组件的多条记录切换，组件不会动态加载，mount中不会执行获取option数据的方法
- 同组件多条记录切换，Echarts中的数据会展示之前的残留数据
- 如果返回的集合中没有option这条记录，那么有Echarts中的数据会渲染切换之前的数据
- 如果一个组件中渲染了两个Echarts，当两个option都没有数据时，第一个的确不会渲染，但是第二个渲染的还是切换之前的数据
解决
问题1解决
问题：
- 同组件的多条记录切换，组件不会动态加载，mount中不会执行获取option数据的方法
解决：
- 父组件中，根据组件名称动态赋值ref属性，根据ref属性，直接在父组件中调用加载数据的方法
<component :ref="`detail_${detailCom}`" :is="detailCom" :summaryLabel="summaryLabel" :concernDetList="concernDetailList"></component>
//页面切换
changePage(type){
if(this.concernDetailList.length === 0){
this.detailCom = "Empty"
}else {
// 根据newVal来：1、展示对应的组件，2、更新接口
if(type === "ABNORMAL_INDICATORS"){
this.detailCom = "AbnormalIndicators"
this.$refs.detail_AbnormalIndicators.getConcernDet_Msg(this.concernDetailList)
}else if(type === "EMERGENCY_PLAN"){
this.detailCom = "EmergencyPlan"
this.$refs.detail_EmergencyPlan.getConcernDet_Msg(this.concernDetailList)
}else if(type === "POLICY_INTERPRETATION"){
this.detailCom = "PolicyInterpretate"
//政策解读 待定，页面还未开发
//this.$refs.detail_PolicyInterpretate.getConcernDet_Msg(this.concernDetailList)
}else if(type === "TASK_TRACK"){
this.detailCom = "TaskTracking"
this.$refs.detail_TaskTracking.getConcernDet_Msg(this.concernDetailList)
}else if(type === "SUPERVISION_REMINDER"){
this.detailCom = "SuperveReminder"
this.$refs.detail_SuperveReminder.getConcernDet_Msg(this.concernDetailList)
}
}
},
缺陷：
- 同组件不触发动态加载不会出问题，但是不同组件或者初次进入时，组件是动态加载的，此时ref并没有赋值，因此浏览器控制台会有一个报错，不过不影响使用，就没管了
问题2解决
问题：
- 同组件多条记录切换，Echarts中的数据会展示之前的残留数据
解决： - 这个问题很简单，只需要在Echarts渲染option数据时，清除旧数据就可以了，一个参数就能搞定
- 原本是这么写的：
this.myChart.setOption(option);，现在这么写：this.myChart.setOption(option,true);，避免上一次渲染的缓存干扰
问题3解决
问题：
- 如果返回的集合中没有option这条记录，那么有Echarts中的数据会渲染切换之前的数据
this.concernDetList.forEach((item)=>{
let obj = {
"name":item.detTitle,
"value":item.columnContent1
}
if(item.sort == "1"){
//详情描述
this.detailObj = obj
}else if(item.sort == "3"){
//异常诊断
this.abnDiagnosisObj = obj
}else if(item.sort == "4"){
//建议方案推荐
this.adviceObj = obj
}else if(item.sort == "2"){
//图示区域
this.resPersonList = JSON.parse(item.columnContent2 || "[]");
this.myChart = this.$echarts.init(document.getElementById('lineEcharts'));
option = JSON.parse(item.columnContent1 || "[]");
console.log("============",option)
// 加true参数，避免上一次渲染的缓存干扰
this.myChart.setOption(option,true);
//响应屏幕宽高
window.addEventListener('resize', () => {
if (this.myChart) {
this.myChart.resize();
}
});
}
})
解决：
- 说到底还是
this.myChart.setOption(option,true);这个true的问题 - 这个问题只能在后台处理，因为想要清空上一个Echarts中的option的话，必须要进到this.sort===2这个逻辑
- 而现在的问题是后台没有查到对应的这条记录时，压根就不返回
- 因此需要在后台去判断有没有sort=2的记录，如果没有必须写一个空的返回出来，这样前端才能进到这个逻辑
问题4解决
问题：
如果一个组件中渲染了两个Echarts，当两个option都没有数据时，第一个的确不会渲染，但是第二个渲染的还是切换之前的数据
解决：尝试写了好久的逻辑，一直都不知道还有个clear方法
反正子组件不能这么写：
this.myChart.setOption([],true);，这么写会报错，直接让第二个渲染方法不执行，因此就不会渲染空数据，也就会展示残留的脏数据了用
this.myChart.clear()完美解决问题父组件
//页面切换
changePage(type){
if(this.concernDetailList.length === 0){
this.detailCom = "Empty"
}else {
// 根据newVal来：1、展示对应的组件，2、更新接口
if(type === "ABNORMAL_INDICATORS"){
this.detailCom = "AbnormalIndicators"
this.$refs.detail_AbnormalIndicators.getConcernDet_Msg(this.concernDetailList)
}else if(type === "EMERGENCY_PLAN"){
this.detailCom = "EmergencyPlan"
this.$refs.detail_EmergencyPlan.getConcernDet_Msg(this.concernDetailList)
}else if(type === "POLICY_INTERPRETATION"){
this.detailCom = "PolicyInterpretate"
//政策解读 待定，页面还未开发
//this.$refs.detail_PolicyInterpretate.getConcernDet_Msg(this.concernDetailList)
}else if(type === "TASK_TRACK"){
this.detailCom = "TaskTracking"
this.$refs.detail_TaskTracking.getConcernDet_Msg(this.concernDetailList)
}else if(type === "SUPERVISION_REMINDER"){
this.detailCom = "SuperveReminder"
this.$refs.detail_SuperveReminder.getConcernDet_Msg(this.concernDetailList)
}
}
},
// 上一条
handlePre(){
//获取上一条的ID
this.concernSummaryIndex = this.concernSummaryIndex - 1;
const concernDetId = this.followList[this.concernSummaryIndex].summaryId;
//根据上一条的ID查询对应的详情
this.changeConcernDet(concernDetId,this.followList[this.concernSummaryIndex].type);
this.summaryLabel = this.followList[this.concernSummaryIndex].summaryLabel
},
// 下一条
handleNext(){
//获取下一条的ID
this.concernSummaryIndex = this.concernSummaryIndex + 1;
const concernDetId = this.followList[this.concernSummaryIndex].summaryId;
//根据下一条的ID查询对应的详情
this.changeConcernDet(concernDetId,this.followList[this.concernSummaryIndex].type);
this.summaryLabel = this.followList[this.concernSummaryIndex].summaryLabel
},
changeConcernDet(concernDetId,type){
const concernSummaryInfoQueryVO = {"summaryId":concernDetId};
getConcernDet(concernSummaryInfoQueryVO).then((result)=>{
//更新关注事项详情
this.concernDetailList = result.data;
this.changePage(type);
});
}
- 子组件
getBarEcharts(option){
this.myChart = this.$echarts.init(document.getElementById('barEcharts'));
if(option.length === 0) {
this.myChart.clear()
}else{
//图示区域
//let option = JSON.parse(item.columnContent1 || "[]");
// 加true参数，避免上一次渲染的缓存干扰
this.myChart.setOption(option,true);
//响应屏幕宽高
window.addEventListener('resize', () => {
if (this.myChart) {
this.myChart.resize();
}
});
}
},
getZhuEcharts(option){
this.myChart2 = this.$echarts.init(document.getElementById('zhuEcharts'));
if(option.length === 0) {
this.myChart2.clear()
}else{
//let option = JSON.parse(item.columnContent2 || "[]");
// 加true参数，避免上一次渲染的缓存干扰
this.myChart2.setOption(option,true);
//响应屏幕宽高
window.addEventListener('resize', () => {
if (this.myChart2) {
this.myChart2.resize();
}
});
}
},
getConcernDet_Msg(list){
this.detailObj={}
this.myChart2 = null;
this.myChart = null;
if(list){
this.concernDetList = list;
}
this.concernDetList.forEach((item)=>{
if(item.sort == "1"){
let obj = {
"name":item.detTitle,
"value":item.columnContent1
}
//详情描述
this.detailObj = obj
}else if(item.sort == "2"){
this.getBarEcharts(JSON.parse(item.columnContent1 || "[]"))
this.getZhuEcharts(JSON.parse(item.columnContent2 || "[]"))
}
})
},
以上就是Vue Echarts渲染数据导致残留脏数据的问题处理的详细内容，更多关于Vue Echarts渲染后残留脏数据的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了vue实现将图像文件转换为base64，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
这篇文章主要介绍了详解一次Vue低版本安卓白屏问题的解决过程,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-05-05
这篇文章主要介绍了Vue中实现权限管理详解,权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源,而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了浅谈关于vue中scss公用的解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了Vue SSR 即时编译技术的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要介绍了vue 路由懒加载，当打包构建应用时，JavaScript 包会变得非常大，影响页面加载，这便是vue 路由懒加载，接下来随小编一起进入文章了解更多详细内容吧2021-10-10
Vue动态路由权限涉及根据用户权限动态生成路由配置,实现此功能可增强应用安全性、灵活性,提升用户体验和开发效率,本文就来介绍一下前端单独实现vue动态路由的示例代码,感兴趣的可以了解一下2024-09-09
要在Web页面中加入地图,我推荐你使用高德地图JSAPI,下面这篇文章主要给大家介绍了关于VUE项目调用高德地图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
日历在很多地方都可以使用的到，本文主要介绍了vue3日历控件的具体实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
Vue项目中new Vue()和export default{}的区别说明
这篇文章主要介绍了Vue项目中new Vue()和export default{}的区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论