一、需求背景在产品成立之初，产品的需求是对各种指标进行公式计算，组合成一个新的复合指标，供后续使用.当时产品有两种形式：一种是让用户直接输入，不做任何其他操作，但这种方式带来的问题之一是前端需要对公式进行复杂的校验，并且有太多无法控制的问题，另一个是操作指导非常薄弱，用户在使用时没有任何限制，不太了解如何操作；另一种方式是让用户通过拖拽的方式添加运算符，组成自己需要的公式，更直观，视觉效果更好，所以最终的产品交互选择了这种方式。2、模型选择考虑了复合指标高级模式功能点的分解：拖放指标、添加算子、为指标设置过滤条件、设置过滤条件、更新数据；添加节点后，重新计算位置并更新渲染。关于拖拽生成节点并有序排列，为当前节点添加前后节点使其排列整齐，技术范围确定为G6、X6以上。但是，至于选择G6还是X6，要考虑以下五个方面：1、根据上面的需求分解，可以看出我们的需求偏向于数据编辑，官方对G6和X6的建议是G6偏向于图形可视化和分析，X6偏向于图形编辑和数据编辑2.自定义能力的大小。因为指标管理中的节点不仅仅是一个节点，可能是一个指标，一个运算符，一个输入框，各种形式，指标类型的节点需要展示更多的信息，包括图片，颜色，文字等信息.如果用X6，直接用html写就可以了，但是如果用G6，就需要熟悉canvas了。新版G6可以支持jsx语法自定义节点，但是支持的还不如。3.数据的大小。如果节点多，图规模大，想交互流畅，当然canvas的G6更合适，但如果数据量比较小，两者都可以。4、是否需要统计图节点：G6支持在节点中嵌入G2统计图，但目前要求不嵌入图节点5、是否需要支持移动端/小程序：在移动端，G6可以支持显示和简单的交互，并在不断改进的过程中。而且移动端和小程序对性能的要求更高，所以如果要支持移动端或者小程序，G6会是首选。添加、编辑、删除模块，分为普通模式和高级模式，区别在于：普通模式只能配置单个公式，如(A+B)*0.3；而高级模式可以配置多个公式，比如当A>=0时，(A+B)0.3；当A<0时，(A+C-B)0.4；而本文主要介绍高级模式的相关内容，其操作主要分为以下几个方面：1、新建图3-1参考图3-1，可以点击“添加公式”添加单个公式包含条件和公式；将左侧指标目录中的指标拖动到右侧相应区域，即可将指标添加到条件或公式中。2、编辑图3-2图3-3图3-4图3-5如图3-2所示，我们可以点击选中相应的指标，对选中指标的结果进行筛选；如图3-3所示，我们可以点击条件右上角的“设置”按钮，对当前条件的结果进行筛选；我们可以点击条件或公式后面的图标来编辑条件名称和公式名称；如图3-5所示，点击维度设置，可以设置当前添加到画布的所有指标的公共维度，同时选中某个指标，可以过滤当前选中指标的维度值。3、删除图3-6图3-7如图3-5所示，选中一个指标后，点击窗口右上角的“删除”按钮，即可将选中的指标从当前公式中删除，并最终得到结果如图3-6；也可以点击公式右侧的删除图标删除整个当前公式（包括条件和公式）。4.查看查看指的是从指标列表中某个复合指标右侧的“编辑”操作进入编辑页面，可以看到上次保存的配置公式信息，选择不同的指标，点击不同条件的设置，它会回显你上次保存的结果过滤信息。4.X6的具体使用，初学者快速上手点此：快速入门|X6两种模式的区别在于数据处理的区别。核心使用步骤如下：1.确定高级模式下的数据结构。只配置了一个公式，也可以通过点击添加公式按钮添加多个公式，最多添加5个公式。对于X6来说，对HTML的支持和自定义能力都很好，所以对于指标管理中自定义效果比较高的节点，我们可以根据视觉效果constindexInfo确定整体数据结构为//Indicatorbasicinformation={name:'',code:'',status:'',...}//高级模式数据结构constadvancedFormula=[...{condition:{name:'Condition1',conditionSet:{},formulaList:[{type:'index',//index--indexnodeoperator--operatornodevalue:'',//当type为operator且value有值时，则为数字输入框类型。..indexInfo}]},formula:{name:'Formula1',formulaList:[{type:'index',//index--索引节点operator--operator节点value:'',//当type为operator时,当value有值时,有数值输入框类型...indexInfo}]}}]2.从数据结构到视图的渲染过程这个过程主要是调用X6中提供的graph.addNode方法将节点添加到画布的API。但首先，需要遍历数据结构，将其作为具有层次信息的数据进行处理。然后通过遍历数据结构，将层级关系和索引信息同时添加到节点信息中，保证在添加、编辑等操作时能够准确获取。分层信息，可准备添加、插入、编辑节点信息。drawAdvancedNode=(data:any)=>{//绘制高级模式的层级结构，从单公式的父框--->单公式的条件+单公式的公式----->具体操作和索引if(data.length===0){returnfalse;}//遍历数据结构，调用graph.addNode方法将对应的节点添加到画布中：计算每个节点对应的具体x和y坐标};3、更新过程主要是在进行添加、插入、编辑等操作后，原有的数据会发生变化，生成一个新的数据。这时候需要获取新的数据重新渲染，需要清除画布上的内容，然后重新绘制。说到清空画布，会用到clearCells方法，但是高级模式下会有层，所以会发现用这个方法不能有效清空画布，所以最后会得到所有节点首先，然后一个一个地删除。移除后，将当前新数据渲染到画布中，即重复步骤2的操作//清除画布中的所有节点constallNodes=this.state.graph.getCells();allNodes.map((item:any)=>{this.state.graph.removeCell(item.id);});4.提交并遍历所有数据，去除层级信息字段；过滤一些空白字段；将一些额外的字段组织到节点中去数据；检查画布上已有公式的有效性，如果公式不合法则弹出提示。格式化完成后，允许用户将画布中的数据提交给后台。
