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

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