const getBackground = () => { return { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: '#ffffff' // 0% 处的颜色 }, { offset: 0.5, color: 'blue' // 100% 处的颜色 }, { offset: 1, color: '#ffffff' // 100% 处的颜色 }], global: false // 缺省为 false } } 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' } ] } ] } export default function jgOption() { return { 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: { // 每个节点对应的文本标签样式 show: true, // 是否显示标签 distance: 8, // 文本距离图形元素的距离 position: ['50%', '50%'], // 标签位置 verticalAlign: 'middle', // 文字垂直对齐方式,默认自动,top,middle,bottom align: 'center', // 文字水平对齐方式,默认自动,left,right,center fontSize: 16, // 字体大小 color: '#333', // 字体颜色 // color: 'red', // 字体颜色 backgroundColor: '#F8F9FA', // 文字块的背景颜色 borderColor: '#CED4DA', // 文字块边框颜色 borderWidth: 1, // 文字块边框宽度 borderType: 'solid', // 文字块边框描边类型 solid dashed dotted borderRadius: 2, // 文字块的圆角 padding: [6, 6], // 文字块内边距 shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色 shadowBlur: 6, // 文字块的背景阴影长度 formatter: (params) => { let newName = '' let len = params.data.name.length let strLen = params.data.relationType === 0 ? 100 : 1 //一行显示几个字 let rowNum = Math.ceil(len / strLen) if (len > strLen) { for (let p = 0; p < rowNum; p++) { let tempStr = '' let start = p * strLen let end = start + strLen if (p == rowNum - 1) { tempStr = params.data.name.substring(start, len) } else { tempStr = params.data.name.substring(start, end) + '\n' } newName += tempStr } } else { newName = params.data.name } let n = newName if (n.length > 16) { n = n.slice(0, 16) + '...' } let str = `{name|${n}}` let isMain = params.data.relationType === 0 str = isMain ? `{name|${n}} {current|本企业} {main|总部}` : str return str }, rich: { name: { fontSize: 14 }, current: { fontSize: 12, padding: 0, color: '#07CA42', fontWeight: 600, backgroundColor: '#E5F7EA', borderRadius: 2 }, main: { color: '#0780ED', fontSize: 12, padding: 0, fontWeight: 600, backgroundColor: '#E6F2FD', borderRadius: 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 }] }; }