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

import { Space } from 'antd';
import one from '../../../assets/img/u0.png'
// const one = `${process.env.PUBLIC_URL}/assets/img/u0.png`;
console.log(one);

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, //状态大小
      symbol: function(value, params) {
        console.log("params", value, params);
        // params.data节点的所有数据
  
           return "image://" + require("../../../assets/img/u0.png");
          },
			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: [0,0,0, 0], // 文字块内边距
        shadowColor: 'rgba(0,121,221,0.3)', // 文字块的背景阴影颜色
        shadowBlur: 6, // 文字块的背景阴影长度
        formatter: (params) => {
          let t = params.data.name
          
          let str = [`{name|}${t}`].join('\n')
          return str
        },
        rich: {
          b:{
            fontSize: 14,
          },
          name: {
            fontSize: 14,
            padding:[0,0,0,5],
            backgroundColor:{
              image:one,
            },
          },
          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
		}]
	};
}