YouTipEcharts Sunburst
Sunburst is composed of multiple layers of pie charts. In data structure, the inner circle is the parent of the outer circle. Therefore, it can not only show the proportion of part to whole like a pie chart, but also show hierarchical relationships like a treemap.
Creating a Sunburst in ECharts is very simple, you only need to declare the type as 'sunburst' in the series configuration, and the data structure is declared in a tree structure. Let's look at 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
}]
}
};
[Try it yourself »](#)
* * *
## Color and Style Settings
By default, the global palette color is used to assign colors to the innermost layer, and the other layers use the same color as their parent element.
In Sunburst, there are three ways to set the color of sector blocks:
* Set the style for each sector block in series.data.itemStyle.
* Set the style for each layer in series.levels.itemStyle.
* Set the style for the entire Sunburst in series.itemStyle.
The priority of the above three methods is from high to low. That is, the sector block configured with series.data.itemStyle will override the settings of series.levels.itemStyle and series.itemStyle.
Below, we will set the overall color to gray #aaa, set the innermost layer color to blue **blue**, and set blocks 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 properties
},{
itemStyle:{
color:'blue'
}
}]
}
};
[Try it yourself »](#)
Configuring styles by layer is a very common feature that can greatly improve configuration efficiency.
* * *
## Data Drill-down
Sunburst supports data drill-down by default. That is, when a sector block is clicked, the data of that sector block will be used as the root node to further display the details of the data.
After drilling down, a graphic for returning to the previous level will appear in the center of the chart. The style of this graphic can be configured through levels.
## 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'
}
}
};
[Try it yourself »](#)
If you don't need the data drill-down function, you can disable it by setting nodeClick to false, or set it to 'link' and set data.link to the URL that will be opened when clicking on the sector block.
* * *
## Highlighting Related Sectors
Sunburst supports highlighting related data blocks when the mouse moves over a sector block. This can be configured through highlightPolicy, including the following highlighting methods:
* 'descendant' (default): highlight the sector block where the mouse is located and its descendant elements;
* 'ancestor': highlight the sector block where the mouse is located and