tower1229 / Vue Tree Chart
Licence: mit
A vue2 component to display tree chart
Stars: ✭ 351
Projects that are alternatives of or similar to Vue Tree Chart
Vue Json Pretty
A JSON tree view component that is easy to use and also supports data selection.
Stars: ✭ 477 (+35.9%)
Mutual labels: tree, vue-component
Vue Echarts V3
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)
Stars: ✭ 884 (+151.85%)
Mutual labels: chart, vue-component
Vue Trend Chart
Simple trend charts for Vue.js
Stars: ✭ 216 (-38.46%)
Mutual labels: chart, vue-component
React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (+54.7%)
Mutual labels: tree, chart
Vue Orgchart
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Stars: ✭ 182 (-48.15%)
Mutual labels: tree, chart
vue-virtualised
Blazing fast scrolling and updating for any amount of list and hierarchical data.
Stars: ✭ 18 (-94.87%)
Mutual labels: tree, vue-component
Orgchart
It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.
Stars: ✭ 2,325 (+562.39%)
Mutual labels: tree, chart
Tplink Energy Monitor
An energy monitoring dashboard for TP-Link smart plugs
Stars: ✭ 316 (-9.97%)
Mutual labels: chart
Aachartcore Kotlin
📈📊⛰⛰⛰An elegant modern declarative data visualization chart framework for Android . Extremely powerful, supports line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types.极其精美而又强大的 Android 数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图等各种类型的多达几十种的信息图图表,完全满足工作所需.
Stars: ✭ 332 (-5.41%)
Mutual labels: chart
Colormap Shaders
A collection of shaders to draw color maps.
Stars: ✭ 315 (-10.26%)
Mutual labels: chart
Mlib
Library of generic and type safe containers in pure C language (C99 or C11) for a wide collection of container (comparable to the C++ STL).
Stars: ✭ 321 (-8.55%)
Mutual labels: tree
Vue Drag Tree
🌴🌳a Vue's drag and drop tree component || 🌾Demo
Stars: ✭ 337 (-3.99%)
Mutual labels: tree
Vue Flow Form
Create conversational conditional-logic forms with Vue.js.
Stars: ✭ 315 (-10.26%)
Mutual labels: vue-component
Reports kit
Beautiful, interactive charts and tables for Ruby on Rails
Stars: ✭ 349 (-0.57%)
Mutual labels: chart
Flutter Candlesticks
Elegant OHLC Candlestick and Trade Volume charts for @Flutter
Stars: ✭ 318 (-9.4%)
Mutual labels: chart
React Dropdown Tree Select
Lightweight, accessible, customizable and fast Dropdown Tree Select component for React
Stars: ✭ 345 (-1.71%)
Mutual labels: tree
React Jsx Highcharts
Highcharts built with proper React components
Stars: ✭ 336 (-4.27%)
Mutual labels: chart
English | 中文
vue-tree-chart
🌳 A vue2 component to display tree chart
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
Copyright (c) 2017-present, 前端路上
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].