SpreadJS在报表勾稽分析领域的应用场景解析

财务报表的勾稽关系分析是指对报表中有关指标和数字间存在的逻辑进行查考、核对的过程，分析师通过考察报表某项目的金额来分析企业的会计政策选择、账务处理思路以及报表数字背后的交易或事项，并从财务报表及其附注中证实或证伪自己的假设，进而对企业的财务状况、经营成果和现金流量状况做出判断。由于勾稽关系可通过设置报表项目间的比较公式来核对项目数据并检查报表的准确性，因此，这一方法常用于表间审核和数据差异审核。
在金融行业，我们经常会有勾稽分析的需求，对某个计算结果进行审查，但是这个计算结果可能依赖多个单元格，而且会有会有多级依赖的情况，如果让我们的从业人员靠眼睛找，工作量巨大，而且准确性存疑，基本上死路一条，因此让整个审查过程可视化，迫在眉睫，本章我们利用SpreadJS和Echarts将审计审查过程可视化
一.首先我们先了解一下SpreadJS或Excel中引用和从属关系：
   1.在单元格B1中设置公式 =SUM(A1)。 单元格A1是单元格B1的引用单元格（引用关系）
   2.在单元格B1中设置公式 =SUM(A1)。 单元格B1是单元格A1的从属单元格（从属关系）
二.接下来我们看一下最终实现效果：
   1.引用关系
   
   2.从属关系
  

三.本次我们用的是Echarts的树图将引用和从属关系可视化，关于Echarts上手，大家去Echarts官网有完整上手教程，Echarts社区有很多开发者做的许多有趣又实用的demo，这里我们用的是树图

我们看一下它的data的数据结构：

四.接下来我们要用SpreadJS的获取引用和从属关系的api将某个单元格的引用和从属关系顺藤摸瓜，刨根问题，刨到“祖坟”上，将这些关系，构造成Echarts树图的data结构，废话不说，直接上核心代码

1. // 递归构建追踪树
   
2.     buildNodeTreeAndPaint = (spreadSource, trackCellInfo) => {
   
3.         let info = this.getCellInfo(trackCellInfo);
   
4.         let sheetSource = spreadSource.getSheetFromName(info.sheetName);
   
5.         // 创建跟节点
   
6.         let rootNode = this.creatNode(info.row, info.col, sheetSource, 0, "");
   
7. 
   
8.         let name = rootNode.sheetName + "*" + rootNode.row + "*" + rootNode.col + "*" + Math.random().toString();
   
9.         let precedentsRootNode = '';
   
10.         let dependentsRootNode = '';
    
11.         if (this.state.trackType === "Precedents" || this.state.trackType === "Both") {
    
12.             this.getNodeChild(rootNode, sheetSource, "Precedents")
    
13.             debugger;
    
14.             console.log(rootNode)
    
15.             if (this.state.trackType === "Both") {
    
16.                 let rootNodeChildren = JSON.parse(JSON.stringify(rootNode.children));
    
17.                 rootNode.children = [];
    
18.                 precedentsRootNode = JSON.parse(JSON.stringify(rootNode));
    
19.                 precedentsRootNode.children.push({
    
20.                     name: "Precedents",
    
21.                     value: "Precedents",
    
22.                     children: rootNodeChildren
    
23.                 })
    
24.                 this.setState({
    
25.                     precedentsRootNode: JSON.parse(JSON.stringify(precedentsRootNode)),
    
26.                 })
    
27.             }
    
28.         }
    
29.         if (this.state.trackType === "Dependents" || this.state.trackType === "Both") {
    
30.             this.getNodeChild(rootNode, sheetSource, "Dependents")
    
31.             console.log(rootNode)
    
32.             if (this.state.trackType === "Both") {
    
33.                 let deepInfo = [1];
    
34.                 let rootNodeChildren = JSON.parse(JSON.stringify(rootNode.children));
    
35.                 rootNode.children = [];
    
36.                 dependentsRootNode = JSON.parse(JSON.stringify(rootNode));
    
37.                 dependentsRootNode.children.push({
    
38.                     name: "Dependents",
    
39.                     value: "Dependents",
    
40.                     children: rootNodeChildren
    
41.                 })
    
42.                 this.setState({
    
43.                     dependentsRootNode: JSON.parse(JSON.stringify(dependentsRootNode)),
    
44.                 })
    
45.             }
    
46. 
    
47. 
    
48. 
    
49.         }
    
50.         if (this.state.trackType === "Both") {
    
51.             precedentsRootNode.children = precedentsRootNode.children.concat(dependentsRootNode.children);
    
52.             // let bothRootNode = precedentsRootNode.children[0].children.concat(dependentsRootNode.children[0].children)
    
53.             this.setState({
    
54.                 rootNode1: JSON.parse(JSON.stringify(precedentsRootNode)),
    
55.             })
    
56.         } else {
    
57.             this.setState({
    
58.                 rootNode1: JSON.parse(JSON.stringify(rootNode)),
    
59.             })
    
60.         }
    
61.     }
    
62.     creatNode = (row, col, sheet, deep, trackType) => {
    
63.         let node = {
    
64.             value: sheet.getValue(row, col),
    
65.             position: sheet.name() + "!" + GC.Spread.Sheets.CalcEngine.rangeToFormula(new GC.Spread.Sheets.Range(row, col, 1, 1)),
    
66.             deep: deep,
    
67.             name: `${sheet.name()}!${GC.Spread.Sheets.CalcEngine.rangeToFormula(new GC.Spread.Sheets.Range(row, col, 1, 1))}\nvalue:${sheet.getValue(row, col)}`,
    
68.             sheetName: sheet.name(),
    
69.             row: row,
    
70.             col: col,
    
71.             trackType: trackType
    
72.         };
    
73.         return node;
    
74.     }
    
75.     getNodeChild = (rootNode, sheet, trackType) => {
    
76.         let childNodeArray = [];
    
77.         let children = [];
    
78.         let row = rootNode.row, col = rootNode.col, deep = rootNode.deep;
    
79.         if (trackType == "Precedents") {
    
80.             children = sheet.getPrecedents(row, col);
    
81.         }
    
82.         else {
    
83.             children = sheet.getDependents(row, col);
    
84.         }
    
85.         // let self = this;
    
86.         if (children.length >= 1) {
    
87.             children.forEach((node) => {
    
88.                 let row = node.row,
    
89.                     col = node.col,
    
90.                     rowCount = node.rowCount,
    
91.                     colCount = node.colCount,
    
92.                     _sheet = sheet.parent.getSheetFromName(node.sheetName);
    
93.                 if (rowCount > 1 || colCount > 1) {
    
94.                     for (let r = row; r < row + rowCount; r++) {
    
95.                         for (let c = col; c < col + colCount; c++) {
    
96.                             let newNode = this.creatNode(r, c, _sheet, deep + 1, trackType)
    
97.                             // if (deep < self.maxDeep) {
    
98.                             this.getNodeChild(newNode, _sheet, trackType);
    
99.                             // }
    
100.                             childNodeArray.push(newNode);
     
101.                         }
     
102.                     }
     
103.                 } else {
     
104.                     let newNode = this.creatNode(row, col, _sheet, deep + 1, trackType)
     
105.                     // if (deep < self.maxDeep) {
     
106.                     this.getNodeChild(newNode, _sheet, trackType);
     
107.                     // }
     
108.                     childNodeArray.push(newNode);
     
109.                 }
     
110.             });
     
111.         }
     
112.         rootNode.children = childNodeArray;
     
113.     }

复制代码

五.将构造好的引用和从属树rootNode在Echarts中渲染

1. myChart.setOption(
   
2.             (option = {
   
3.                 tooltip: {
   
4.                     trigger: 'item',
   
5.                     triggerOn: 'mousemove'
   
6.                 },
   
7.                 series: [
   
8.                     {
   
9.                         type: 'tree',
   
10.                         data: [this.state.rootNode1],
    
11.                         top: '1%',
    
12.                         left: '15%',
    
13.                         bottom: '1%',
    
14.                         right: '7%',
    
15.                         symbolSize: 10,
    
16.                         orient: this.state.trackType === 'review'?'LR':'RL',
    
17.                         label: {
    
18.                             position: this.state.trackType === 'review'?'left':'right',
    
19.                             verticalAlign: 'middle',
    
20.                             align: this.state.trackType === 'review'?'right':'left',
    
21.                         },
    
22.                         leaves: {
    
23.                             label: {
    
24.                                 position: this.state.trackType === 'review'?'right':'left',
    
25.                                 verticalAlign: 'middle',
    
26.                                 align: this.state.trackType === 'review'?'left':'right'
    
27.                             }
    
28.                         },
    
29.                         emphasis: {
    
30.                             focus: 'descendant'
    
31.                         },
    
32.                         // layout: 'radial',
    
33.                         expandAndCollapse: true,
    
34.                         animationDuration: 550,
    
35.                         animationDurationUpdate: 750
    
36.                     }
    
37.                 ]
    
38.             })
    
39.         );
    
40. 
    
41.         option && myChart.setOption(option);

复制代码

以上就是实现报表中公式引用从属关系Echarts可视化的核心实现逻辑，由于工程较大，如需获取源码，可找我获取