【Vue】Echarts渲染数据，残留脏数据问题处理

问题背景

前提说明：

1. 不同组件中都使用了Echarts
2. 多个组件在一个父组件中动态渲染
3. 组件中存在多种数据渲染，有Echarts，也有集合，也有文本，这些数据放在一个集合对象中返回到前端
4. Echarts中的数据从数据库读取出来(返回的是一个可以直接解析的option的JSON格式的数据)
5. 组件中使用mount挂载触发获取option数据
6. 父组件中点击上一条、下一条存在组件切换
7. 不同组件切换时，组件确实重新加载，数据重新获取，能够重新渲染

问题说明：

1. 同组件的多条记录切换，组件不会动态加载，mount中不会执行获取option数据的方法
2. 同组件多条记录切换，Echarts中的数据会展示之前的残留数据
3. 如果返回的集合中没有option这条记录，那么有Echarts中的数据会渲染切换之前的数据
4. 如果一个组件中渲染了两个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(){//获取上一条的IDthis.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(){//获取下一条的IDthis.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 || "[]"))}})},