129 lines
4.2 KiB
JavaScript
129 lines
4.2 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',
|
||
id: 0,
|
||
name: 'tree1',
|
||
data: data1,
|
||
top: '10%',
|
||
left: '0%',
|
||
bottom: '20%',
|
||
right: '25%',
|
||
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: 3, //初始展开的层级
|
||
expandAndCollapse: true,//子树折叠和展开的交互，默认打开
|
||
lineStyle: {//结构线条样式
|
||
width: 1,
|
||
color: '#1E9FFF',
|
||
type: 'solid'
|
||
},
|
||
label: {
|
||
// 每个节点对应的文本标签样式
|
||
show: true, // 是否显示标签
|
||
// rotate:90,
|
||
distance: 8, // 文本距离图形元素的距离
|
||
position: ['50%', '50%'], // 标签位置
|
||
verticalAlign: 'middle', // 文字垂直对齐方式，默认自动，top，middle，bottom
|
||
align: 'center', // 文字水平对齐方式，默认自动，left，right，center
|
||
fontSize: 16, // 字体大小
|
||
color: '#000', // 字体颜色
|
||
overflow: 'breakAll',
|
||
formatter: (params) => {
|
||
let len = params.data.title
|
||
let str = `{parent3|${len}}`
|
||
return str;
|
||
},
|
||
|
||
rich: {
|
||
parent: {
|
||
color: '#000',
|
||
padding: [20, 20],
|
||
backgroundColor: {
|
||
image: one
|
||
},
|
||
height: 40,
|
||
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: "no-repeat",
|
||
},
|
||
},
|
||
parent3: {
|
||
color: '#000',
|
||
padding: [10, 10],
|
||
width:10,
|
||
overflow:'break',
|
||
backgroundColor: {
|
||
image: four,
|
||
repeat: "no-repeat",
|
||
},
|
||
fontSize: 18
|
||
},
|
||
}
|
||
},
|
||
|
||
|
||
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
|
||
}]
|
||
};
|
||
}
|
||
|