tower1229 / vue-tree-chart Goto Github PK

View Code? Open in Web Editor NEW

555.0 15.0 163.0 865 KB

A Vue component to display tree chart

Home Page: https://refined-x.com/Vue-Tree-Chart/

License: MIT License

JavaScript 18.26% Vue 76.48% HTML 5.26%

tree chart tree-chart vue-component vue

vue-tree-chart's Introduction

English | 中文

vue-tree-chart

🌳 A Vue component to display tree chart

Vue3.x version is here

Install

npm i vue-tree-chart --save

Usage

in template:

<TreeChart :json="treeData" />

in script:

import TreeChart from "vue-tree-chart";

export default {
	components: {
    	TreeChart
	},
	data() {
		return {
			treeData: {
				...
			}
		}
	}
	...

Prop

json

Component data to support those field：

- name[String] to display a node name
- image_url[String] to display a node image
- children[Array] node`s children
- mate[Array] node`s mate
- class[Array] node`s class
- extend[Boolean] show/hide node`s children, default True

Example：

  {
    name: 'root',
    image_url: "https://static.refined-x.com/avat.jpg",
    class: ["rootNode"],
    children: [
      {
        name: 'children1',
        image_url: "https://static.refined-x.com/avat1.jpg"
      },
      {
        name: 'children2',
        image_url: "https://static.refined-x.com/avat2.jpg",
        mate: [{
          name: 'mate',
          image_url: "https://static.refined-x.com/avat3.jpg"
        }],
        children: [
          {
            name: 'grandchild',
            image_url: "https://static.refined-x.com/avat.jpg"
          },
          {
            name: 'grandchild2',
            image_url: "https://static.refined-x.com/avat1.jpg"
          },
          {
            name: 'grandchild3',
            image_url: "https://static.refined-x.com/avat2.jpg"
          }
        ]
      },
      {
        name: 'children3',
        image_url: "https://static.refined-x.com/avat.jpg"
      }
    ]
  }

Event

click-node(node)

Click on the node triggered, receive the current node data as a parameter

Run a demo

npm run serve

Build

npm run build-bundle

vue-tree-chart's People

Contributors

Stargazers

Watchers

Forkers

libin1991 lunnlew ljia310 liu-huitao jiekekeji magic-coder trendingtechnology smileforward123 nidegexing mythdigital zwspw skyformat99 tjthink destiny970515 whutsongy andyzhou192 sunmingji mumusen lednick linvinglor justtankme habibtalib wflin haclau ioluwayo nickduncan7 elvenmonky phm1234567 arvinzy jizhiwl ouin81 jinjie08 cool1024 alexcscn pxgogo isnicc sherpaariel ludhidd linjinglinjie zhenyuan-qi summer-day royidoodle i-likeyou shinley shawnxiao94 lexgp ishigruo get-brave userqiao-j li-li-jun ugobbh ddonng zhanggen1 ahmu001 sandmanman renztoygwapo apple006 vaneetjoshi yitzchak-shachar fullofjoy egangloff menggangaaa liu39236244 liangcheng01 bongbongbakudan freepandan luismartinezme lvcongliang massimiliano76 xiaoxiaolinlin bitdanc rabaha alisalmabadi swh123 19qingfeng sy1299 kamgasimo libertyarow xsolee toramanlis lixy2 sleleko jschen1 evanhe810 lrinili yanxuejun2018 yuanxianmo brian90191 leehl xiaoaweng zongpengz yangliu-ly vvenly 1006008051 yiencheng liangbairong jsz315 brightz168 declan-bright vimcoper

vue-tree-chart's Issues

[bug🐛]In horizontal layout, the expansion icon of the node with child nodes is overwritten and unclickable

横向布局时存在子节点的节点的展开图标被覆盖不可点击

[bug🐛]The master node overlaps the mate node in horizontal layout

同级的主要节点和mate节点有重叠

Changing key for children?

How can I specify the key for my child nodes? For example, currently this requires us to have data in the form:

{
    "id": 0,
    "children": [
        {
            "id": 1,
            "children": []
        }
    ]
}

I want to be able to specify that nodes are found under the "nodes" key. So I want my starting data to look like this:

{
    "id": 0,
    "nodes": [
        {
            "id": 1,
            "nodes": []
        }
    ]
}

Is there any way to do this without modifying the source?

How to edit css of the chart?

Hey, Is there any way that I can change some of the UI shapes regarding my will? Thank you

[feature]Add slots to render custom node

可不可以提供一个插槽，用来渲染自定义节点

Readme中example的mate属性后面不是数组

Readme中example的mate属性后面跟了一个对象，而不是数组，所以并不会显示，建议修改Readme
v-if="Array.isArray(treeData.mate) && treeData.mate.length"

How to use Event click-node(node)?

How can I use click-node event to trigger and receive current node?

配偶节点显示不正常

我是通过直接引入TreeChart.vue文件来引入的，没有安装。使用中发现配偶节点不是平行展示的，而是上下展示，见下图

Relationships cannot be drawn correctly when the screen is zoomed

屏幕缩放时不能正确绘制伴侣关系

以下是测试时用到的 json 数据：

{
name: '贾太公',
children: [
{
name: '贾演',
children: [
{
name: '贾代化',
children: [
{
name: '贾敷'
},
{
name: '贾敬',
children: [
{
name: '贾珍',
imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
children: [
{
name: '贾蓉',
mate: [
{
name: '秦可卿'
}
]
}
],
mate: [
{
name: '尤氏'
}
]
},
{
name: '贾惜春'
}
]
}
]
}
]
},
{
name: '贾源',
children: [
{
name: '贾代善',
imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
mate: [
{
name: '史太君'
}
],
children: [
{
name: '贾赦',
children: [
{
name: '贾琏',
imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
mate: [
{
name: '王熙凤'
}
],
children: [
{
name: '巧姐'
}
]
},
{
name: '贾迎春'
}
]
},
{
name: '贾政',
imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
children: [
{
name: '贾宝玉',
imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
mate: [
{
name: '薛宝钗'
}
]
},
{
name: '贾元春'
},
{
name: '贾珠'
},
{
name: '贾探春'
},
{
name: '贾环'
}
],
mate: [
{
name: '王夫人'
},
{
name: '赵姨娘'
},
{
name: '李夫人'
}
]
},
{
name: '贾敏',
imgUrl: "https://img01.yzcdn.cn/vant/cat.jpeg",
children: [
{
name: '林黛玉'
}
],
mate: [
{
name: '林如海'
}
]
}
]
}
]
}
]
}

增加响应式

请问这个组件有没有更新到最新的Vue3的计划？

请问这个组件有没有更新到最新Vue3+的计划？目前公司内部使用的是Vue3搭建的框架，原先组件内使用的Vue2+的内置变量已经失效或过时，导致组件无法在Vu3+的框架内正常使用。

When a couple has only one child, the child's position is not drawn correctly

一对夫妇只拥有一个孩子时孩子位置绘制不正确

以下是测试时用到的 json 数据：

How to add more fields?

Is there a way to display additional fields?

E.g:
Name
Role
Image

I tried adding in /lib/components/TreeChart and then a rebuild, but it broke the css.

Uncaught runtime errors:

### ERROR
Cannot read properties of undefined (reading '_c')
TypeError: Cannot read properties of undefined (reading '_c')
    at Proxy.render (webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/vue-tree-chart/dist/TreeChart.common.js:1401:26)
    at renderComponentRoot (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:537:38)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4208:46)
    at ReactiveEffect.run (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:191:21)
    at setupRenderEffect (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4334:5)
    at mountComponent (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4116:5)
    at processComponent (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4075:9)
    at patch (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3690:11)
    at mountChildren (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3872:7)
    at mountElement (webpack-internal:///./node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3790:9)

Vue File

<template>
  <div>
    <TreeChart :json="treeData"></TreeChart>
  </div>
</template>

<script>
import TreeChart from 'vue-tree-chart'

export default {
  name: 'DependencyGraph',
  components: {
    TreeChart
  },
  data() {
    return {
      treeData: {
        name: 'root',
        image_url: 'https://static.refined-x.com/avat.jpg',
        class: ['rootNode'],
        children: [
          {
            name: 'children1',
            image_url: 'https://static.refined-x.com/avat1.jpg'
          },
          {
            name: 'children2',
            image_url: 'https://static.refined-x.com/avat2.jpg',
            mate: [{
              name: 'mate',
              image_url: 'https://static.refined-x.com/avat3.jpg'
            }],
            children: [
              {
                name: 'grandchild',
                image_url: 'https://static.refined-x.com/avat.jpg'
              },
              {
                name: 'grandchild2',
                image_url: 'https://static.refined-x.com/avat1.jpg'
              },
              {
                name: 'grandchild3',
                image_url: 'https://static.refined-x.com/avat2.jpg'
              }
            ]
          },
          {
            name: 'children3',
            image_url: 'https://static.refined-x.com/avat.jpg'
          }
        ]
      }
    }
  }
}
</script>

<style></style>

Additional Information

package.json

{
    "dependencies": {
    "@headlessui/vue": "^1.7.13",
    "@popperjs/core": "2.9.1",
    "@syncfusion/ej2-vue-richtexteditor": "^21.1.41",
    "@vueup/vue-quill": "^1.1.1",
    "axios": "^1.2.3",
    "core-js": "^3.8.3",
    "export-from-json": "^1.7.2",
    "jsontoxml": "^1.0.1",
    "lodash": "^4.17.21",
    "marked": "^4.2.12",
    "moment": "^2.29.4",
    "pnpm": "^7.27.0",
    "sanitize-html": "^2.11.0",
    "vue": "^3.2.13",
    "vue-axios": "^3.5.2",
    "vue-inline-svg": "^3.1.2",
    "vue-lodash": "^2.1.2",
    "vue-router": "^4.0.3",
    "vue-showdown": "^4.0.0",
    "vue-tree-chart": "^1.2.9",
    "vue3-datepicker": "^0.3.4",
    "vuex": "^4.0.0",
    "vuex-persistedstate": "^4.1.0",
    "yaml": "^2.2.2"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.21.3",
    "@types/jsontoxml": "^1.0.3",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "autoprefixer": "^10.4.13",
    "eslint": "^8.37.0",
    "eslint-plugin-html": "^7.1.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "husky": "^8.0.3",
    "lint-staged": "^13.0.2",
    "postcss": "^8.4.21",
    "prettier": "^2.8.1",
    "pretty-quick": "^3.1.3",
    "tailwindcss": "^3.3.1"
  }
}

Let me know if you need more info.