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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。