ECharts Sunburst Diagram
The Sunburst diagram consists of multiple layers of circular charts, where the inner circle is the parent node of the outer circle in terms of data structure. Therefore, it can represent both the proportion of parts to the whole like a pie chart and the hierarchical relationship like a treemap.
Creating a Sunburst diagram with ECharts is straightforward; you just need to declare the type as sunburst in the series configuration, and the data structure should be declared in a tree format. Here's a simple example:
Example
var option = {
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
}]
}
};
Style Adjustments for Colors, etc.
By default, the innermost layer uses the global color palette color, while the other layers inherit the color from their parent elements.
In a Sunburst diagram, the color of the sectors can be set in three ways:
- Set the style for each sector in
series.data.itemStyle. - Set the style for each level in
series.levels.itemStyle. - Set the style for the entire Sunburst diagram in
series.itemStyle.
The priority of these settings decreases from top to bottom, meaning sectors configured in series.data.itemStyle will override settings in series.levels.itemStyle and series.itemStyle.
Below, we set the overall color to gray #aaa, the innermost layer to blue blue, and sectors Aa and B to red red.
Example
var option = {
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: [{
// Reserved for data drill-down node attributes
}, {
itemStyle: {
color: 'blue'
}
}]
}
};
Configuring styles by level is a very useful feature that significantly improves configuration efficiency.
Data Drill-Down
The sunburst chart supports data drill-down by default, which means that when a sector is clicked, the data of that sector becomes the root node, and further details of that data are displayed.
After drilling down, a graphic for returning to the previous level will appear in the center of the chart, and the style of this graphic can be configured through levels[0].
Example
var data = [{
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'
}
}
};
If the drill-down feature is not needed, it can be turned off by setting nodeClick to false, or set to 'link' and set data.link to the corresponding link to be opened when the sector is clicked.
Highlight Related Sectors
The sunburst chart supports highlighting related data blocks when the mouse moves over a sector. This can be configured through highlightPolicy, including the following highlight methods:
'descendant' (default): Highlights the sector under the mouse and its descendant elements;
'ancestor': Highlights the sector under the mouse and its ancestor elements;
'self': Highlights only the sector under the mouse;
'none': Does not downplay other elements.
The "highlight" mentioned above, for the sector under the mouse, uses the emphasis style; for other related sectors, it uses the highlight style. This method allows for easy highlighting of related data.
Specifically, for the configuration:
itemStyle: {
color: 'yellow',
borderWidth: 2,
emphasis: {
color: 'red'
},
highlight: {
color: 'orange'
},
downplay: {
color: '#ccc'
}
}
highlightPolicy is set to 'descendant':
Example
option = {
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 is 'ancestor':
## Example
option = { 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: {
```json
{
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'
});
});
More Examples
For more sunburst chart configurations, refer to: https://www.echartsjs.com/en/option.html#series-sunburst