import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, NgZone, ElementRef } from '@angular/core';
import { TableServiceService } from './table-service/table-service.service'
import * as d3 from "d3"
import * as echarts from "echarts"
@Component({
selector: 'app-table-list',
templateUrl: './table-list.component.html',
styleUrls: ['./table-list.component.less'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TableListComponent implements OnInit {
firstname = true;
// 延迟加载图表
showloading: boolean = true;
//用来存放被收起的某节点的子节点
globalSeriesData: any = [];
seriesData: any = [{
"name": "1110011",
"x": 220,
"y": 1,
"symbolSize": 20,
"category": "1110011",
"value": 16,
}, {
"name": "1100007",
"x": 0,
"y": 0,
"symbolSize": 18,
"category": "1110011",
}, {
"x": 0,
"y": 0,
"name": "1100008",
"symbolSize": 12,
"category": "1100007",
}, {
"name": "1110018",
"x": 0,
"y": 0,
"symbolSize": 18,
"category": "1110011",
}, {
"x": 0,
"y": 0,
"name": "1110016",
"symbolSize": 12,
"category": "1110018",
}, {
"x": 0,
"y": 0,
"name": "1110099",
"symbolSize": 8,
"category": "1110016",
}, {
"x": 0,
"y": 0,
"name": "1110075",
"symbolSize": 12,
"category": "1110018",
}, {
"x": 0,
"y": 0,
"name": "1110070",
"symbolSize": 8,
"category": "1110075",
}, {
"name": "1110013",
"x": 0,
"y": 0,
"symbolSize": 18,
"category": "1110011",
}, {
"x": 0,
"y": 0,
"name": "1110089",
"symbolSize": 12,
"category": "1110013",
}, {
"x": 0,
"y": 0,
"name": "1110090",
"symbolSize": 8,
"category": "1110089",
}, {
"name": "1110012",
"x": 0,
"y": 0,
"symbolSize": 18,
"category": "1110011",
}, {
"x": 0,
"y": 0,
"name": "1110076",
"symbolSize": 12,
"category": "1110012",
}, {
"name": "1110088",
"x": 0,
"y": 0,
"symbolSize": 18,
"category": "1110011",
}, {
"name": "wang",
"x": 0,
"y": 0,
"symbolSize": 18,
"category": "1110018",
}, {
"name": "li",
"x": 0,
"y": 0,
"symbolSize": 18,
"category": "1110090",
}];
seriesLinks: any = [{
"source": "1110090",
"target": "li"
}, {
"source": "1110018",
"target": "wang"
}, {
"source": "1110011",
"target": "1100007"
}, {
"source": "1100007",
"target": "1100008"
}, {
"source": "1100008",
"target": "1100009"
}, {
"source": "1110011",
"target": "1110018"
}, {
"source": "1110018",
"target": "1110016"
}, {
"source": "1110016",
"target": "1110099"
}, {
"source": "1110018",
"target": "1110075"
}, {
"source": "1110075",
"target": "1110070"
}, {
"source": "1110075",
"target": "1110003"
}, {
"source": "1110011",
"target": "1110013"
}, {
"source": "1110013",
"target": "1110089"
}, {
"source": "1110089",
"target": "1110090"
}, {
"source": "1110011",
"target": "1110012"
}, {
"source": "1110012",
"target": "1110076"
}, {
"source": "1110076",
"target": "1110004"
}, {
"source": "1110011",
"target": "1110088"
}];
seriesCategories: any = [{
"name": "1110011"
}, {
"name": "1100007"
}, {
"name": "1110018"
}, {
"name": "1110013"
}, {
"name": "1110012"
}, {
"name": "1110088"
}, {
"name": "1100008"
}, {
"name": "1110016"
}, {
"name": "1110076"
}, {
"name": "1110089"
}, {
"name": "1110075"
}, {
"name": "1100009"
}, {
"name": "1110099"
}, {
"name": "1110070"
}, {
"name": "1110003"
}, {
"name": "1110004"
}, {
"name": "1110090"
}];
option: any;
myChart: any;
deleteArr: any[] = [];
_deleteArr: any[] = [];
constructor(private tableService: TableServiceService,
private cdf: ChangeDetectorRef,
private ngZone: NgZone,
private el: ElementRef) { }
ngOnInit() {
// 初始化一个节点，和隐藏其他节点
this.globalSeriesData = this.seriesData.splice(1);
this.seriesData = [this.seriesData[0]];
this.option = {
title: {
text: 'title',
bottom: "bottom",
left: "center",
textStyle: {
color: '#ccc'
}
},
tooltip: {
formatter: '{b}'
},
toolbox: {
show: true,
feature: {
restore: {
show: true
},
saveAsImage: {
show: true
}
},
right: 15
},
animation: false,
// animationDuration: 1000,
// animationEasingUpdate: 'quinticInOut',
series: [{
//name: '', //用于tooltip的显示
type: 'graph',
layout: 'force', // force
force: {
initLayout: 'circular',
repulsion: 150,
gravity: 0.1,
edgeLength: 10,
layoutAnimation: true,
},
data: this.seriesData,
links: this.seriesLinks,
categories: this.seriesCategories,
roam: true,
symbol: "circle",
draggable: "true",
label: {
normal: {
show: true,
position: 'top', //inside
formatter: '{b}',
fontSize: 16,
fontStyle: '100',
}
},
height: 3,
lineStyle: {
normal: {
width: 3,
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'white' // 0% 处的颜色red
}, {
offset: 1,
color: 'green' // 100% 处的颜色blue
}]
},
curveness: 0,
type: "solid"
}
}
}]
};
// 延迟加载
setTimeout(() => {
this.showloading = false;
const elEchart = this.el.nativeElement.querySelector('.demo-chart');
this.myChart = echarts.init(elEchart);
// myChart.setOption(this.option);
//点击隐藏节点实现
this.myChart.on('click', (params) => {
if (params.dataType === "node") {
this.zheDie(params);
}
});
}, 3);
}
/**
* 点击隐藏和展开
* @param params 节点参数
*/
zheDie(params: any) {
// 折叠展开标志位
let deletedFlag = false;
this.seriesData.forEach(data => {
if (data.category == params.name) {
//排除删除根元素的可能
if (data.category != data.name) {
deletedFlag = true;
// 存储当前被点击节点所有子节点
this.deleteArr.push(data);
}
}
});
if (deletedFlag) {
// 依次删除子孙节点
this.fold(this.deleteArr, this._deleteArr);
} else { //依次恢复子孙节点
let nodeChildren = [];
// 恢复seriesData中被删除的节点
this.globalSeriesData.forEach((data, i) => {
if (params.name == data.category) {
this.seriesData.push(data);
nodeChildren.push(data);
}
});
// 取消存储 被删除的子节点
if (nodeChildren.length > 0) {
const newg = this.globalSeriesData.filter((data, i) => {
if (nodeChildren.findIndex(v => v.name == data.name) < 0) {
return data;
}
});
this.globalSeriesData = newg;
}
}
this.myChart.setOption(this.option);
}
/**
* 递归删除子节点
* @param deleteArr 需要删除的子节点
* @param _deleteArr 需要删除的子节点的子节点
*/
fold(deleteArr, _deleteArr) {
// 初始化存储当前删除节点的子节点
this._deleteArr = [];
for (let n = this.seriesData.length - 1; n >= 0; n--) {
// 将当前被删除所有节点的子节点存储起来，供下次继续逐级删除
if (deleteArr.findIndex(v => v.name == this.seriesData[n].category) >= 0) {
this._deleteArr.push(this.seriesData[n]);
}
// 删除当前节点的子节点，并添加到globalSeriesData
if (deleteArr.findIndex(v => v.name == this.seriesData[n].name) >= 0) {
this.globalSeriesData.push(this.seriesData[n]);
this.seriesData.splice(n, 1);
}
}
// 将下次需要删除的节点更新为当前删除节点的子节点
this.deleteArr = this._deleteArr;
// 递归删除
if (this.deleteArr.length !== 0) {
this.fold(this.deleteArr, this._deleteArr);
}
}
}
那个循环删除子节点的有待优化，暂时用了递归！。。。。。。。
while 条件不能使用 数组长度判断 因为本次执行完就改变数组长度了
脑子短路了
累
啊
！
