butterfly vue3 关系图

index.vue

<div className="compact-box-tree-page">

<div className="compact-box-tree-canvas" ref="buildCore"></div>

</div>

<script lang="ts">

import { defineComponent, ref, watch, onMounted } from 'vue';

import { mockData } from './config';

import { TreeCanvas } from 'butterfly-dag';

import 'butterfly-dag/dist/index.css';

export default defineComponent({

name: 'Butterfly',

components: {},

setup() {

const buildCore = ref<HTMLDivElement | null>(null);

let canvas: any = null;

onMounted(() => {

if (buildCore.value != null) {

canvas = new TreeCanvas({

root: buildCore.value,

disLinkable: true, // 可删除连线

linkable: true, // 可连线

draggable: true, // 可拖动

zoomable: true, // 可放大

moveable: true, // 可平移

theme: {

edge: {

shapeType: 'Manhattan',

arrow: true,

},

},

layout: {

type: 'compactBox',

options: {

direction: 'TB',

getHeight(d: any) {

return 60;

},

getWidth(d: any) {

return 120;

},

getHGap(d: any) {

return 20;

},

getVGap(d: any) {

return 80;

},

},

},

});

canvas.draw(mockData, {}, () => {

canvas.focusCenterWithAnimate();

});

}

});

const data = ref(mockData);

watch(

() => data,

() => {

canvas.draw(mockData, {}, () => {

canvas.focusCenterWithAnimate();

});

},

);

return {

buildCore,

};

},

});

</script>

<style lang="less">

@butterfly-theme-color-base: #fff;

@butterfly-normal-font-color-base: #222;

@butterfly-overlay-font-color-base: #fff;

@butterfly-primary-color-base: #f66902;

@butterfly-box-border-color-base: #d9d9d9;

@butterfly-box-shadow-base:0 2px 3px 0 rgba(0,112,204,0.06);

@butterfly-box-radius-base: 100px;

@butterfly-line-color-base: #bfbfbf;

// 主题背景色（画布背景色）

@butterfly-theme-background-color: @butterfly-theme-color-base;

// （各图形框）普通情况背景色

@butterfly-theme-color: fade(@butterfly-theme-color-base, 80%);

// 主题色

@butterfly-primary-color: @butterfly-primary-color-base;

// 普通情况下字体颜色

@butterfly-normal-font-color: @butterfly-normal-font-color-base;

// 主题背景色上的字体颜色及icon颜色

@butterfly-overlay-font-color: @butterfly-overlay-font-color-base;