ECharts 旭日圖
旭日圖（Sunburst）由多層的環形圖組成，在數據結構上，內圈是外圈的父節點。因此，它既能像餅圖一樣表現局部和整體的占比，又能像矩形樹圖一樣表現層級關係。
ECharts 創建旭日圖很簡單，只需要在 series 配置項中聲明類型為 sunburst 即可，data 數據結構以樹形結構聲明，看下一個簡單的實例：
實例
series: {
type: 'sunburst',
data: [{
name: 'A',
value: 10,
children: [{
value: 3,
name: 'Aa'
}, {
value: 5,
name: 'Ab'
}]
}, {
name: 'B',
children: [{
name: 'Ba',
value: 4
}, {
name: 'Bb',
value: 2
}]
}, {
name: 'C',
value: 3
}]
}
};
顏色等樣式調整
默認情況下會使用全局調色盤 color 分配最內層的顏色，其餘層則與其父元素同色。
在旭日圖中，扇形塊的顏色有以下三種設置方式：
- 在 series.data.itemStyle 中設置每個扇形塊的樣式。
- 在 series.levels.itemStyle 中設置每一層的樣式。
- 在 series.itemStyle 中設置整個旭日圖的樣式。
上述三者的優先順序是從高到低的，也就是說，配置了 series.data.itemStyle 的扇形塊將會覆蓋 series.levels.itemStyle 和 series.itemStyle 的設置。
下麵，我們將整體的顏色設為灰色 #aaa，將最內層的顏色設為藍色 blue，將 Aa、B 這兩塊設為紅色 red。
實例
series: {
type: 'sunburst',
data: [{
name: 'A',
value: 10,
children: [{
value: 3,
name: 'Aa',
itemStyle: {
color: 'red'
}
}, {
value: 5,
name: 'Ab'
}]
}, {
name: 'B',
children: [{
name: 'Ba',
value: 4
}, {
name: 'Bb',
value: 2
}],
itemStyle: {
color: 'red'
}
}, {
name: 'C',
value: 3
}],
itemStyle: {
color: '#aaa'
},
levels: [{
// 留給數據下鑽的節點屬性
}, {
itemStyle: {
color: 'blue'
}
}]
}
};
按層配置樣式是一個很常用的功能，能夠很大程度上提高配置的效率。
數據下鑽
旭日圖默認支持數據下鑽，也就是說，當點擊了扇形塊之後，將以該扇形塊的數據作為根節點，進一步顯示該數據的細節。
在數據下鑽後，圖形的中間會出現一個用於返回上一層的圖形，該圖形的樣式可以通過 levels[0] 配置。
實例
name: 'Grandpa',
children: [{
name: 'Uncle Leo',
value: 15,
children: [{
name: 'Cousin Jack',
value: 2
}, {
name: 'Cousin Mary',
value: 5,
children: [{
name: 'Jackson',
value: 2
}]
}, {
name: 'Cousin Ben',
value: 4
}]
}, {
name: 'Father',
value: 10,
children: [{
name: 'Me',
value: 5
}, {
name: 'Brother Peter',
value: 1
}]
}]
}, {
name: 'Nancy',
children: [{
name: 'Uncle Nike',
children: [{
name: 'Cousin Betty',
value: 1
}, {
name: 'Cousin Jenny',
value: 2
}]
}]
}];
option = {
series: {
type: 'sunburst',
// highlightPolicy: 'ancestor',
data: data,
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
};
如果不需要數據下鑽功能，可以通過將 nodeClick 設置為 false 來關閉，也可以設為 'link'，並將 data.link 設為點擊扇形塊對應打開的鏈接。
高亮相關扇形塊
旭日圖支持滑鼠移動到某扇形塊時，高亮相關數據塊的操作，可以通過設置 highlightPolicy，包括以下幾種高亮方式：
- 'descendant'（默認值）：高亮滑鼠移動所在扇形塊與其後代元素；
- 'ancestor'：高亮滑鼠所在扇形塊與其祖先元素；
- 'self'：僅高亮滑鼠所在扇形塊；
- 'none'：不會淡化（downplay）其他元素。
上面提到的"高亮"，對於滑鼠所在的扇形塊，會使用 emphasis 樣式；對於其他相關扇形塊，則會使用 highlight 樣式。通過這種方式，可以很方便地實現突出顯示相關數據的需求。
具體來說，對於配置項：
itemStyle: {
color: 'yellow',
borderWidth: 2,
emphasis: {
color: 'red'
},
highlight: {
color: 'orange'
},
downplay: {
color: '#ccc'
}
}
highlightPolicy 為 'descendant':
實例
silent: true,
series: {
radius: ['15%', '95%'],
center: ['50%', '60%'],
type: 'sunburst',
sort: null,
highlightPolicy: 'descendant',
data: [{
value: 10,
children: [{
name: 'target',
value: 4,
children: [{
value: 2,
children: [{
value: 1
}]
}, {
value: 1
}, {
value: 0.5
}]
}, {
value: 2
}]
}, {
value: 4,
children: [{
children: [{
value: 2
}]
}]
}],
label: {
normal: {
rotate: 'none',
color: '#fff'
}
},
levels: [],
itemStyle: {
color: 'yellow',
borderWidth: 2
},
emphasis: {
itemStyle: {
color: 'red'
}
},
highlight: {
itemStyle: {
color: 'orange'
}
},
downplay: {
itemStyle: {
color: '#ccc'
}
}
}
};
setTimeout(function () {
myChart.dispatchAction({
type: 'sunburstHighlight',
targetNodeId: 'target'
});
});
highlightPolicy 為 'ancestor' :
實例
silent: true,
series: {
radius: ['15%', '95%'],
center: ['50%', '60%'],
type: 'sunburst',
sort: null,
highlightPolicy: 'ancestor',
data: [{
value: 10,
children: [{
value: 4,
children: [{
value: 2,
children: [{
name: 'target',
value: 1
}]
}, {
value: 1
}, {
value: 0.5
}]
}, {
value: 2
}]
}, {
value: 4,
children: [{
children: [{
value: 2
}]
}]
}],
label: {
normal: {
rotate: 'none',
color: '#fff'
}
},
levels: [],
itemStyle: {
color: 'yellow',
borderWidth: 2
},
emphasis: {
itemStyle: {
color: 'red'
}
},
highlight: {
itemStyle: {
color: 'orange'
}
},
downplay: {
itemStyle: {
color: '#ccc'
}
}
}
};
setTimeout(function () {
myChart.dispatchAction({
type: 'sunburstHighlight',
targetNodeId: 'target'
});
});
更多實例
更多旭日圖配置參考：https://www.echartsjs.com/zh/option.html#series-sunburst