旭日圖（Sunburst）由多層的環形圖組成，在資料結構上，内圈是外圈的父節點。是以，它既能像餅圖一樣表現局部和整體的占比，又能像矩形樹圖一樣表現層級關系。
ECharts 建立旭日圖很簡單，隻需要在 series 配置項中聲明類型為 sunburst 即可，data 資料結構以樹形結構聲明，看下一個簡單的執行個體：
var option = {
series: {
type: 'sunburst',
data: [{
name: 'A',
value: 10,
children: [{
value: 3,
name: 'Aa'
}, {
value: 5,
name: 'Ab'
}]
}, {
name: 'B',
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。
name: 'Aa',
itemStyle: {
color: 'red'
}
}],
itemStyle: {
color: 'red'
}
}],
itemStyle: {
color: '#aaa'
},
levels: [{
// 留給資料下鑽的節點屬性
color: 'blue'
按層配置樣式是一個很常用的功能，能夠很大程度上提高配置的效率。
旭日圖預設支援資料下鑽，也就是說，當點選了扇形塊之後，将以該扇形塊的資料作為根節點，進一步顯示該資料的細節。
在資料下鑽後，圖形的中間會出現一個用于傳回上一層的圖形，該圖形的樣式可以通過 levels[0] 配置。
var data = [{
name: 'Grandpa',
children: [{
name: 'Uncle Leo',
value: 15,
children: [{
name: 'Cousin Jack',
value: 2
name: 'Cousin Mary',
value: 5,
name: 'Jackson',
name: 'Cousin Ben',
value: 4
}, {
name: 'Father',
value: 10,
name: 'Me',
value: 5
name: 'Brother Peter',
value: 1
}]
}, {
name: 'Nancy',
name: 'Uncle Nike',
name: 'Cousin Betty',
name: 'Cousin Jenny',
}];
option = {
// highlightPolicy: 'ancestor',
data: data,
radius: [0, '90%'],
label: {
rotate: 'radial'
}
如果不需要資料下鑽功能，可以通過将 nodeClick 設定為 false 來關閉，也可以設為 'link'，并将 data.link 設為點選扇形塊對應打開的連結。
旭日圖支援滑鼠移動到某扇形塊時，高亮相關資料塊的操作，可以通過設定 highlightPolicy，包括以下幾種高亮方式：
'descendant'（預設值）：高亮滑鼠移動所在扇形塊與其後代元素；
'ancestor'：高亮滑鼠所在扇形塊與其祖先元素；
'self'：僅高亮滑鼠所在扇形塊；
'none'：不會淡化（downplay）其他元素。
上面提到的"高亮"，對于滑鼠所在的扇形塊，會使用 emphasis 樣式；對于其他相關扇形塊，則會使用 highlight 樣式。通過這種方式，可以很友善地實作突出顯示相關資料的需求。
具體來說，對于配置項：
highlightPolicy 為 'descendant':
silent: true,
radius: ['15%', '95%'],
center: ['50%', '60%'],
sort: null,
highlightPolicy: 'descendant',
name: 'target',
value: 4,
children: [{
value: 2,
children: [{
value: 1
}]
}, {
value: 1
value: 0.5
}]
value: 4,
value: 2
normal: {
rotate: 'none',
color: '#fff'
levels: [],
color: 'yellow',
borderWidth: 2
emphasis: {
highlight: {
color: 'orange'
downplay: {
color: '#ccc'
setTimeout(function () {
myChart.dispatchAction({
type: 'sunburstHighlight',
targetNodeId: 'target'
});
});
highlightPolicy 為 'ancestor' :
highlightPolicy: 'ancestor',
name: 'target',
旭日圖 1
旭日圖 2
更多旭日圖配置參考：https://www.echartsjs.com/zh/option.html#series-sunburst