亿信ABI中引入echarts中的树图

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

步骤1:生成echarts图形所需数据
新建分析区表格,首先新建第3层,生成末级节点的表达式如下:
亿信ABI中引入echarts中的树图_第1张图片
末级节点的子节点为空,所以使用[],只填充name值即可,故表达式如下:

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

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

然后将E1表元XXB.USERID设置为浮动维表元,选择下钻级次为第3级(市)
亿信ABI中引入echarts中的树图_第2张图片
步骤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(",")

依次类推,制作如下分析区表格:
在这里插入图片描述
计算结果:
亿信ABI中引入echarts中的树图_第3张图片
步骤5:添加echarts统计图
将自定义echart组件拖拽到编辑界面中,双击组件打开编辑界面。
亿信ABI中引入echarts中的树图_第4张图片
双击组件打开编辑界面,在界面中添加如下代码:
其中<#=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;  //一定要返回新格式

最终效果:
亿信ABI中引入echarts中的树图_第5张图片
如果需要生成四级结构树,需要在代码片段中添加:

      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

你可能感兴趣的:(ABI,数据分析,BI,Echarts,亿信,树图)