在金融行业,我们经常会有审计审查的需求,对某个计算结果进行审查,但是这个计算结果可能依赖多个单元格,而且会有会有多级依赖的情况,如果让我们的从业人员靠眼睛找,工作量巨大,而且准确性存疑,基本上死路一条,因此让整个审查过程可视化,迫在眉睫,现在我们利用纯前端表格和Echarts将审计审查过程可视化

一.首先我们先了解一下前端表格或Excel中引用和从属关系:

1.在单元格B1中设置公式 =SUM(A1)。 单元格A1是单元格B1的引用单元格(引用关系

2.在单元格B1中设置公式 =SUM(A1)。 单元格B1是单元格A1的从属单元格(从属关系

二.接下来我们看一下最终实现效果:

1.引用关系

2.从属关系

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

四.接下来我们要用纯前端表格控件的获取引用和从属关系的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. let name = rootNode.sheetName + "*" + rootNode.row + "*" + rootNode.col + "*" + Math.random().toString();
  8. let precedentsRootNode = '';
  9. let dependentsRootNode = '';
  10. if (this.state.trackType === "Precedents" || this.state.trackType === "Both") {
  11. this.getNodeChild(rootNode, sheetSource, "Precedents")
  12. debugger;
  13. console.log(rootNode)
  14. if (this.state.trackType === "Both") {
  15. let rootNodeChildren = JSON.parse(JSON.stringify(rootNode.children));
  16. rootNode.children = [];
  17. precedentsRootNode = JSON.parse(JSON.stringify(rootNode));
  18. precedentsRootNode.children.push({
  19. name: "Precedents",
  20. value: "Precedents",
  21. children: rootNodeChildren
  22. })
  23. this.setState({
  24. precedentsRootNode: JSON.parse(JSON.stringify(precedentsRootNode)),
  25. })
  26. }
  27. }
  28. if (this.state.trackType === "Dependents" || this.state.trackType === "Both") {
  29. this.getNodeChild(rootNode, sheetSource, "Dependents")
  30. console.log(rootNode)
  31. if (this.state.trackType === "Both") {
  32. let deepInfo = [1];
  33. let rootNodeChildren = JSON.parse(JSON.stringify(rootNode.children));
  34. rootNode.children = [];
  35. dependentsRootNode = JSON.parse(JSON.stringify(rootNode));
  36. dependentsRootNode.children.push({
  37. name: "Dependents",
  38. value: "Dependents",
  39. children: rootNodeChildren
  40. })
  41. this.setState({
  42. dependentsRootNode: JSON.parse(JSON.stringify(dependentsRootNode)),
  43. })
  44. }
  45. }
  46. if (this.state.trackType === "Both") {
  47. precedentsRootNode.children = precedentsRootNode.children.concat(dependentsRootNode.children);
  48. // let bothRootNode = precedentsRootNode.children[0].children.concat(dependentsRootNode.children[0].children)
  49. this.setState({
  50. rootNode1: JSON.parse(JSON.stringify(precedentsRootNode)),
  51. })
  52. } else {
  53. this.setState({
  54. rootNode1: JSON.parse(JSON.stringify(rootNode)),
  55. })
  56. }
  57. }
  58. creatNode = (row, col, sheet, deep, trackType) => {
  59. let node = {
  60. value: sheet.getValue(row, col),
  61. position: sheet.name() + "!" + GC.Spread.Sheets.CalcEngine.rangeToFormula(new GC.Spread.Sheets.Range(row, col, 1, 1)),
  62. deep: deep,
  63. name: `${sheet.name()}!${GC.Spread.Sheets.CalcEngine.rangeToFormula(new GC.Spread.Sheets.Range(row, col, 1, 1))}\nvalue:${sheet.getValue(row, col)}`,
  64. sheetName: sheet.name(),
  65. row: row,
  66. col: col,
  67. trackType: trackType
  68. };
  69. return node;
  70. }
  71. getNodeChild = (rootNode, sheet, trackType) => {
  72. let childNodeArray = [];
  73. let children = [];
  74. let row = rootNode.row, col = rootNode.col, deep = rootNode.deep;
  75. if (trackType == "Precedents") {
  76. children = sheet.getPrecedents(row, col);
  77. }
  78. else {
  79. children = sheet.getDependents(row, col);
  80. }
  81. // let self = this;
  82. if (children.length >= 1) {
  83. children.forEach((node) => {
  84. let row = node.row,
  85. col = node.col,
  86. rowCount = node.rowCount,
  87. colCount = node.colCount,
  88. _sheet = sheet.parent.getSheetFromName(node.sheetName);
  89. if (rowCount > 1 || colCount > 1) {
  90. for (let r = row; r < row + rowCount; r++) {
  91. for (let c = col; c < col + colCount; c++) {
  92. let newNode = this.creatNode(r, c, _sheet, deep + 1, trackType)
  93. // if (deep < self.maxDeep) {
  94. this.getNodeChild(newNode, _sheet, trackType);
  95. // }
  96. childNodeArray.push(newNode);
  97. }
  98. }
  99. } else {
  100. let newNode = this.creatNode(row, col, _sheet, deep + 1, trackType)
  101. // if (deep < self.maxDeep) {
  102. this.getNodeChild(newNode, _sheet, trackType);
  103. // }
  104. childNodeArray.push(newNode);
  105. }
  106. });
  107. }
  108. rootNode.children = childNodeArray;
  109. }

五.将构造好的引用和从属树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. option && myChart.setOption(option);

以上就是实现报表中公式引用从属关系Echarts可视化的核心实现逻辑,由于工程较大,需要完整内容可以留言。。

拓展阅读

React + Springboot + Quartz,从0实现Excel报表自动化

电子表格也能做购物车?简单三步就能实现

使用纯前端类Excel表格控件SpreadJS构建企业现金流量表

用Echarts实现SpreadJS引用从属关系可视化的更多相关文章

  1. 用Echarts的力向导图可视化数据

    学习背景:做一个图论的题目的时候需要将结果可视化来直观的看效果,所以使用Echarts来画.感觉效果不错. Echarts下载地址:https://echarts.baidu.com/download ...

  2. echarts地图的引用

    最近是跟echarts杠上了 所在公司是搞数据的 所以身为前端的我 就必须使用echarts将数据展示出来 ,进公司一周 ,前前后后大概用了八九种echarts图,我举得最难的就是引用的地图,因为刚开 ...

  3. echarts词云引用

    最近项目中需要使用echarts的词云图,因为几经波折才引用成功,所以想记下来跟大家分享,(我的随笔不会写那么多让人需要动脑子去理解的东西,就是记录一下步骤,因为经验甚少,底层原理懂得不多,所以就先记 ...

  4. echarts 移动端地图数据可视化教程

    如上效果图: 以下未代码: <!doctype html> <html lang="en">   <head> <meta charset ...

  5. echarts 移动端地图数据可视化开发教程

    如上效果图: 以下未代码: <!doctype html> <html lang="en">   <head> <meta charset ...

  6. Echarts数据可视化,easyshu图表集成。

      介绍: ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Sa ...

  7. 项目实战:在线报价采购系统(React +SpreadJS+Echarts)

    小伙伴们对采购系统肯定不陌生,小到出差路费.部门物资采购:大到生产计划.原料成本预估都会涉及到该系统. 管理人员可以通过采购系统减少管理成本,说是管理利器毫不过分,对于采购的效率提升也有极大帮助. 但 ...

  8. 【可视化】DataV接入ECharts图表库 可视化利器强强联手

    DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...

  9. 【教程】高德地图使用ECharts实现数据可视化

    关于百度地图结合ECharts实现数据可视化的资料已经很多了,毕竟是官方提供支持的,这里就不再赘述.今天我们来讲一下让高德地图与ECharts结合来实现数据可视化图表的展示. 一.ECharts 高德 ...

  10. python+echarts+flask实现对全国疫情数据的爬取并可视化展示

    用Python进行数据爬取并存储到数据库,3.15学习总结(Python爬取网站数据并存入数据库) - 天岁 - 博客园 (cnblogs.com) 通过echarts+flask实现数据的可视化展示 ...

随机推荐

  1. bilibili弹幕爬虫

    import random import requests import jieba import numpy as np from lxml import etree class SpiderBil ...

  2. NOIP 2013 提高组 洛谷P1967 货车运输 (Kruskal重构树)

    题目: A 国有 nn 座城市,编号从 11 到 nn,城市之间有 mm 条双向道路.每一条道路对车辆都有重量限制,简称限重. 现在有 qq 辆货车在运输货物, 司机们想知道每辆车在不超过车辆限重的情 ...

  3. 使用HTML表单收集数据

    1.什么是表单 在项目开发过程中,凡是需要用户填写的信息都需要用到表单. #2.form标签 在HTML中我们使用form标签来定义一个表单.而对于form标签来说有两个最重要的属性:action和m ...

  4. 4.MongoDB系列之索引(一)

    1. 执行计划查看 db.getCollection('users').find({'username': 'shenjian'}).explain('executionStats') 结果查看,先大 ...

  5. 通过URL保存文件

    1 <?php 2 3 function dlfile($file_url, $save_to) 4 { 5 $content = file_get_contents($file_url); 6 ...

  6. 45.限流Throttling及源码解析

    什么是限流? 限流类似于权限机制,它也决定是否接受当前请求,用于控制客户端在某段时间内允许向API发出请求的次数,也就是频率 假设有客户端(比如爬虫程序)短时间发起大量请求,超过了服务器能够处理的能力 ...

  7. Pandas常用方法

    数据处理很多需要用到pandas,有两个基本类型:Series表示一维数据,DataFrame表示多维.以下是一些常用方法的整理: pandas.Series 创建 Series pandas.Ser ...

  8. Mybatis笔记02-----MyBatis的核心配置文件以及模糊查询的实现

    认识MyBatis核心配置文件mybatis-config.xml 这个文件名是随意可以起,但为了规范一般都命名为mybatis-config.xml:配置文件与MyBatis的行为和属性信息息息相关 ...

  9. 实现将机器A上的程序包复制到机器B并更新的脚本

    一.前言 之前有写过如何在单台服务器上执行脚本自动更新程序包,但平时测试过程中相信大部分公司都是需要测试人员在服务器A上进行功能测试,测试通过后再将程序包更新到服务器B上进行安全测试或者性能测试:今天 ...

  10. Mysql InnoDB多版本并发控制MVCC

    参考书籍<mysql是怎样运行的> 系列文章目录和关于我 一丶为什么需要事务隔离级别 mysql是一个客户端/服务断软件,对于同一个服务器来说,可以有多个客户端进行连接,每一个客户端进行连 ...