樹(shù)圖

樹(shù)圖主要用來(lái)表達(dá)關(guān)系結(jié)構(gòu)。
樹(shù)圖的端點(diǎn)也收symbol的調(diào)節(jié)
樹(shù)圖的特有屬性：

1. 樹(shù)圖的方向： layout、orient
2. 子節(jié)點(diǎn)收起展開(kāi)：initialTreeDepth、expandAndCollapse
3. 葉子節(jié)點(diǎn)設(shè)置： leaves
4. 操作設(shè)置：roam
5. 線條：除了lineStyle可以調(diào)節(jié)線條外，還有edgeShape調(diào)節(jié)形狀，edgeForkPosition調(diào)節(jié)樹(shù)杈位置。

沒(méi)有子節(jié)點(diǎn)的要葉子節(jié)點(diǎn)leave

樹(shù)圖中的data只能有一個(gè)數(shù)據(jù)

 let options = {tooltip: {show: true,},series: [{type: "tree",data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

layout：樹(shù)圖的布局，有 正交 和 徑向 兩種，默認(rèn)情況下是’orthogonal’正交布局，'radial’是徑向布局。

 let options = {tooltip: {show: true,},series: [{type: "tree",layout: "radial", //"orthogonal"data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

orient:在 layout = ‘orthogonal’ 的時(shí)候，該配置項(xiàng)才生效，在水平方向的排列方式。
取值有’LR’ （從左到右）, ‘RL’（從右到左）, ‘TB’（從上到下）, ‘BT’（從下到上）。
initialTreeDepth：樹(shù)圖初始展開(kāi)的層級(jí)（深度）。如果設(shè)置為 -1 或者 null 或者 undefined，所有節(jié)點(diǎn)都將展開(kāi)。
expandAndCollapse：子樹(shù)折疊和展開(kāi)的交互，默認(rèn)打開(kāi) 。折疊后是否可以打開(kāi)。

 let options = {tooltip: {show: true,},series: [{type: "tree",layout: "orthogonal", //"radial"orient: "BT",initialTreeDepth: 1,expandAndCollapse: true,data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],
};

roam:是否開(kāi)啟鼠標(biāo)縮放和平移漫游。
葉子節(jié)點(diǎn)的設(shè)置

 let options = {tooltip: {show: true,},series: [{type: "tree",layout: "orthogonal", //"radial"orient: "BT",initialTreeDepth: 1,expandAndCollapse: true,roam: true,leaves: {label: {show: false,},},data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

edgeShape:該配置項(xiàng)只在 正交布局 下有效。樹(shù)圖在 正交布局 下，邊的形狀
edgeForkPosition： 正交布局下當(dāng)邊的形狀是折線時(shí)，子樹(shù)中折線段分叉的位置。子節(jié)點(diǎn)在分叉處的位置

 let options = {tooltip: {show: true,},series: [{type: "tree",layout: "orthogonal", //"radial"orient: "BT",initialTreeDepth: 1,expandAndCollapse: true,roam: true,leaves: {label: {show: false,},},lineStyle: {color: "blue",},edgeShape: "polyline", // curveedgeForkPosition: "80%",data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

矩形樹(shù)圖

矩形樹(shù)圖強(qiáng)調(diào)包含關(guān)系，相對(duì)于樹(shù)圖，更能看出誰(shuí)的占比大。

矩形樹(shù)圖內(nèi)的矩形受itemStyle的調(diào)節(jié)。
矩形樹(shù)圖特有的屬性：

1. 矩形比例：squareRtio
2. 子節(jié)點(diǎn)相關(guān)的： leafDepth,drillDownIcon
3. 操作設(shè)置: roam,nodeClick
4. 顏色相關(guān)的設(shè)置：colorAlpha,colorSaturation,colorMappingBy
5. 過(guò)小數(shù)據(jù)隱藏：visibleMin,childrenVisibleMin
6. 面包屑：breadcrumb
7. 特殊的label:upperLabel
8. 數(shù)據(jù)維度與levels-data里的value的數(shù)組寫(xiě)法,visualDimension

矩形數(shù)組必須有value

 let options = {tooltip: {show: true,},series: [{type: "treemap",data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

squareRatio:期望矩形長(zhǎng)寬比率,將矩形比例設(shè)為1，并不一定就是正方形，只是往正方形的比例靠。

 let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{ name: "c1", value: 3 },{ name: "c2", value: 3 },],},],},],},],};

leafDepth：下鉆，設(shè)置初始展示的節(jié)點(diǎn)。
drillDownIcon：當(dāng)節(jié)點(diǎn)可以下鉆時(shí)的提示符。只能是字符。

默認(rèn)情況下的下鉆提示符

修改下鉆提示符

 let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,leafDepth: 1,drillDownIcon: "+",data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{name: "c1",value: 3,children: [{name: "d1",value: 2,children: [{ name: "e1", value: 1 },{ name: "e2", value: 1 },],},{ name: "d2", value: 1 },],},{ name: "c2", value: 3 },],},],},],},],
};

nodeClick: “l(fā)ink”, //點(diǎn)擊節(jié)點(diǎn)后的行為false “zoomToNode”
colorAlpha: [0.3, 1],本系列默認(rèn)的顏色透明度選取范圍,data中的value越小，顏色就越透明。

 let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,leafDepth: 1,drillDownIcon: "+",nodeClick: "link", //點(diǎn)擊節(jié)點(diǎn)后的行為false  "zoomToNode"colorAlpha: [0.3, 1],data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{name: "c1",value: 3,children: [{name: "d1",value: 2,children: [{ name: "e1", value: 1 },{ name: "e2", value: 1 },],},{ name: "d2", value: 1 },],},{ name: "c2", value: 3 },],},],},],},],};

colorMappingBy：表示同一層級(jí)節(jié)點(diǎn)，在顏色列表中以什么樣的方式選擇color
breadcrumb:對(duì)面包屑的設(shè)置。

 let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,leafDepth: 1,drillDownIcon: "+",nodeClick: "link",colorAlpha: [0.3, 1],colorMappingBy: "value",breadcrumb: {show: false,},data: [{name: "a",value: 10,children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{name: "c1",value: 3,children: [{name: "d1",value: 2,children: [{ name: "e1", value: 1 },{ name: "e2", value: 1 },],},{ name: "d2", value: 1 },],},{ name: "c2", value: 3 },],},],},],},],
};

upperLabel 用于顯示矩形的父節(jié)點(diǎn)的標(biāo)簽

visualDimension :支持對(duì)數(shù)據(jù)其他維度進(jìn)行視覺(jué)映射。每個(gè)節(jié)點(diǎn)的 value 都可以是數(shù)組，visualDimension 指定使用的是數(shù)組的哪一項(xiàng)。
levels:可以對(duì)每個(gè)節(jié)點(diǎn)進(jìn)行配置

let options = {tooltip: {show: true,},series: [{type: "treemap",squareRatio: 1,leafDepth: 1,drillDownIcon: "+",nodeClick: "link", //點(diǎn)擊節(jié)點(diǎn)后的行為false  "zoomToNode"//   colorAlpha: [0.3, 1],colorMappingBy: "value",breadcrumb: {show: false,},upperLabel: {show: true,},// visualDimension: 1,levels: [{//給第一層配color: ["red"],},{//給第二層配color: ["yellow", "green"],},],data: [{name: "a",value: 10, // [10, 20]children: [{ name: "b1", value: 4 },{name: "b2",value: 6,children: [{name: "c1",value: 3,children: [{name: "d1",value: 2,children: [{ name: "e1", value: 1 },{ name: "e2", value: 1 },],},{ name: "d2", value: 1 },],},{ name: "c2", value: 3 },],},],},],},],};

關(guān)系圖

關(guān)系圖先通過(guò)data畫(huà)出點(diǎn)，然后再通過(guò)links數(shù)組指定連接關(guān)系。
1.關(guān)系圖的節(jié)點(diǎn)收symbol的調(diào)節(jié)
2.特殊的屬性
關(guān)系圖連線相關(guān)的 edgeSymbol,edgeSymbolSize,edgeLabel
布局相關(guān)的 layout, circular
操作相關(guān) roam

let options = {tooltip: {show: true,},series: [{type: "graph",data: [{value: 10,name: "張三",x: 40,y: 40,},{value: 30,name: "李四",x: 50,y: 100,},{value: 20,name: "王五",x: 80,y: 40,},],links: [{source: "張三",target: "李四",},],},],};

然后將設(shè)置 xAxis，xAxis，指定坐標(biāo)系，通過(guò)下表來(lái)連接

let options = {tooltip: {show: true,},xAxis: {type: "category",data: ["d1", "d2", "d3"],},yAxis: {},series: [{type: "graph",symbolSize: 20,coordinateSystem: "cartesian2d",data: [["d1", 20],["d2", 30],["d3", 50],],links: [{source: 0,target: 1,},],},],};

?；鶊D

用來(lái)表示流向的，可以看作是關(guān)系圖的一種圖形化表達(dá)，跟關(guān)系圖一樣，通過(guò)設(shè)置data來(lái)定義位置，然后用links連接代表流向。

?；鶊D的節(jié)點(diǎn)通過(guò)itemStyle來(lái)調(diào)節(jié)，?；鶊D的連接邊受lineStyle調(diào)節(jié)。

特殊的屬性：
朝向: orient
桑基矩形節(jié)點(diǎn)相關(guān) nodeWidth,nodeGap

 let options = {tooltip: {show: true,},series: [{type: "sankey",data: [{name: "生產(chǎn)",},{name: "銷售",},{name: "出口",},{name: "庫(kù)存",},],links: [{source: "生產(chǎn)",target: "銷售",value: 100,},{source: "生產(chǎn)",target: "出口",value: 50,},{source: "生產(chǎn)",target: "庫(kù)存",value: 40,},],},],};

nodeWidth:?；鶊D中每個(gè)矩形節(jié)點(diǎn)的寬度
nodeGap:桑基圖中每一列任意兩個(gè)矩形節(jié)點(diǎn)之間的間隔

  let options = {tooltip: {show: true,},series: [{type: "sankey",orient: "vertical",nodeWidth: 50,nodeGap: 8,data: [{name: "生產(chǎn)",},{name: "銷售",},{name: "出口",},{name: "庫(kù)存",},],links: [{source: "生產(chǎn)",target: "銷售",value: 100,},{source: "生產(chǎn)",target: "出口",value: 50,},{source: "生產(chǎn)",target: "庫(kù)存",value: 40,},],},],};

日歷圖

日歷圖更像一種坐標(biāo)系
calendar:日歷坐標(biāo)系組件
range:日歷坐標(biāo)的范圍

 let options = {tooltip: {show: true,},calendar: {range: ["2024-5"],width: 300,height: 300,},series: [{}],};

日歷圖中的數(shù)據(jù)以graph關(guān)系圖為例，可以是其他的圖。

 let options = {tooltip: {show: true,},calendar: {range: ["2024-5"],width: 300,height: 380,orient: "vertical",},series: [{type: "graph",coordinateSystem: "calendar",data: [["2024-5-1", 10],["2024-5-4", 40],["2024-5-7", 20],["2024-5-11", 30],["2024-5-21", 10],["2024-5-22", 10],],links: [{source: 0,target: 1,},],},],};