157 lines
5.4 KiB
JavaScript
157 lines
5.4 KiB
JavaScript
|
||
export default function jgOption(data1) {
|
||
console.log("123", data1);
|
||
const one = `${process.env.PUBLIC_URL}/assets/images/one.png`;
|
||
const two = `${process.env.PUBLIC_URL}/assets/images/two.png`;
|
||
const three = `${process.env.PUBLIC_URL}/assets/images/three.png`;
|
||
const four = `${process.env.PUBLIC_URL}/assets/images/four.png`;
|
||
return {
|
||
series: [{
|
||
type: 'tree',
|
||
name: 'tree1',
|
||
data: data1,
|
||
top: '10%',
|
||
left: '10%',
|
||
bottom: '20%',
|
||
right: '30%',
|
||
avoidLabelOverlap: true,//防止标签重叠
|
||
roam: true, //移动+缩放 'scale' 或 'zoom'：只能够缩放。 'move' 或 'pan'：只能够平移。
|
||
scaleLimit:{ //缩放比例
|
||
min:0.7,//最小的缩放值
|
||
max:4,//最大的缩放值
|
||
},
|
||
layout: 'orthogonal',//树图布局，orthogonal水平垂直方向，radial径向布局 是指以根节点为圆心，每一层节点为环，一层层向外
|
||
orient: 'LR', //树形方向 TB为上下结构 LR为左右结构
|
||
// nodePadding: 100,//结点间距 （发现没用）
|
||
//layerPadding: 30,//连接线长度 （发现没用）
|
||
symbol: 'circle', //图形形状 rect方形 roundRect圆角 emptyCircle圆形 circle实心圆
|
||
symbolSize: 14, //状态大小
|
||
edgeShape: 'polyline', //线条类型 curve曲线
|
||
initialTreeDepth: 3, //初始展开的层级
|
||
expandAndCollapse: true,//子树折叠和展开的交互，默认打开
|
||
lineStyle: {//结构线条样式
|
||
width: 1,
|
||
color: '#1E9FFF',
|
||
type: 'solid'
|
||
},
|
||
label: {
|
||
// 每个节点对应的文本标签样式
|
||
show: true, // 是否显示标签
|
||
// rotate:90,
|
||
distance: 1, // 文本距离图形元素的距离
|
||
position: ['50%', '50%'], // 标签位置
|
||
verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
|
||
align: 'center', // 文字水平对齐方式，默认自动，left，right，center
|
||
fontSize: 16, // 字体大小
|
||
color: '#000', // 字体颜色
|
||
overflow: 'breakAll',
|
||
formatter: (params) => {
|
||
// let newName = ''
|
||
// let len = params.data.title.length
|
||
// let strLen = (params.data.parentId === 0 || params.data.parentId === 100 ) ? 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.title.substring(start, len)
|
||
// } else {
|
||
// tempStr = params.data.title.substring(start, end) + '\n'
|
||
// }
|
||
// newName += tempStr
|
||
// }
|
||
// } else {
|
||
// newName = params.data.title
|
||
// }
|
||
// let n = newName
|
||
// if (n.length > 16) {
|
||
// n = n.slice(0, 16) + '...'
|
||
// }
|
||
let n = params.data.title;
|
||
let parentId = params.data.parentId
|
||
let userId = params.data.userId;
|
||
let str = parentId === 0 ? `{parent|${n}}` :
|
||
parentId === 100 ? `{parent1|${n}}` : userId != undefined ? `{parent3|${n}}` : `{parent2|${n}}`
|
||
// let str = parentId === 0 ? `<div class='org-parent'>${n}</div>` :
|
||
// parentId === 100 ? `<div class='org-parent1'>${n}</div>` : userId != undefined ? `<div class='org-parent3'>${n}</div>` : `<div class='org-parent2'>${n}</div>`
|
||
return str;
|
||
},
|
||
|
||
rich: {
|
||
parent: {
|
||
color: '#000',
|
||
padding: [15, 15],
|
||
backgroundColor: {
|
||
image: one
|
||
},
|
||
fontSize: 20
|
||
},
|
||
parent1: {
|
||
color: '#000',
|
||
padding: [10, 10],
|
||
backgroundColor: {
|
||
image: two
|
||
},
|
||
fontSize: 18
|
||
},
|
||
parent2: {
|
||
fontSize: 18,
|
||
color: '#000',
|
||
align: 'center',
|
||
padding: [10, 10],
|
||
backgroundColor: {
|
||
image: three,
|
||
repeat: "norepeat",
|
||
},
|
||
},
|
||
parent3: {
|
||
width:200,
|
||
color: '#000',
|
||
padding: [10, 10],
|
||
overflow:'break',
|
||
backgroundColor: {
|
||
image: four,
|
||
},
|
||
align: 'center',
|
||
fontSize: 18,
|
||
},
|
||
}
|
||
},
|
||
|
||
|
||
leaves: { //叶子节点文本样式
|
||
label: {
|
||
// backgroundColor: '#81c5f7',
|
||
backgroundColor: '#fff',
|
||
color:'#333',
|
||
position: 'bottom',
|
||
rotate: 0,//标签旋转。
|
||
verticalAlign: 'middle',
|
||
align: 'center',
|
||
position: ['50%', '50%'], // 标签位置
|
||
//文本框内文字超过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,
|
||
}]
|
||
};
|
||
}
|
||
|