在金融行业，我们经常会有审核审核的需求，审核某个计算结果，但是这个计算结果可能依赖多个cell，会有很多超级依赖的情况下，如果我们从业者用眼睛去寻找，工作量巨大，而且准确性存疑，基本上是死路一条。因此，可视化整个评审过程迫在眉睫。现在我们使用纯前端表格和Echarts来整合审计审核流程。可视化1、首先我们了解前端表格或Excel中的引用和隶属关系：1、在B1单元格中设置公式=SUM(A1)。A1单元格是B1单元格的引用单元格（引用关系）2、在B1单元格中设置公式=SUM(A1)。B1单元格是A1单元格的从属单元格（从属关系）2.接下来我们看一下最终的实现效果：1.引用关系2.从属关系3.这次我们使用Echarts的树形图来结合引用和从属关系可视化，关于Echarts入门，可以去Echarts官网获取完整教程。Echarts社区有很多开发者制作的有趣实用的demo。这里我们使用树形图4.接下来我们将使用纯前端表格控件获取引用和从属关系的API追踪某个单元格的引用和从属关系，挖出问题的根源，深挖“祖坟”，并将这些关系构造成Echarts树状图的数据结构。废话不多说，直接上核心代码//递归构建跟踪树buildNodeTreeAndPaint=(spreadSource,trackCellInfo)=>{letinfo=this.getCellInfo(trackCellInfo);让sheetSource=spreadSource.getSheetFromName(info.sheetName);//创建rootNode=this.creatNode(info.row,info.col,sheetSource,0,"");letname=rootNode.sheetName+"*"+rootNode.row+"*"+rootNode.col+"*"+Math.random().toString();letprecedingsRootNode='';让dependentsRootNode='';if(this.state.trackType==="先例"||this.state.trackType==="两者"){this.getNodeChild(rootNode,sheetSource,"先例")调试器；console.log(rootNode)if(this.state.trackType==="Both"){让rootNodeChildren=JSON.parse(JSON.stringify(rootNode.children));rootNode.children=[];先例RootNode=JSON.parse(JSON.stringify(rootNode));precedentsRootNode.children.push({name:"Precedents",value:"Precedents",children:rootNodeChildren})this.setState({precedentsRootNode:JSON.parse(JSON.stringify(precedentsRootNode)),})}}if(this.state.trackType==="Dependents"||this.state.trackType==="Both"){this.getNodeChild(rootNode,sheetSource,"Dependents")console.log(rootNode)if(this.state.trackType===“两者”）{让deepInfo=[1];让rootNodeChildren=JSON.parse(JSON.stringify(rootNode.children));rootNode.children=[];dependentsRootNode=JSON.parse(JSON.stringify(rootNode));dependentsRootNode.children.push({name:"Dependents",value:"Dependents",children:rootNodeChildren})this.setState({dependentsRootNode:JSON.parse(JSON.stringify(dependentsRootNode)),})}}if(this.state.trackType==="两者"){//让bothRootNode=precedentsRootNode.children[0].children.concat(dependentsRootNode.children[0].children)this.setState({rootNode1:JSON.parse(JSON.stringify(precedentsRootNode)),})}else{this.setState({rootNode1:JSON.parse(JSON.stringify(rootNode)),})}}creatNode=(row,col,sheet,deep,trackType)=>{让node={value:sheet.getValue(row,col),position:sheet.name()+"!"+GC.Spread.Sheets.CalcEngine.rangeToFormula(newGC.Spread.Sheets.Range(row,col,1,1)),deep:deep,name:`${sheet.name()}!${GC.Spread.Sheets.CalcEngine.rangeToFormula(newGC.Spread.Sheets.Range(row,col,1,1))}\nvalue:${sheet.getValue(row,col)}`，sheetName:sheet.name(),行:行,列:列,trackType:trackType};返回节点；}getNodeChild=(rootNode,sheet,trackType)=>{让childNodeArray=[];让孩子们=[];让row=rootNode.row,col=rootNode.col,deep=rootNode.deep;如果（trackType=="Precedents"){children=sheet.getPrecedents(row,col);}else{children=sheet.getDependents(row,col);}//让self=this;if(children.length>=1){children.forEach((node)=>{让row=node.row,col=node.col,rowCount=node.rowCount,colCount=node.colCount,_sheet=sheet.parent.getSheetFromName(node.sheetName);if(rowCount>1||colCount>1){for(letr=row;r
