当前位置： 首页 > article >正文

MADE A PIE 之动态树形图

article 2024/9/20 13:55:20

MADE A PIE api地址

他那个api里的代码可以直接拿过来用，只是他没有写怎么使用

使用时我发现如果节点太多会导致节点名称重叠，所以我在他这个基础之上加了一个放大缩小和随意拖动（dragstart，dragend，flTop，flLeft），如果对拖拽有需求可以看我之前文章

 <div
      class="app-wrapper"
      id="myChart"
      style="position: absolute;"
      :style="'width:' + flWidth + 'px;height:' + flHeight + 'px;top:' + flTop + 'px;left:' + flLeft + 'px'"
      draggable="true"
      @dragstart="dragstart1($event)"
      @dragend.stop="dragend($event)"
    >
    </div>

通过获取id使用

      var chartDom = document.getElementById('myChart');
      myChart = that.$echarts.init(chartDom);
      myChart.setOption(option);

在官方文档里使用的逻辑直接复制就可以正常使用了（option是初始化canvas数据）

下面是我是用的整个代码：

我在传了两个值（如果不需要直接改成固定值）

1.basicstateheight：画布高度

2.basicstateWidth：画布宽度

画布使用属性：（字段都是代码里的，可以直接搜索）

1.symbolSize：图标宽高

2.colork：线的颜色

3.source：标题内容

4.textStyle：标题样式

5.target：对应连线的点，和下一级的名字对应

6.links：包括线的颜色，流水线的颜色（link，line）

<template>
  <div
    ref="body"
    style="width: 100%;height: 100%;"
  >

    
    <div
      class="app-wrapper"
      id="myChart"
      style="position: absolute;"
      :style="'width:' + flWidth + 'px;height:' + flHeight + 'px;top:' + flTop + 'px;left:' + flLeft + 'px'"
      draggable="true"
      @dragstart="dragstart1($event)"
      @dragend.stop="dragend($event)"
    >
    </div>

  </div>
</template>

<script>
var option
var myChart
export default {
  name: 'ats',
  components: {},
  props: {
    basicstateheight: {
      type: Number,
      default: 500,
    },
    basicstateWidth: {
      type: Number,
      default: 1920,
    },
  },
  data() {
    return {
      flWidth: 1920,
      flHeight: 500,
      flLeft: 0,
      flTop: 0,
      left: 0,
      top: 0,
    }
  },
  computed: {
  },
  mounted() {
    // this.flHeight = this.dbodyheight
    var returninfo = initCharts(jsons);
    option = {
      backgroundColor: 'transparent',
      grid: {
      },
      xAxis: {
        show: false,
        type: 'value',
        max: returninfo.len[0] - 100,
        min: returninfo.len[1],
      },
      yAxis: {
        show: false,
        type: 'value',
        max: returninfo.leny[0],
        min: returninfo.leny[1],
      },
      tooltip: {},
      series: [
        {
          type: 'graph',
          zlevel: 5,
          draggable: false,
          coordinateSystem: 'cartesian2d', //使用二维的直角坐标系（也称笛卡尔坐标系）
          label: {
            show: true,
            color: '#fff',
            position: 'bottom',
          },
          data: returninfo.data,
          links: returninfo.links,
          lineStyle: {
            opacity: 1,
            width: 2,
          },
        },
        {
          type: 'lines',
          coordinateSystem: 'cartesian2d',
          zlevel: 1,
          animation: false,
          effect: {
            show: true,
            period: 10,
            trailLength: 0.01,
            symbolSize: 12,
            symbol: 'pin',
            loop: true,
          },
          data: returninfo.lines,
          lineStyle: {
            width: 0,
          },
        },


      ],
    };
    var that = this;
    setTimeout(function () {
    that.flHeight = that.basicstateheight
    that.flWidth = that.basicstateWidth
    console.log(that.flHeight, that.flWidth)
    }, 500)
    setTimeout(function () {
    console.log(that.basicstateheight)
      var chartDom = document.getElementById('myChart');
      myChart = that.$echarts.init(chartDom);
      myChart.setOption(option);
    }, 1000)
  },

  methods: {
    getData() {
  
    },
    btnjia() {
      this.flWidth = this.flWidth + 100
      this.flHeight = this.flHeight + 100
      console.log(this.flWidth)
      var chartDom = document.getElementById('myChart');
      myChart.dispose();
      myChart = this.$echarts.init(chartDom);
      myChart.setOption(option);
    },
    btnjian() {
      if (this.flHeight <= 100) return
      this.flWidth = this.flWidth - 100
      this.flHeight = this.flHeight - 100
      console.log(this.flWidth)
      var chartDom = document.getElementById('myChart');
      myChart.dispose();
      myChart = this.$echarts.init(chartDom);
      myChart.setOption(option);
    },
    dragstart1(e, item, index) {
      this.left = e.clientX * 1
      this.top = e.clientY * 1
    },
    // 停止拖拽位置
    dragend(e, item, index) {
      this.flLeft = this.flLeft + e.clientX - this.left
      this.flTop = this.flTop + e.clientY - this.top

    },
  }
}

var data = {
  children: [
    {
      children: [
        {
          code: '2',
          ifend: '11',
          name: '节点二21',
        },
        {
          ifend: '12',
          name: '节点二12',
        },
        {
          code: '2',
          ifend: '13',
          name: '节点二13',
        },
        {
          code: '2',
          name: '节点二14',
        }
      ],
      ifend: '1',
      name: '节点一1',
    },
    {
      children: [
        {
          code: '2',
          ifend: '21',
          name: '节点二21',
        },
        {
          ifend: '22',
          name: '节点二22',
        },
        {
          code: '2',
          ifend: '23',
          name: '节点二23',
        },
        {
          code: '2',
          name: '节点二24',
        }
      ],
      ifend: '2',
      name: '节点一2',
    },
    {
      children: [
        {
          code: '2',
          ifend: '31',
          name: '节点二31',
        },
        {
          ifend: '32',
          name: '节点二32',
        },
        {
          code: '2',
          ifend: '33',
          name: '节点二33',
        },
        {
          code: '2',
          name: '节点二34',
        }
      ],
      ifend: '3',
      name: '节点一3',
    },
    {
      children: [
        {
          code: '2',
          ifend: '41',
          name: '节点二41',
        },
        {
          ifend: '42',
          name: '节点二42',
        },
        {
          code: '2',
          ifend: '43',
          name: '节点二43',
        },
        {
          code: '2',
          name: '节点二44',
        }
      ],
      ifend: '4',
      name: '节点一4',
    },
    {
      children: [
        {
          code: '2',
          ifend: '51',
          name: '节点二51',
        },
        {
          ifend: '52',
          name: '节点二52',
        },
        {
          code: '2',
          ifend: '53',
          name: '节点二53',
        },
        {
          code: '2',
          name: '节点二54',
        }
      ],
      ifend: '5',
      name: '节点一5',
    },
    {
      children: [
        {
          code: '2',
          ifend: '61',
          name: '节点二61',
        },
        {
          ifend: '62',
          name: '节点二62',
        },
        {
          code: '2',
          ifend: '63',
          name: '节点二63',
        },
        {
          code: '2',
          name: '节点二64',
        }
      ],
      ifend: '6',
      name: '节点一6',
    },
    {
      children: [
        {
          code: '2',
          ifend: '71',
          name: '节点二71',
        },
        {
          ifend: '72',
          name: '节点二72',
        },
        {
          code: '2',
          ifend: '73',
          name: '节点二73',
        },
        {
          code: '2',
          name: '节点二74',
        }
      ],
      ifend: '7',
      name: '节点一7',
    }, {
      children: [
        {
          code: '2',
          ifend: '81',
          name: '节点二81',
        },
        {
          ifend: '82',
          name: '节点二82',
        },
        {
          code: '2',
          ifend: '83',
          name: '节点二83',
        },
        {
          code: '2',
          name: '节点二84',
        }
      ],
      ifend: '8',
      name: '节点一8',
    }, {
      children: [
        {
          code: '2',
          ifend: '91',
          name: '节点二91',
        },
        {
          ifend: '92',
          name: '节点二92',
        },
        {
          code: '2',
          ifend: '93',
          name: '节点二93',
        },
        {
          code: '2',
          name: '节点二94',
        }
      ],
      ifend: '9',
      name: '节点一9',
    }, {
      children: [
        {
          code: '2',
          ifend: '101',
          name: '节点二101',
        },
        {
          ifend: '102',
          name: '节点二102',
        },
        {
          code: '2',
          ifend: '103',
          name: '节点二103',
        },
        {
          code: '2',
          name: '节点二104',
        }
      ],
      ifend: '10',
      name: '节点一10',
    }, {
      children: [
        {
          code: '2',
          ifend: '111',
          name: '节点二111',
        },
        {
          ifend: '112',
          name: '节点二113',
        },
        {
          code: '2',
          ifend: '114',
          name: '节点二115',
        },
        {
          code: '2',
          name: '节点二116',
        }
      ],
      ifend: '111111',
      name: '节点一11',
    }
  ],
  name: '10号线控制中心',
  ifend: '0',
};
var jsons = format(data);
jsons = format2(jsons);

function format(data) {
  data.x = 0;
  data.y = 0;
  if (!data.hasOwnProperty('children')) {
    data.len = [1, -1];
    data.leny = [1, 9];
    return data;
  }
  var l2 = data.children;
  var hi = parseInt(l2.length / 2);
  var xi = l2.length - hi;
  var his = getSum(l2, 0, hi);
  var xis = getSum(l2, xi - 1, l2.length);
  l2 = sortData(l2, hi, xi);
  data.children = l2;
  var jhi = hi > 9 || his === 0 ? 300 : 200;
  var jxi = xi > 9 || xis === 0 ? 300 : 200;
  var maxmin = [-100000, 100000];
  var maxminy = [-100000, 100000];
  for (var i = 0; i < l2.length; i++) {
    if (i < hi) {
      l2[i].x = getLoction(hi, data.x, i + 1);
      l2[i].y = data.y + jhi;
      l2[i].fx = getFX(hi, i, false);
    } else {
      l2[i].x = getLoction(xi, data.x, i - hi + 1);
      l2[i].y = data.y - jxi;
      l2[i].fx = getFX(xi, i - hi, true);
    }
    getMaxMin(maxmin, l2[i].x);
    getMaxMin(maxminy, l2[i].y);
    if (!l2[i].hasOwnProperty('children')) {
      continue;
    }
    var l3 = l2[i].children;
    for (var j = 0; j < l3.length; j++) {
      if (i < hi) {
        l3[j].x = getLoction(l3.length, l2[i].x, j + 1);
        l3[j].y = l2[i].y + 200;
        l3[j].fx = getFX(l3.length, j, false);
      } else {
        l3[j].x = getLoction(l3.length, l2[i].x, j + 1);
        l3[j].y = l2[i].y - 200;
        l3[j].fx = getFX(l3.length, j, true);
      }
      getMaxMin(maxmin, l3[j].x);
      getMaxMin(maxminy, l3[j].y);
    }
  }
  var c;
  if (hi % 2 === 0) {
    c = hi / 2;
    if (l2[c].hasOwnProperty('children')) {
      if (l2[c - 1].hasOwnProperty('children') && l2[c].children[0].x < l2[c].x - 50) {
        var tem = 50 - l2[c].children[0].x;
        for (var j = 0; j < l2[c].children.length; j++) {
          l2[c].children[j].x = l2[c].children[j].x + tem;
          getMaxMin(maxmin, l2[c].children[j].x);
        }
        l2[c].x = getLoction2(l2[c].children);
      }
    }
  } else {
    c = parseInt(hi / 2);
  }
  for (var i = c + 1; i < hi; i++) {
    if (l2[i].hasOwnProperty('children')) {
      if (
        l2[i - 1].hasOwnProperty('children') &&
        l2[i - 1].children[l2[i - 1].children.length - 1].x - l2[i].children[0].x > -100
      ) {
        var tem = l2[i - 1].children[l2[i - 1].children.length - 1].x + 100 - l2[i].children[0].x;
        for (var j = 0; j < l2[i].children.length; j++) {
          l2[i].children[j].x = l2[i].children[j].x + tem;
          getMaxMin(maxmin, l2[i].children[j].x);
        }
        l2[i].x = getLoction2(l2[i].children);
      }
    }
  }
  for (var i = c - 1; i >= 0; i--) {
    if (l2[i].hasOwnProperty('children')) {
      if (
        l2[i + 1].hasOwnProperty('children') &&
        l2[i + 1].children[0].x - l2[i].children[l2[i].children.length - 1].x < 100
      ) {
        var tem = l2[i].children[l2[i].children.length - 1].x - (l2[i + 1].children[0].x - 100);
        for (var j = 0; j < l2[i].children.length; j++) {
          l2[i].children[j].x = l2[i].children[j].x - tem;
          getMaxMin(maxmin, l2[i].children[j].x);
        }
        l2[i].x = getLoction2(l2[i].children);
      }
    }
  }

  if (xi % 2 === 0) {
    c = xi / 2 + hi;
    if (l2[c].hasOwnProperty('children')) {
      if (l2[c - 1].hasOwnProperty('children') && l2[c].children[0].x < l2[c].x - 50) {
        var tem = 50 - l2[c].children[0].x;
        for (var j = 0; j < l2[c].children.length; j++) {
          l2[c].children[j].x = l2[c].children[j].x + tem;
          getMaxMin(maxmin, l2[c].children[j].x);
        }
        l2[c].x = getLoction2(l2[c].children);
      }
    }
  } else {
    c = parseInt(xi / 2) + hi;
  }
  for (var i = c + 1; i < l2.length; i++) {
    if (l2[i].hasOwnProperty('children')) {
      if (
        l2[i - 1].hasOwnProperty('children') &&
        l2[i - 1].children[l2[i - 1].children.length - 1].x - l2[i].children[0].x > -100
      ) {
        var tem = l2[i - 1].children[l2[i - 1].children.length - 1].x + 100 - l2[i].children[0].x;
        for (var j = 0; j < l2[i].children.length; j++) {
          l2[i].children[j].x = l2[i].children[j].x + tem;
          getMaxMin(maxmin, l2[i].children[j].x);
        }
        l2[i].x = getLoction2(l2[i].children);
      }
    }
  }
  for (var i = c - 1; i >= hi; i--) {
    if (l2[i].hasOwnProperty('children')) {
      if (
        l2[i + 1].hasOwnProperty('children') &&
        l2[i + 1].children[0].x - l2[i].children[l2[i].children.length - 1].x < 100
      ) {
        var tem = l2[i].children[l2[i].children.length - 1].x - (l2[i + 1].children[0].x - 100);
        for (var j = 0; j < l2[i].children.length; j++) {
          l2[i].children[j].x = l2[i].children[j].x - tem;
          getMaxMin(maxmin, l2[i].children[j].x);
        }
        l2[i].x = getLoction2(l2[i].children);
      }
    }
  }
  // data.x = (maxmin[0] - maxmin[1]) / 2 + maxmin[1];
  if (maxmin[0] - maxmin[1] <= 400) {
    maxmin[0] = maxmin[0] + 100;
    maxmin[1] = maxmin[1] - 100;
  }
  data.len = maxmin;
  data.leny = maxminy;
  return data;
}

function format2(data) {
  if (!data.hasOwnProperty('children')) {
    return data;
  }
  var l2 = data.children;
  var hi = parseInt(l2.length / 2);
  var xi = l2.length - hi;
  var maxmin = data.len;
  for (var i = 0; i < l2.length; i++) {
    if (!l2[i].hasOwnProperty('children')) {
      if (i > 0 && i != hi && l2[i - 1].hasOwnProperty('children') && l2[i - 1].children.length > 5) {
        var tem = (l2[i - 1].children.length - 5) / 2;
        l2[i].x = l2[i].x + 100 * tem;
        var len,
          flag = false;
        if (i < hi) {
          len = hi;
        } else {
          len = l2.length;
        }
        for (var j = i + 1; j < len; j++) {
          flag = true;
          l2[j].x = l2[j].x + 100 * tem;
          if (l2[j].hasOwnProperty('children')) {
            var children = l2[j].children;
            for (var k = 0; k < children.length; k++) {
              children[k].x = children[k].x + 100 * tem;
              getMaxMin(maxmin, children[k].x);
            }
          }
          getMaxMin(maxmin, l2[j].x);
        }
        if (flag) {
          l2[i].x = l2[i].x > maxmin[0] ? maxmin[0] : l2[i].x;
        }
      } else if (i < l2.length - 1 && l2[i + 1].hasOwnProperty('children') && l2[i + 1].children.length > 5) {
        var tem = (l2[i + 1].children.length - 5) / 2;
        l2[i].x = l2[i].x - 100 * tem;
        var len,
          flag = false;
        if (i < hi) {
          len = 0;
        } else {
          len = hi;
        }
        for (var j = i - 1; j >= len; j--) {
          flag = true;
          l2[j].x = l2[j].x - 100 * tem;
          if (l2[j].hasOwnProperty('children')) {
            var children = l2[j].children;
            for (var k = 0; k < children.length; k++) {
              children[k].x = children[k].x - 100 * tem;
              getMaxMin(maxmin, children[k].x);
            }
          }
          getMaxMin(maxmin, l2[j].x);
        }
        if (flag) {
          l2[i].x = l2[i].x < maxmin[1] ? maxmin[1] : l2[i].x;
        }
      }
    }
  }
  // data.x = (maxmin[0] - maxmin[1]) / 2 + maxmin[1];
  if (maxmin[0] - maxmin[1] <= 400) {
    maxmin[0] = maxmin[0] + 100;
    maxmin[1] = maxmin[1] - 100;
  }
  data.len = maxmin;
  return data;
}

function getLoction(num, x, index) {
  if (num % 2 === 0) {
    var c = num / 2 - index;
    x = x - 50 - 100 * c;
  } else {
    var c = parseInt(num / 2 + 1) - index;
    x = x - 100 * c;
  }
  return x;
}

function getLoction2(data) {
  var len = data.length;
  var x;
  if (len % 2 === 0) {
    var c = len / 2;
    x = data[c - 1].x + 50;
  } else {
    var c = parseInt(len / 2 + 1);
    x = data[c - 1].x;
  }
  return x;
}

function getFX(len, index, fx) {
  var x, c;
  if (len < 1) {
    return 1;
  }
  c = len % 2 === 0 ? len / 2 : parseInt(len / 2) + 1;
  x = index < c ? 1 : -1;
  if (fx) {
    x = -x;
  }
  return x;
}

function getSum(data, st, ed) {
  if (ed > data.length) {
    ed = data.length;
  }
  var count = 0;
  for (var i = st; i < ed; i++) {
    if (!data[i].hasOwnProperty('children')) {
      continue;
    }
    var l3 = data[i].children;
    count = count + l3.length;
  }
  return count;
}

function sortData(data, hi, xi) {
  var res = [];
  var len = hi - 1;
  var pos = 0;
  for (var i = 0; i < hi - 1; i++) {
    var flag = 1;
    for (var j = 0; j < len; j++) {
      var dx = !data[j].hasOwnProperty('children') ? 0 : data[j].children.length,
        dx1 = !data[j + 1].hasOwnProperty('children') ? 0 : data[j + 1].children.length;
      if (dx > dx1) {
        var tem = data[j];
        data[j] = data[j + 1];
        data[j + 1] = tem;
        flag = 0;
        pos = j;
      }
    }
    len = pos;
    if (flag === 1) {
      break;
    }
  }
  for (var i = 0; i < hi; i++) {
    if (i % 2 === 0) {
      res[i / 2] = data[i];
    } else {
      res[hi - (i + 1) / 2] = data[i];
    }
  }

  len = data.length - 1;
  pos = 0;
  for (var i = hi; i < data.length - 1; i++) {
    var flag = 1;
    for (var j = hi; j < len; j++) {
      var dx = !data[j].hasOwnProperty('children') ? 0 : data[j].children.length,
        dx1 = !data[j + 1].hasOwnProperty('children') ? 0 : data[j + 1].children.length;
      if (dx > dx1) {
        var tem = data[j];
        data[j] = data[j + 1];
        data[j + 1] = tem;
        flag = 0;
        pos = j;
      }
    }
    len = pos;
    if (flag === 1) {
      break;
    }
  }
  for (var i = 0; i < xi; i++) {
    if (i % 2 === 0) {
      res[i / 2 + hi] = data[i + hi];
    } else {
      res[xi - (i + 1) / 2 + hi] = data[i + hi];
    }
  }
  return res;
}

function getMaxMin(maxmin, x) {
  if (maxmin[0] < x) {
    maxmin[0] = x;
  }
  if (maxmin[1] > x) {
    maxmin[1] = x;
  }
  return maxmin;
}
function initCharts(returninfo) {
  var res = {};
  var links = [];
  var lines = [];
  var yiji =
    'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAxhJREFUWEftl9FLFFEUxr+zWghFreFbUZZBBEFeoRcpsnfBtZ3osY1mIF9K+weyfyCtl4LZaITems1ZsOcUq8eughQ9mAb5JrlJgcisN+/OzLa7TbJzp9TQedqduffMj+9895w5hG1+0Tbnwy5g3AztHAWvGLx9DRiViiWA3ucmm4qrntz/VxS8bPAMCQwRISmDCoGCIAy8MJkVFzI2oKbzIRD6Q0EEhu0sG4gDqQyYyvBkYyNGQejyAMQ3CEqVfpJwADro3ca466LXsVhBBVQJMPAbAa0eg5guNlDKeczm5f/UTd7aUBQOgc56zzGv6svIgCU4gVcVfhspuuivVUgq3NCIYSJcC3yZIFyKengiA2o6HwThrp++ATvLhjdKnabzfhCG/PX37CwbjJLqWIC2yerarxlc7AIGaalM8X+hYNljAmU/1t7b0hRrBh8HcBHAhG2yUk2svbdlgOsFblAQMn49/A1Q1j8SsNYbqndyBTb3FNeUizAFq5dsEmBXVSsLEMI8WIXntUI7y6Ql6r7qqmN1R/sHC3cGoP9lI09yuy/ilOtiQvULpjIRsRVMG/y2PM3Bx0PZkgIFeXpzJnsQJ/OxANMGf0pAZiMAAVg5k11XhVQGTN/gKUp4M0hTUwI93Udw5vSBEsfMh2Xkx75gZWXNK39r6M09YY4KpDKgZnAuPSfh7tw6hUPJvVXv/1pYxf2HHwPIKdtkTAlQ07lsT9Lg0S6/O5zvbEGq+3DoXmdsAa/fLnrPhN9Nor1lgtI6X6o1eJQYffpJtJ3YF7pl5v0yrGdzUcJVrZXTIWk6d0DoUY1yVTuKcx3Nodsn3ywi/3JBNbRUPR/Dg+8KcnJrO74ffUZbKMQjcxazc99LE59tdpRm5qiXMmBa51YwEF3obEFPjQ/zYwuY9P0nBEZyWbZhOfoTuDJgqXvsEfPB/Nuc3Fv24uynH1gqrHpnQ4jPRZfaVbuKMqB8uTeCCoeIjoUpIOESRKmoo2ZlrFiAMpDfhzOCRObXoC6mSZDlurBUlQsgYwNGNX3U9buAURWrXb+rYFwFfwLcKGWrZiNDjQAAAABJRU5ErkJggg=='
  var sanji = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAAAqpJREFUWEft2G9sC2EcB/Dvk844aWyOWdcRjSYj68TOyyJqZhIWqzBeeIGkE7zxZq+88MILr/bGq4kuEe/QilZKYmYmpG+EdmILS8pktnT+3NqkUWZ1cndau6jurjy9m7i399zv+dzvee55nvsRGPwiBvchB3Qfj9hMGbQRAZV6ogWCRMaEYOACNyo6JOB+T8QlADcI0ReXTYwgIEGAvf4ebkAGdkQiABr1zFyevqN+L8dlgYLYYNf2Khw9WKur89LVcdy+914y+L0cUQDbWy04sMeiK/DazTh8obh64LuP03gQ5qmhtzpZrFhWnouvGXj41DN8Sn+jBlzMmHD5/PrigZ1nX+DN28/UgKtXLkLXmXXFA8Unh16mqAEda82K2JqHmJrsN4ELAl1OFtucbKlNiv7uh3kM/Pgof1lmdJXl6Xz+AevrzHDUKSdtqbM6NJLC8Ij8Uf4bO0mpM6h5mREfyKacBlbc6mavHJqB7ceiNFyKmL6LP096moHi8Wd0LE0NaVvFKI54moHUZMXsJIY/D5Y6W3P1N/92ksqKBWDZhXO9GNX7PP8FieTX/DvJjqZq7GzW95/kTl8cd/sn/wOLngaqM9jbN4ne/jisNQxOeOxgGBMeP+ERvDUhdX7SY4fVyqiGXPGPYWpqOm/7hvol2LKpSrqnGth5ejAXrG23VQrQ7Y0h9lo+CrU0WdDSXK0KGHuVQndPrGDbrnMbtAFnY8QM2teYEQxN4GFY/us/csiGBkeFKqDY6K9nMJ3O4PlwErU1jGIoxWFml5ZLYBqX6iGm0bmamAWBm53L4W7Vt3gUCI3jUfiDch3c1/E0SkDkWWqQS4AweN27sTFXwAQRAgBRP+upvoiQJCAun5eLKkrAZTNwA7pXWRMzZQgoSsBUk/GHwQ1f5f8OXTajOOmOIwMAAAAASUVORK5CYII=';
  var erji = 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAAXNSR0IArs4c6QAABThJREFUWEfNWE1vW0UUPTdOVBASJFIRgkolET+ATNhRPhIkViDVwe6CFamwERKLNr+A9hck3SHZQCoWLGpTR4IVEnGAsiPj/gCIqdQFolJdpEpU9vPQmffm+c7E78NpGtWrp+eZuWfuPffcex/hCf/RE44PDsDimpydnsGOUpgPpiFaX4jucVyg+KmcLwTYIaA36GOltSV61q4DsFSV1wkomj8V1ht1sXkcAD+oyrUp4OvQLFrNmlg9ALBckRdB2AgXqZtBn5b5TR4nUB25woxqE+hV3znGg2bBNPaJMAuoewRavlYTHX0zUtggYKtRF+tHCbJckRuKUMQQ680vRetcVS4qqDZAzymFXjDAgnaQAViuyEsgfM7R6w1DhR0LulFbmj1SgFWpTLQUelOEFe0QD8flRl1coigx7oaL1V/N+tK8fi5V5f5Dz5lnKJjFSQDDEOEjAMvRmnbQx9U0ijhggE6jJoSxW9nrEtHL+nnQxxyVPpZFmsJ17j1OWihsN+qiGIEwRA76OG+N67UFwhWl8Cy/ABH+DRQufFcTWzGNZsJEsPvLFdkC4ax+NwTO67VOLgyxSqWK3CIyt8eggAUtLeWqlAAW+Tsvw1caddF2LpfgXjXEquZYuSKXQdjhmarlZTrAfrR1t1ETy/ydUrhK5apsA3jbhpeH3HovJDA0aEODYECL2oOcBu++8wLeOvO8sfXzjX/w409/R0FBt1kTC2Eiqo4NHwEi4l3sRR1Sc+4ozLvag3fDRIC5Ab+p5R7ni/UIB/2amMOH5047Pvz22i38Lg21dTUwYDw6GV57iWEiEzsN6GoPmmwaB5CFJ75loyZs5schO/veKbx55qQD8Jcbd7D9w+3wnYIxrB9jexG3PdAOQHO5NIDjPBjzlHHqjddPovj+KQdg6/vb+PW3Ow5Ah3ORMqR50GiydedDvTap7pO0WRdr/Ja8FJWrez0trCdOFNRnn7xCL734tAH0x5/38dU3++rBg4C0EauhPNFsdDKSdJd4qvsk5Ypequ51WCkKQ8EFHsD86Wf+0wC7t+4/Fbtz5CmWxepms7a0yCtYUpIS1zymRbyyGDKPSpGWI1q0nQ73gK80WiZ0BIwOGklRnTBpwlI6rnL4eMjjRbtRFyuh1KiuDp9P8nFy52S+XcASY9weV0PVvUGf5rXElCtyBxRWJFNJoswyWsjBOC2QQq9ZF3PjDOl3TuWJFtloJO1h8oZxYm41OOxmXEXv2KaxVJWbBFzQ7ZfmTKIxXrejRQqhQCfviTgdcTQqpdLWf6sWccPKucQzVXNP8yXJkMejbYSib6OR2mTws50MB640a+JiyNfo5zeNWSEynnf6yLCW6/e2vnIVSLqgTxG/WXZafqdpjIp82sFOCWQZ62R2RqtmciAW/VGzbO0emOo0H2cCzKaF1fK2MIC0Da3NQutZqwLGizkGMO2cfgE9f1A79NiZ5aUk76ZFZNx/hwLoZv1Iw7gBX0ttVh4LQJ5xacmUNk7mBTqxB53OmM0wyYI8mjF42/U4AcalyFaANGNev2dKaV5wjg7m2eTNIKYDz7OPtXRO85pn70Qh9kbRuEvOMuQNTKkl0D8rN8Bxo2gWMP7/uBEzz/5cAJMKeR4DcSllDYluJII+RJ5vP7kAOqLLCvkkAPXaLHE/lFD7H5Z4SZsUIBfvvI1EpgfHteWTAvO4eGCcSDsvG2D8FWr0ReFRAPol0M7ZSWdmAgy7arWmhrSmv7E8Cji7V+spSG0SSH93TPxqNrFQHwW4Sc/I9OCkBx71+v8B7AXRgDzlSkwAAAAASUVORK5CYII=';
  var data = [
    {
      name: returninfo.name + returninfo.ifend,//对应source: returninfo.name，否则无法连线
      tooltip: {
        formatter: '{b}',
      },
      symbol: yiji,
      symbolSize: [30, 30],
      value: [returninfo.x, returninfo.y],
      spid: returninfo.id,
    },
  ];
  if ('children' in returninfo) {
    var l2 = returninfo.children;
    var curveness, colork, colorn;
    for (var i = 0; i < l2.length; i++) {
      curveness = 0.1;
      colork = l2[i].code === '2' || l2[i].code === 2 ? '#D8D8D8' : '#53D4A8';
      var link = {
        source: returninfo.name + returninfo.ifend,//对应name: returninfo.name，否则无法连线
        target: l2[i].name,
        textStyle: {
          color: '#fff',
        },
        lineStyle: {
          curveness: curveness,
          color: colork,
        },
      };
      links.push(link);
      colorn = l2[i].code === '2' || l2[i].code === 2 ? 'transparent' : '#53D4A8';
      var line = {
        coords: [
          [returninfo.x, returninfo.y],
          [l2[i].x, l2[i].y],
        ],
        lineStyle: {
          curveness: curveness,
          color: colorn,
        },
      };
      lines.push(line);
      var node = {
        name: l2[i].name,
        tooltip: {
          formatter: '{b}',
        },
        symbol: erji,
        symbolSize: [30, 30],
        value: [l2[i].x, l2[i].y],
        ifend: l2[i].ifend,
        spid: l2[i].id,
      };
      data.push(node);
      if ('children' in l2[i]) {
        var l3 = l2[i].children;
        for (var j = 0; j < l3.length; j++) {
          curveness = l3[j].fx === 1 ? 0.1 : -0.1;
          colork = l3[j].code === '2' || l3[j].code === 2 ? '#D8D8D8' : '#53D4A8';
          var link = {
            source: l2[i].name,
            target: l3[j].name + l3[j].ifend,
            lineStyle: {
              curveness: curveness,
              color: colork,
            },
          };
          links.push(link);
          colorn = l3[j].code === '2' || l3[j].code === 2 ? 'transparent' : '#53D4A8';
          var line = {
            coords: [
              [l2[i].x, l2[i].y],
              [l3[j].x, l3[j].y],
            ],
            lineStyle: {
              curveness: curveness,
              color: colorn,
            },
          };
          lines.push(line);
          node = {
            name: l3[j].name + l3[j].ifend,
            tooltip: {
              formatter: '{b}',
            },
            symbol: sanji,
            symbolSize: [30, 30],
            value: [l3[j].x, l3[j].y],
            ifend: l3[j].ifend,
            spid: l3[j].id,
          };
          console.log(node);
          data.push(node);
        }
      }
    }
  }
  res.data = data;
  res.links = links;
  res.lines = lines;
  res.len = returninfo.len;
  res.leny = returninfo.leny;
  return res;
}
</script>

<style lang="scss" scoped>
.app-wrapper {
  height: 500px;
  width: 500px;
}

</style>

demo(WEB,小程序)（放在这是因为我不想干活，又想了解新东西）J1797Y


http://www.kler.cn/news/304397.html

相关文章：

  • 解决Docker镜像不可下载
  • 【GBase 8c V5_3.0.0 分布式数据库常用几个SQL】
  • 使用 Node Media Server 和 FFmpeg 创建直播流，推送本地视频
  • 在 Mac 上安装双系统会影响性能吗，安装双系统会清除数据吗？
  • 使用VSCode 安装SAP Fiori 开发所需插件
  • el-tree父子不互相关联时，手动实现全选、反选、子级全选、清空功能
  • Qt 构建报错 undefined reference to xxx
  • C++字符串中的string类操作
  • Humanize AI 简介
  • C和指针：函数
  • Leetcode 701-二叉搜索树中的插入操作
  • 安卓开发板_联发科MTK开发板使用ADB开发
  • Excel--不规则隔行填充底纹颜色
  • 【动手学深度学习】08 线性回归 + 基础优化算法（个人向笔记）
  • SpringCloud神领物流学习笔记：项目概述（一）
  • 计算机网络 ---如何寻找目标计算机
  • C语言——双指针法求有序数组的平方
  • Linux：五种IO模型
  • 学习笔记 韩顺平 零基础30天学会Java（2024.9.13）
  • 智能听诊器：打造宠物个性化健康生活
  • 数学基础 -- 概率统计之高斯分布
  • 后端开发刷题 | 把数字翻译成字符串（动态规划）
  • Linux sh命令
  • 【Linux】深刻理解操作系统的管理
  • 若依plus- cloud RuoYiGatewayApplication :8080/（ruoyi-gateway）启动不了，报错！
  • 鸿蒙 - 判断手机号、身份证(正则表达式)
  • CMake构建学习笔记16-使用VS进行CMake项目的开发
  • 计算机组成原理（第二次笔记）
  • PHP高效协同无缝对接一站式生产管理系统小程序源码
  • 深入理解指针（二）