找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › SpreadJS & GcExcel专区 › 教程集锦 › 查看内容
发新帖

爱迪生

超级版主

55

主题

65

帖子

1394

积分

超级版主

Rank: 8Rank: 8

积分
1394
最新发帖

用Echarts实现SpreadJS引用从属关系可视化

爱迪生
超级版主   /  发表于：2022-3-2 12:02  /   查看：2576  /  回复：2
本帖最后由 爱迪生 于 2022-3-2 13:52 编辑

在金融行业，我们经常会有审计审查的需求，对某个计算结果进行审查，但是这个计算结果可能依赖多个单元格，而且会有会有多级依赖的情况，如果让我们的从业人员靠眼睛找，工作量巨大，而且准确性存疑，基本上死路一条，因此让整个审查过程可视化，迫在眉睫，本章我们利用SpreadJS和Echarts将审计审查过程可视化
一.首先我们先了解一下SpreadJS或Excel中引用和从属关系：
   1.在单元格B1中设置公式 =SUM(A1)。 单元格A1是单元格B1的引用单元格（引用关系）
   2.在单元格B1中设置公式 =SUM(A1)。 单元格B1是单元格A1的从属单元格（从属关系）
二.接下来我们看一下最终实现效果：
   1.引用关系
    2022-03-02 11.14.12.gif
   2.从属关系
2022-03-02 11.33.44.gif
三.本次我们用的是Echarts的树图将引用和从属关系可视化，关于Echarts上手，大家去Echarts官网有完整上手教程，Echarts社区有很多开发者做的许多有趣又实用的demo，这里我们用的是树图
image.png477385863.png
我们看一下它的data的数据结构：
image.png802108764.png
四.接下来我们要用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, "");

  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.             }



  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.         );

  41.         option && myChart.setOption(option);
复制代码
以上就是实现报表中公式引用从属关系Echarts可视化的核心实现逻辑，由于工程较大，如需获取源码，可找我获取


2 个回复

倒序浏览
FzcSuiY
注册会员   /  发表于：2022-12-16 09:30:25
沙发
你好  源码怎么获取
回复 使用道具 举报
爱迪生
超级版主   /  发表于：2022-12-16 09:36:10
板凳
FzcSuiY 发表于 2022-12-16 09:30
你好  源码怎么获取

你好，私信我一下你的微信，我让商务同事发你
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部