English | 中文
🌳 A vue2 component to display tree chart
npm i vue-tree-chart --savein template:
<TreeChart :json="treeData" />in script:
import TreeChart from "vue-tree-chart";
export default {
components: {
TreeChart
},
data() {
return {
treeData: {
...
}
}
}
...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"
}
]
}Click on the node triggered, receive the current node data as a parameter
npm run servenpm run build-bundleCopyright (c) 2017-present, 前端路上
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent