(Angular+ TS) Echarts Graph 关系图节点拖拽不反弹+自定义按钮实现缩放

 

前提：

1. 需要在module中引入NgxEchartsModule

2. ts文件中引入所需文件：

import { Component, OnInit, NgZone } from '@angular/core';

import { of } from 'rxjs';

import * as echarts from 'echarts';

const echart = echarts as any;

---

 代码：

1.  TS部分：

import { Component, OnInit, NgZone } from '@angular/core';
import { of } from 'rxjs';

import * as echarts from 'echarts';
import { map } from 'lodash-es';
const echart = echarts as any;

export class MeetingGraphServiceComponent implements OnInit {
  options;
  nodes;
  links;
  categories;
  echartsInstance;
  winWidth = document.body.clientWidth / 2;
  winHeight = document.body.clientHeight / 2;
  graph;
  data;

  constructor(private ngZone: NgZone) {
    of({
      nodes: [
        {
          categorieId: 0,
          id: '1',
          name: '111',
          symbolSize: 20
        },
        {
          category: 0,
          id: '2',
          name: '222',
          symbolSize: 20
        },
        {
          category: 1,
          id: '3',
          name: '333',
          symbolSize: 20
        },
        {
          category: 1,
          id: '4',
          name: '444',
          symbolSize: 20
        },
        {
          category: 0,
          id: '5',
          name: '555',
          symbolSize: 20
        },
        {
          ca