亿信ABI中引入echarts中的树图

树图是一种流行的利用包含关系表达层次化数据的可视化方法。树图能将事物或现象分解成树枝状，又称树型图或系统图。树图就是把要实现的目的与需要采取的措施或手段，系统地展开，并绘制成图，以明确问题的重点，寻找最佳手段或措施。
在abi中使用树图可以采用自定义echarts图形的方法生成树图。
首先需要准备需要的数据：
（1）多级维表（全国-省-市-县）。特点：第一级只有一个节点
（2）数据表，即主题表
将维表和主题表关联

	树图所需数据格式如下：
	[
    "children":
    	 [
    	 		[
    				"children": [],
    				"name": "value1"
    			],
    			[
    				"children": [],
    				"name": "value2"
    			]
    	],
    "name": "value3"
    ]

步骤1：生成echarts图形所需数据
新建分析区表格，首先新建第3层，生成末级节点的表达式如下：

末级节点的子节点为空，所以使用[]，只填充name值即可，故表达式如下：

"{'children': [],'name': '"^self.leftcell.txt^"'}"

其中，self.leftcell.txt表示获取当前表元左边表元的文本值，^表示字符串拼接，该表达式计算结果是：{‘children’: [],‘name’: ‘福州市’}

然后将E1表元XXB.USERID设置为浮动维表元，选择下钻级次为第3级（市）

步骤2：同级节点合并

F1$.join(",")

其中，F1为表达式末级节点表达式所在表元，F1$为浮动表元组成的一个数组，join(",")是数组的一个方法，用于把数组中的所有元素放入一个字符串

结果如下：

{‘children’: [],‘name’: ‘福州市’},{‘children’: [],‘name’: ‘厦门市’}

步骤3：生成上级父节点
非叶子节点有子节点，故表达式如下：

"{'children': ["^F2.txt^"],'name': '"^self.leftcell.txt^"'}"

其中：F2为子节点合并之后的值所在表元
然后将C1表元XXB.USERID设置为浮动维表元，选择下钻级次为第2级（省）
步骤4：合并同级节点

D1$.join(",")

依次类推，制作如下分析区表格：

计算结果：

步骤5：添加echarts统计图
将自定义echart组件拖拽到编辑界面中，双击组件打开编辑界面。

双击组件打开编辑界面，在界面中添加如下代码：
其中<#=grid2.B4.txt#>中的<#= #>是宏表达式，该表达式是获取分析区表格中表元的值，<#=grid2.B4.txt#>表示获取代号为Grid2的分析区表格中B4表元的文本值。

var data=<#=grid2.B4.txt#>;  
var option={
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',

                data: [data],

                top: '1%',
                left: '7%',
                bottom: '1%',
                right: '20%',

                symbolSize: 7,

                label: {
                    normal: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 9
                    }
                },

                leaves: {
                    label: {
                        normal: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    };
return option;  //一定要返回新格式

最终效果：

如果需要生成四级结构树，需要在代码片段中添加：

      leaves: {
                    label: {
                        normal: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    }
                },
				initialTreeDepth: 4,   //echarts默认是3级结构，如果需要开启四级结构，添加改行代码即可，当然数据也是要提前准备好
                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    };

https://gallery.echartsjs.com/editor.html?c=xB1Z4FIG-G