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