![cover](https://img-blog.csdnimg.cn/6aea6164880a4f5f8aa3cc0d5d8e6caf.png)
echarts树形结构实现组织架构图
好久没写笔记了,今天总结下前几天遇到类似组织架构图的功能,当看到原型图的时候,第一时间查看了下echarts文档,发现有类似的,拿过来就直接改成自己的。对echarts的一些配置还算熟悉点,由于之前用echarts写过柱形图、折线图、饼状图等。接下来我们看下效果图其实就是组织架构图,大家写之前最好好好看一遍文档,文档中对于每个属性都有讲解。好了,我们一步步来看下代码,代码我习惯写注释了,大家可以看
好久没写笔记了,今天总结下前几天遇到类似组织架构图的功能,当看到原型图的时候,第一时间查看了下echarts文档,发现有类似的,拿过来就直接改成自己的。对echarts的一些配置还算熟悉点,由于之前用echarts写过柱形图、折线图、饼状图等。接下来我们看下效果图
其实就是组织架构图,大家写之前最好好好看一遍文档,文档中对于每个属性都有讲解。好了,我们一步步来看下代码,代码我习惯写注释了,大家可以看下。
树形结构布局
树形布局 分为 orthogonal水平垂直方向 和 radial径向布局 ,水平垂直大家都知道,对于radial径向布局大家可能不是很清楚, radial径向布局 是指以根节点为圆心,每一层节点为环,一层层向外。
layout: ‘orthogonal’, //树图布局,orthogonal水平垂直方向,radial径向布局 是指以根节点为圆心,每一层节点为环,一层层向外
树形方向
树形方向 分为 从左到右,从右到左, 从上到下,从下到上。 取值分别为 ‘LR’ , ‘RL’, ‘TB’, ‘BT’。注意的是只有在 layout = ‘orthogonal’ 的时候 orient才生效
orient: ‘TB’, //树形方向
节点样式
节点类型分为多种类型,这里我就那几个常用的来看下: rect方形、roundRect圆角、emptyCircle圆形 、 circle实心圆
symbol: ‘circle’, //图形形状
symbolSize: 14, //状态大小
线条样式
结构中的线条类型 分为 polyline实线 和 curve曲线
edgeShape: ‘polyline’, //线条类型 curve曲线
lineStyle: {//结构线条样式
width: 0.7,
color: ‘#1E9FFF’,
type: ‘broken’
},
放大+移动
树形结构中一般都不默认不开启放大或移动的, ‘scale’ 或 ‘zoom’:只能够缩放、 ‘move’ 或 ‘pan’:只能够平移、 当为true时都开启。scaleLimit是缩放比例,设置最大和最小缩放值。
roam: true, //移动+缩放
scaleLimit:{ //缩放比例
min:0.7,//最小的缩放值
max:4,//最大的缩放值
},
默认展示
由于节点过多,默认全打开后显示效果不是很好,echarts树形提供了 initialTreeDepth 默认展示那些层级。
initialTreeDepth: 1, //初始展开的层级
expandAndCollapse: true,//子树折叠和展开的交互,默认打开
以上这几条自己感觉在开发中需要注意,如果大家想看更详细的,就看下echarts官方提供的API文档。 接下来我们看下具体的全部代码:
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
const data = {
name: '销售部',
children: [{
name: '销售一部',
children: [{
name: '任务名称1',
itemStyle: { color: "#ff9800" },
},
{
name: '任务名称2',
itemStyle: { color: "#4d8dd9" },
},
{
name: '任务名称3',
itemStyle: { color: "#22b07b" },
},
{
name: '任务名称4'
},
{
name: '任务名称5'
},
{
name: '任务名称6'
},
{
name: '任务名称7'
},
{
name: '任务名称8'
}
]
},
{
name: '销售二部',
},
{
name: '销售三部',
children: [{
name: '任务3-1'
},
{
name: '任务3-2'
}
]
},
{
name: '销售四部',
children: [{
name: '任务4-1'
},
{
name: '任务4-2'
}
]
}
]
};
option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [{
type: 'tree',
id: 0,
name: 'tree1',
data: [data],
top: '10%',
left: '10%',
bottom: '20%',
right: '10%',
avoidLabelOverlap: true,//防止标签重叠
roam: true, //移动+缩放 'scale' 或 'zoom':只能够缩放。 'move' 或 'pan':只能够平移。
scaleLimit:{ //缩放比例
min:0.7,//最小的缩放值
max:4,//最大的缩放值
},
layout: 'orthogonal',//树图布局,orthogonal水平垂直方向,radial径向布局 是指以根节点为圆心,每一层节点为环,一层层向外
orient: 'TB', //树形方向 TB为上下结构 LR为左右结构
// nodePadding: 100,//结点间距 (发现没用)
//layerPadding: 30,//连接线长度 (发现没用)
symbol: 'circle', //图形形状 rect方形 roundRect圆角 emptyCircle圆形 circle实心圆
symbolSize: 14, //状态大小
edgeShape: 'polyline', //线条类型 curve曲线
initialTreeDepth: 1, //初始展开的层级
expandAndCollapse: true,//子树折叠和展开的交互,默认打开
lineStyle: {//结构线条样式
width: 0.7,
color: '#1E9FFF',
type: 'broken'
},
label: {//节点文本样式
normal: {
backgroundColor: '#81c5f7',
position: 'bottom',
verticalAlign: 'middle', //文字垂直对齐方式
align: 'center',
borderColor: '#1E9FFF',
color:'#fff',
borderWidth: 1,
borderRadius: 5,
padding: 5,
height: 40,
width:100,
offset: [0,30],//节点文字与圆圈之间的距离
fontSize: 15 ,
// 节点文本阴影
shadowBlur: 10,
shadowColor: 'rgba(0,0,0,0.25)',
shadowOffsetX: 0,
shadowOffsetY: 2,
}
},
leaves: { //叶子节点文本样式
label: {
//backgroundColor: '#81c5f7',
backgroundColor: '#fff',
color:'#333',
position: 'bottom',
rotate: 0,//标签旋转。
verticalAlign: 'middle',
align: 'center',
//文本框内文字超过6个字折行
/* formatter: function(val) {
let strs = val.name.split(''); //字符串数组
let str = ''
for(let i = 0, s; s = strs[i++];) { //遍历字符串数组
str += s;
if(!(i % 6)) str += '\n'; //按需要求余,目前是一个字换一行
}
return str
}, */
//或者
overflow:'break',//break为文字折行, truncate为文字超出部分省略号显示
lineOverflow:'truncate',//文字超出高度后 直接截取
}
},
expandAndCollapse: true, //默认展开树形结构
animationDuration: 550,
animationDurationUpdate: 750
}]
};
window.onresize = function() {
myChart.resize();
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
//节点切换显示
myChart.on('mousedown', (e) => {
const name = e.data.name;
const curNode = myChart._chartsViews[0]._data.tree._nodes.find(item => {
return item.name === name;
});
const depth = curNode.depth;
const curIsExpand = curNode.isExpand;
myChart._chartsViews[0]._data.tree._nodes.forEach((item, index) => {
if (item.depth === depth && item.name !== name && !curIsExpand) {
item.isExpand = false;
}
});
})
}
以上就是实现echarts树形结构的代码,如有不足,欢迎大家给予点评。
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)