👍实现效果
组织结构图.png
🙌代码实现
const data = {
name: '山西省应急管理厅',
children: [
{
name: '火灾防治管理处',
},
{
name: '救援和协调预案处',
},
{
name: '应急指挥处',
}
]
};
option = {
tooltip: {
//提示框组件
trigger: 'item', //触发类型,默认:item(数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用)。可选:'axis':坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。'none':什么都不触发。
triggerOn: 'mousemove', //提示框触发的条件,默认mousemove|click(鼠标点击和移动时触发)。可选mousemove:鼠标移动时,click:鼠标点击时,none:
formatter: '{b0}'
},
series: [
{
type: 'tree',
id: 0,
name: 'tree1',
data: [data],
orient: 'vertical',
top: '10%',
left: '8%',
bottom: '22%',
right: '20%',
symbolSize: 17, //标记的大小, 长方形的宽、高
symbol:'circle', // 长方形,可以通过 'image://url' 设置为图片
edgeShape: 'polyline', // 分别有曲线和折线两种,对应的取值是 curve 和 polyline
edgeForkPosition: '50%', //子树中折线段分叉的位置
initialTreeDepth: 3,
itemStyle: {
//树图中每个节点的样式
color: '#C9C9C9', //节点背景色
borderWidth: 0,
},
lineStyle: {
color: '#C9C9C9',
width: 1,
type: 'solid' // 连线的样式 'curve'|'broken'|'solid'|'dotted'|'dashed'
},
label: {
//每个节点所对应的标签的样式
backgroundColor:'#1B5BAE',
borderRadius: 20,
color:'#fff',
position: 'top', //标签的位置
verticalAlign: 'bottom', //文字垂直对齐方式,默认自动。可选:top,middle,bottom
align: 'center', //文字水平对齐方式,默认自动。可选:top,center,bottom
lineHeight:40,
width: 180,
height: 40,
overflow: 'truncate' //'truncate' 截断,并在末尾显示ellipsis配置的文本,默认为...
},
leaves: {
//叶子节点的特殊配置,如图叶子节点和非叶子节点的标签位置不同
label: {
backgroundColor:'#4C8AFF',
position: 'bottom',
verticalAlign: 'top',
align: 'center'
}
},
emphasis: {// 树图中个图形和标签高亮的样式
focus: 'none'//在高亮图形时,是否淡出其它数据的图形已达到聚焦的效果
},
expandAndCollapse: true, //子树折叠和展开的交互,默认打开
animationDuration: 550, //初始动画的时长,支持回调函数,默认1000
animationDurationUpdate: 750 //数据更新动画的时长,默认300
}
]
};