tsg-web/src/views/sz/zzjgck/jgoption.js

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
		}]
	};
}