Resumen: Este artículo fue publicado originalmente en CSDN por el equipo técnico de Grape City. Indique la fuente de la reimpresión: sitio web oficial de Grape City , Grape City proporciona a los desarrolladores herramientas, soluciones y servicios de desarrollo profesional para empoderar a los desarrolladores.
En la industria financiera, a menudo tenemos la necesidad de una revisión de auditoría para revisar un determinado resultado de cálculo, pero este resultado de cálculo puede depender de varias celdas y habrá dependencias de varios niveles. Si nuestros profesionales confían en Looking for eyes, la carga de trabajo es enorme, y la precisión es dudosa, básicamente un callejón sin salida, por lo que es inminente visualizar todo el proceso de revisión. Ahora usamos tablas de front-end y Echarts puros para visualizar el proceso de revisión de auditoría
1. Primero, comprendamos la relación de referencia y subordinación en la tabla frontal o Excel:
1. Establezca la fórmula =SUMA(A1) en la celda B1. La celda A1 es la celda de referencia ( relación de referencia ) de la celda B1
2. Establezca la fórmula =SUMA(A1) en la celda B1. La celda B1 es una celda subordinada de la celda A1 ( relación de dependencia )
2. A continuación, echemos un vistazo al efecto de realización final:
1. Relación de referencia
2. Afiliación
3. Esta vez usamos el diagrama de árbol de Echarts para visualizar referencias y afiliaciones. Para comenzar con Echarts, puede visitar el sitio web oficial de Echarts para obtener un tutorial completo. Hay muchas demostraciones interesantes y prácticas realizadas por muchos desarrolladores en la comunidad de Echarts. Aquí usamos el diagrama de árbol
4. A continuación, usaremos la api del control de tabla de front-end puro para obtener referencias y relaciones de afiliación para rastrear las referencias y las relaciones de afiliación de una celda determinada, desenterrar el problema de raíz, profundizar en la "tumba ancestral" y construye estas relaciones en un diagrama de árbol de Echarts La estructura de datos, no digas tonterías, ve directamente al código central
// 递归构建追踪树
buildNodeTreeAndPaint = (spreadSource, trackCellInfo) => {
let info = this.getCellInfo(trackCellInfo);
let sheetSource = spreadSource.getSheetFromName(info.sheetName);
// 创建跟节点
let rootNode = this.creatNode(info.row, info.col, sheetSource, 0, "");
let name = rootNode.sheetName + "*" + rootNode.row + "*" + rootNode.col + "*" + Math.random().toString();
let precedentsRootNode = '';
let dependentsRootNode = '';
if (this.state.trackType === "Precedents" || this.state.trackType === "Both") {
this.getNodeChild(rootNode, sheetSource, "Precedents")
debugger;
console.log(rootNode)
if (this.state.trackType === "Both") {
let rootNodeChildren = JSON.parse(JSON.stringify(rootNode.children));
rootNode.children = [];
precedentsRootNode = 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 === "Both") {
let deepInfo = [1];
let 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 === "Both") {
precedentsRootNode.children = precedentsRootNode.children.concat(dependentsRootNode.children);
// let 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) => {
let node = {
value: sheet.getValue(row, col),
position: sheet.name() + "!" + GC.Spread.Sheets.CalcEngine.rangeToFormula(new GC.Spread.Sheets.Range(row, col, 1, 1)),
deep: deep,
name: `${sheet.name()}!${GC.Spread.Sheets.CalcEngine.rangeToFormula(new GC.Spread.Sheets.Range(row, col, 1, 1))}\nvalue:${sheet.getValue(row, col)}`,
sheetName: sheet.name(),
row: row,
col: col,
trackType: trackType
};
return node;
}
getNodeChild = (rootNode, sheet, trackType) => {
let childNodeArray = [];
let children = [];
let row = rootNode.row, col = rootNode.col, deep = rootNode.deep;
if (trackType == "Precedents") {
children = sheet.getPrecedents(row, col);
}
else {
children = sheet.getDependents(row, col);
}
// let self = this;
if (children.length >= 1) {
children.forEach((node) => {
let row = node.row,
col = node.col,
rowCount = node.rowCount,
colCount = node.colCount,
_sheet = sheet.parent.getSheetFromName(node.sheetName);
if (rowCount > 1 || colCount > 1) {
for (let r = row; r < row + rowCount; r++) {
for (let c = col; c < col + colCount; c++) {
let newNode = this.creatNode(r, c, _sheet, deep + 1, trackType)
// if (deep < self.maxDeep) {
this.getNodeChild(newNode, _sheet, trackType);
// }
childNodeArray.push(newNode);
}
}
} else {
let newNode = this.creatNode(row, col, _sheet, deep + 1, trackType)
// if (deep < self.maxDeep) {
this.getNodeChild(newNode, _sheet, trackType);
// }
childNodeArray.push(newNode);
}
});
}
rootNode.children = childNodeArray;
}
5. Representar la referencia construida y el nodo raíz del árbol subordinado en Echarts
myChart.setOption(
(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [this.state.rootNode1],
top: '1%',
left: '15%',
bottom: '1%',
right: '7%',
symbolSize: 10,
orient: this.state.trackType === 'review'?'LR':'RL',
label: {
position: this.state.trackType === 'review'?'left':'right',
verticalAlign: 'middle',
align: this.state.trackType === 'review'?'right':'left',
},
leaves: {
label: {
position: this.state.trackType === 'review'?'right':'left',
verticalAlign: 'middle',
align: this.state.trackType === 'review'?'left':'right'
}
},
emphasis: {
focus: 'descendant'
},
// layout: 'radial',
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
})
);
option && myChart.setOption(option);
Lo anterior es la lógica de implementación central para realizar la visualización de Echarts de la afiliación de referencia de fórmula en el informe. Debido al gran proyecto, si necesita obtener el código fuente, puede obtenerlo por mensaje privado.
Lectura extendida
React + Springboot + Quartz, automatiza informes de Excel desde 0