好久没写笔记了，今天总结下前几天遇到类似组织架构图的功能，当看到原型图的时候，第一时间查看了下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树形结构的代码，如有不足，欢迎大家给予点评。
