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中props报错问题解决方案
这篇文章主要介绍了Vue中props报错问题解决方案,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-09-09
在vue中:style 的使用方式汇总
在Vue开发中使用:style绑定样式是常见需求,应注意:class与:style的配合使用,错误的使用可能导致样式不生效,正确的方法是使用数组绑定多个样式,这些技巧有助于提高开发效率和保持代码整洁,感兴趣的朋友跟随小编一起看看吧
2024-09-09
vue自动添加浏览器兼容前后缀操作
这篇文章主要介绍了vue自动添加浏览器兼容前后缀操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue项目常用组件和框架结构介绍
这篇文章通过图文形式给大家介绍了vue项目的骨架及常用组件的相关知识，对此有兴趣的朋友跟着小编一起学习参考下吧。
2017-12-12
nginx+vite项目打包以及部署的详细过程
我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹,下面这篇文章主要给大家介绍了关于nginx+vite项目打包以及部署的相关资料,需要的朋友可以参考下
2023-01-01
Vue文本模糊匹配功能如何实现
这篇文章主要介绍了Vue文本模糊匹配功能如何实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
vue项目实现搜索内容变红色显示
这篇文章主要为大家介绍了vue项目实现搜索内容变红色显示，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
vue+elementUi 实现密码显示/隐藏+小图标变化功能
这篇文章主要介绍了vue+elementUi 实现密码显示/隐藏+小图标变化功能,需本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-01-01
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
这篇文章主要介绍了为什么Vue3.0使用Proxy实现数据监听？defineProperty表示不背这个锅，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
Django+Vue.js搭建前后端分离项目的示例
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例，具有一定参考价值，有兴趣的可以了解一下
2017-08-08