ECharts Sunburst Chart

A Sunburst chart is composed of multiple layers of ring charts. In terms of data structure, the inner ring is the parent node of the outer ring. Therefore, it can not only show the proportion of parts to the whole like a pie chart, but also display hierarchical relationships like a treemap.

Creating a sunburst chart in ECharts is very simple. You only need to declare the type in the series configuration item assunburstThat's all. The data structure is declared as a tree structure. 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
}]
}
};

Try it Yourself »

Adjust colors and other styles

By default, the global palette color is used to assign colors to the innermost layer, while the other layers use the same color as their parent elements.

In a sunburst chart, the colors of sector blocks can be set in the following three ways:

In series.data.itemStyle, set the style for each sector.
In series.levels.itemStyle, set the style for each level.
Set the style of the entire sunburst chart in series.itemStyle.

The priority of the above three is from high to low, that is, sectors configured with series.data.itemStyle will override the settings in series.levels.itemStyle and series.itemStyle.

Next, we set the overall color to gray#aaaSet the color of the innermost layer to blue.blueand set the two blocks Aa and B to redred。

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: [{
// Node attributes for data drill-down
}, {
itemStyle: {
color: 'blue'
}
}]
}
};

Try it Yourself »

Configuring styles by layer is a very common feature, which can greatly improve configuration efficiency.

Data Drill-down

The sunburst chart supports data drill-down by default. That is, after clicking a sector block, the data of that sector block is used as the root node to further display the details of the data.

After data drill-down, a graphic used to return to the previous level appears in the middle 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 the data drill-down feature is not needed, you can disable it by setting nodeClick to false, or set it to 'link' and set data.link to the link that opens when the sector block is clicked.

Highlight related sector blocks

The sunburst chart supports highlighting related data blocks when the mouse moves over a sector. You can set highlightPolicy, which includes the following highlighting modes:

'descendant' (default value): highlights the sector block under the mouse and its descendant elements;
'ancestor': highlights the sector block under the mouse and its ancestor elements;
'self': highlights only the sector block under the mouse;
'none': will not downplay other elements.

The "highlight" mentioned above uses the emphasis style for the sector under the mouse, and the highlight style for other related sectors. In this way, you can easily implement the need to highlight related data.

Specifically, for the configuration options:

itemStyle: {
    color: 'yellow',
    borderWidth: 2,
    emphasis: {
        color: 'red'
    },
    highlight: {
        color: 'orange'
    },
    downplay: {
        color: '#ccc'
    }
}

highlightPolicy is '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'
});
});

Try it Yourself »

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: {
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'
});
});

Try it Yourself »

More Examples

For more sunburst chart configuration references:https://www.echartsjs.com/zh/option.html#series-sunburst

other extensions