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

原创

于 2019-03-06 16:22:16 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Angular #Echarts #Typescript

本文介绍了如何在Angular项目中结合TypeScript使用Echarts创建关系图，并实现节点拖拽不反弹及自定义按钮进行缩放功能。关键点包括在TS文件中设置拖拽和缩放的逻辑，以及在HTML和less文件中进行相关配置。示例代码中详细展示了拖拽过程中position的更新方法，以及通过'graphRoam'行动类型实现缩放效果。参考官方文档和Echarts源码可以进一步了解和定制功能。

前提：

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
        },
        {