211 lines
6.0 KiB
JavaScript
211 lines
6.0 KiB
JavaScript
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
|
||
}]
|
||
};
|
||
}
|
||
|