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

news2024/11/20 1:51:27

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

一.首先我们先了解一下前端表格或Excel中引用和从属关系:
1.在单元格B1中设置公式 =SUM(A1)。 单元格A1是单元格B1的引用单元格(引用关系)
2.在单元格B1中设置公式 =SUM(A1)。 单元格B1是单元格A1的从属单元格(从属关系)

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

1.引用关系

2.从属关系

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

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

// 递归构建追踪树
    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;
    }

五.将构造好的引用和从属树rootNode在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);

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

拓展阅读

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/110644.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

图书管理系统【Servlet+HTML综合应用】

✅作者简介&#xff1a;热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏&#xff1a;Java案例分…

分享从零开始学习网络设备配置--任务2.7 提高网络稳定性(VRRP)

任务描述 某公司在北京的总部网络承担了连接全国各地分公司网络的任务。总部网络中心采用多台万兆交换机&#xff0c;内部网络按照业务规划有2个部门VLAN。为了增强总部核心网络的稳定性&#xff0c;要求在三层网络设备上配置VRRP备份组&#xff0c;实现网关冗余&#xff0c;为…

BYOL论文精读

文章目录概要背景方法1. 概述2. 参数更新3.目标z_ξ的构建和q_θ的预测结果结论个人看法概要 本篇博客介绍了Bootstrap Your Own Latent (BYOL)方法&#xff0c;这是DeepMind和Imperial London提出的一种自监督学习方法。 BYOL 包含两个架构相同但参数不同的网络。BYOL 不需要…

SpringBoot 项目打成 .exe 程序

准备 准备工作&#xff1a; 1.一个jar包&#xff0c;没有bug能正常启动的jar包 2.exe4j&#xff0c;一个将jar转换成exe的工具 3.inno setup&#xff0c;一个将依赖和exe一起打成一个安装程序的工具 开始 以我为例子&#xff0c;我将jar包放在了桌面 打开安装好的exe4j 直…

面渣逆袭:Java并发六十问,快来看看你会多少道

这篇文章有点长&#xff0c;四万字&#xff0c;图文详解六十道Java并发面试题。人已经肝麻了&#xff0c;大家可以点赞、收藏慢慢看&#xff01;扶我起来&#xff0c;我还能肝&#xff01; 基础 1.并行跟并发有什么区别&#xff1f; 从操作系统的角度来看&#xff0c;线程是…

现在有哪些好用的企业报表软件?

简单来讲&#xff0c;企业报表就是“用表格、图表等格式来动态显示数据”&#xff0c;各行各业、每年每月&#xff0c;都需要通过报表来展示组织和人员在经营管理上的真实情况。当前大家常用的实现企业报表的方式包含代码开发、用 Excel 制作离线报表、开源产品、利用业务系统&…

基于遗传编程的符号回归

0 前言 作为一种监督学习方法&#xff0c;符号回归&#xff08;symbolic regression&#xff09;试图发现某种隐藏的数学公式&#xff0c;以此利用特征变量预测目标变量。 符号回归的具体实现方式是遗传算法&#xff08;genetic algorithm&#xff09;。一开始&#xff0c;一…

数字三角形问题

数字三角形问题一、题目描述二、题目分析1、问题分析2、思路分析&#xff08;1&#xff09;状态转移方程状态表示状态转移&#xff08;2&#xff09;循环的设计三、代码实现一、题目描述 二、题目分析 1、问题分析 这道题给我们的第一眼感觉就是情况太多了&#xff0c;太复杂…

虚拟化环境下,如何高效开展勒索病毒防护加固?

本文重点 近些年&#xff0c;勒索病毒攻击事件频发&#xff0c;由于其“难发现、难阻止、难破解”的特点&#xff0c;不少用户——尤其是使用虚拟化的金融、医疗、制造、公共服务等重要行业用户——已遭受严重数据与经济损失。勒索攻击的防控是一项系统性工程&#xff0c;除了…

2-2-3-9-1-1、jdk1.7HashMap详解

目录数据结构链表的作用链表问题数据结构简图源码解析重要成员变量说明构造函数put操作初始化数组Key为null的处理计算hash添加链表节点--新增Entry扩容缺点扩容死锁分析单线程扩容多线程扩容数据结构 jdk1.7的hashmap的底层结构是数组加单向链表实现的。将key的hash值进行取模…

深度学习环境搭建

深度学习环境搭建0.引言1.Jupyter Notebook1.1.ANACONDA安装1.2.基于conda安装Jupyter Notebook1.3.Jupyter Notebook使用2.Pycharm2.1.安装Pycharm2.2.Pycharm设置0.引言 一步步采坑更新。 1.Jupyter Notebook 官方文档 安装参考 通过安装Anaconda来解决Jupyter Notebook…

300行HTML+CSS+JS代码实现动态圣诞树

文章目录1. 前言2. 效果展示3. 准备&#x1f351; 下载编译器&#x1f351; 下载插件4. 源码&#x1f351; HTML&#x1f351; JS&#x1f351; CSS5. 结语1. 前言 一年一度的圣诞节和考研即将来临&#xff0c;那么这篇文章将用到前端三大剑客 HTML CSS JS 来实现动态圣诞树…

Java面试题(六)多线程经典编程题

经典的多线程编程题猜数字游戏键盘输入练习3个线程轮流打印ABC多窗口买票猜数字游戏 题目说明&#xff1a;有2个线程&#xff0c;第一个线程A随机一个100内的数&#xff0c;第2个线程B来猜&#xff0c;B每次猜一个数后A会判断&#xff0c;如果猜对了程序结束&#xff0c;如果猜…

工具在接口测试中发挥什么样的作用?

接口测试究竟是什么&#xff1f;为什么要用接口测试&#xff1f;它有哪些工具呢&#xff1f;这一连串的问题敲击着我们&#xff0c;请带着这些问题&#xff0c;在本文中寻找答案&#xff0c;我将为您打开接口测试的大门。 1 初探接口测试 接口测试是什么。它检查数据的交换&…

从《我要投资》,看藏在“对立面”里的创业正解

文|智能相对论 作者|青月 六位07届的快乐男声选手在象山体验养鹅&#xff0c;意外出圈&#xff1b;随后播出的09届超女的怀旧综艺却热度一般&#xff0c;可见只有单纯的情怀消费并不能保证节目的口碑&#xff0c;只有建立在准确的节目定位与恰当的价值输出基础上&#xff0c;…

面试必备:从常见的存储引擎到混淆的锁分类,请上车

今天我们来总结一下MyISAM和InnoDB引擎下锁的种类及使用方法。 MySQL的四大常见存储引擎 谈到MyISAM和InnoDB了我们先来了解一下什么是存储引擎吧。MySQL中的数据用各种不同的技术存储在文件&#xff08;或者内存&#xff09;中&#xff0c;这些技术中的每一种技术都使用不同…

m基于贝叶斯理论的超分辨率重构算法matlab仿真,对比Tikhonov重构算法

目录 1.算法描述 2.仿真效果预览 3.MATLAB核心程序 4.完整MATLAB 1.算法描述 超分辨率(Super-Resolution)通过硬件或软件的方法提高原有图像的分辨率&#xff0c;通过一系列低分辨率的图像来得到一幅高分辨率的图像过程就是超分辨率重建。超分辨率成像&#xff08;SR-imagi…

一个内核oops问题的分析及解决

最近在调试设备时&#xff0c;遇到了一个偶发的开机死机问题。通过查看输出日志&#xff0c;发现内核报告了oops错误&#xff0c;如下所示&#xff08;中间省略了部分日志&#xff0c;以......代替&#xff09;&#xff1a; Unable to handle kernel NULL pointer dereference…

YOLOV7学习记录之训练过程

在前面学习YOLOV7的过程中&#xff0c;我们已经学习了其网络结构&#xff0c;然而实际上YOLOV7项目的难点并不在于其网络模型而是在于其损失函数的设计&#xff0c;即如何才能训练出来合适的bbox。 神经网络模型都有训练和测试&#xff08;推理&#xff09;过程&#xff0c;在Y…

QT JS交互、调用JS、传值

本文详细的介绍了QT JS交互、调用JS、传值的各种操作&#xff0c;包括QT向JS传递String字符串、包括QT向JS传递Int数字、包括QT向JS传递List数组&#xff0c;同时也接收JS向QT返回的List数组、JS向QT返回的Json、JS向QT返回的数字、JS向QT返回的字符串。 本文作者原创&#xff…