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
