bc-chart-tree.md

bc-chart-tree

Tree diagram (ECharts)

Quick Start

<bc-chart-tree data='{"name":"Root","children":[{"name":"Child A"},{"name":"Child B","children":[{"name":"Grandchild"}]}]}' />

Props

Prop	Type	Default	Description
data	string (JSON)	'[]'	Chart data — hierarchical {name, children?}
chart-title	string	''	Chart title
colors	string (JSON)	''	Color palette ["#4f46e5","#06b6d4"]
legend	boolean	true	Show legend
tooltip-enabled	boolean	true	Show tooltip
animate	boolean	true	Enable animation
height	string	'300px'	Chart height
width	string	'100%'	Chart width
loading	boolean	false	Show loading overlay
data-source	string	''	Remote data URL
fetch-headers	string	''	Custom fetch headers (JSON)
refresh-interval	number	0	Auto-refresh interval (ms)
theme	string	''	ECharts theme ('dark' or custom JSON)
renderer	string	'canvas'	Renderer ('canvas' or 'svg')
toolbox	boolean	false	Show toolbox (save, zoom, restore)
locale	string	''	ECharts locale

Type-Specific Props

Prop	Type	Default	Description
layout	string	'orthogonal'	Layout type ('orthogonal' or 'radial')
orient	string	'LR'	Orientation ('LR', 'RL', 'TB', 'BT')

Data Format

{
  "name": "CEO",
  "children": [
    {
      "name": "CTO",
      "children": [
        {"name": "Dev Lead"},
        {"name": "QA Lead"}
      ]
    },
    {
      "name": "CFO",
      "children": [
        {"name": "Accounting"},
        {"name": "Finance"}
      ]
    }
  ]
}

Events

Event	Payload
lcChartClick	{name, value, dataIndex}
lcChartHover	{name, value, dataIndex}
lcChartLegendSelect	{name, selected}
lcChartDataZoom	{start, end}
lcChartReady	void

Methods

Method	Returns	Description
updateData(data)	Promise	Update chart data
setData(data)	Promise	Alias for updateData
refresh()	Promise	Re-fetch or re-render
resize()	Promise	Resize chart
exportImage(format?)	Promise	Export as image (png/jpeg/svg)
getChartInstance()	Promise	Get raw ECharts instance

See theming, data-fetching.