Echart4 关系图 Graph 节点点击折叠展开（Angular6）

最新推荐文章于 2024-09-02 23:33:47 发布

CodeLines3

最新推荐文章于 2024-09-02 23:33:47 发布

阅读量2.8k

点赞数

分类专栏：前端 angular 可视化

本文链接：https://blog.csdn.net/Sun_Shydeo/article/details/96765681

版权

本文介绍了如何在Echart4和Angular6中实现关系图的节点点击，进行子节点的折叠和展开操作。在处理过程中提到了一个优化问题，即在循环删除子节点时不能使用数组长度作为终止条件，因为这可能导致数组长度在循环执行过程中发生变化，造成意料之外的结果。作者在解决这个问题时遇到了一些困难，感到有些疲惫。

摘要由CSDN通过智能技术生成

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": "