树图是一种流行的利用包含关系表达层次化数据的可视化方法。树图能将事物或现象分解成树枝状,又称树型图或系统图。树图就是把要实现的目的与需要采取的措施或手段,系统地展开,并绘制成图,以明确问题的重点,寻找最佳手段或措施。
在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