vue-orgchart拓扑图

安装vue-orgchart

npm install vue-orgchart -S

//main.js引入样式
import 'vue-orgchart/dist/style.min.css'

//使用页面引入
<template><div class="orgchart_Box_Y"><div class="box_right_container"  v-if="ifLoading"><VoBasic:data="chartData":pan="pans":zoom="false":nodeId="id1":template="style":nodeTitle="title":nodeContent="content":depth="6":chartClass="class1" ></VoBasic></div></div></template><script>import { VoBasic } from "vue-orgchart";export default {components: { VoBasic },data() {return {pans: false, //鼠标拖放功能style: "belinda", //主体类型class1: "class1",id1: "id1",title: "name",content: "value",chartData: {},};},created(){this.chartData = {name: 'JavaScript',value:"",children: [{name: 'Vue',value:'',children: [{ name: 'Moon',value:33 }]},{name: 'Vue1',value:'',children: [{ name: 'Moon',value:31 },{ name: 'Moon',value:31 }]}]}}};</script><style>.orgchart_Box_Y .orgchart .node .content {height: auto;line-height: 16px;border: 1px solid#009CFF;font-size: 14px;text-align: center;}</style>

vue-orgchart拓扑图相关推荐

vue拓扑图、组织结构图插件使用(orgChart.js)
今天使用orgChart没有找到合适的,所以今天来写篇使用文档. OrgChart.js是什么? 基于ES6的组织结构图插件. 特征支持本地数据和远程数据(JSON). 基于CSS3过渡的平滑扩展/ ...
vue项目用antv/g6做网络拓扑图
前言: 本人公司要求我制作网络拓扑图编辑工具,现在阶段功能研究制作完成,我发布的内容仅供互相学习参考,一切产生的后果与我无关.本人用的是vue 先上视频 <template><div ...
Vue使用vis实现拓扑图
visjs官方文档 visjs示例 1. 安装 npm install vis 2. 封装成组件 <template><div :id="id" style=&q ...
vue使用svg画拓扑图（关系图）拖拽缩放
概述项目刚开始用的echarts画的拓扑图,echarts有个关系图可以直接画出来,但是上个前端在拖拽功能上留了bug,我眼睛都快看瞎了,都没找出来哪里出问题,还找了各种文章借鉴学习都没搞定后来跑 ...
vue 使用orgChart
1.安装 npm install vue-orgchart -S 2.引入样式 import 'vue-orgchart/dist/style.min.css' 3.实例 <template&g ...
vue 使用orgChart，实现简单树状结构
一.安装 npm install vue-orgchart -S 在min.js中 import 'vue-orgchart/dist/style.min.css' 二.模板 <template ...
vue office在线编辑_VUE和Antv G6实现在线拓扑图编辑
我使用的是G6 2.0,也可以使用 G6 3.0,3.0的拓扑图单独作为一个编辑器使用,使用更加方便.不过2.0的比较简单,容易上手. 1.首先在Antv官网上找到蚂蚁Antv G6插件,引入插件. ...
vue 拓扑组件_vue.js生成S型拓扑图
1.前端代码 new Vue({ el: '#app', data: { }, mounted() { this.init() }, methods: { init() { axios.get(sit ...
vue集成vis-network实现拓扑图
vis.js官方文档:https://visjs.org/ vis-network中文文档:https://ame.cool/pages/a7d858/ 1. 环境准备前提:电脑已安装配置npm和n ...
vue中echarts书写拓扑图
最近在做拓扑图找了下前端常用的组件:jTopo(感觉有点老).Vis.js(文档是英文的,不太容易读).D3(功能强大需要自己实现).ECharts(同样需要自己实现) 由于图形上的交互并没有需要特别 ...

vue-orgchart拓扑图

vue-orgchart拓扑图相关推荐

最新文章

热门文章