The rising Sun Map (Sunburst) consists of a multi-layer ring graph. In the data structure, the inner circle is the parent node of the outer circle. Therefore, it can represent not only the proportion of the part and the whole like a pie chart, but also the hierarchical relationship like a rectangular tree.
It is easy for ECharts to create a rising sun map, as long as you use the
series
the type declared in the configuration item is
sunburst
can be done. The
data
data structure is declared in a tree structure, see the next simple example:
9.12.1. 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
}]
}
};
Color and other style adjustments ¶
The global palette is used by default
color
assign the innermost layer color, and the rest of the layer is the same color as its parent element.
In the rising sun chart, the color of the fan block can be set in the following three ways:
-
In
series.data.itemStyleset the style for each sector block in the. -
In
series.levels.itemStyleset the style for each layer in. -
In
series.itemStyleset the style of the entire rising sun map in the.
The priority of the above three is from high to low, that is to say, the
series.data.itemStyle
the fan-shaped block will cover
series.levels.itemStyle
and
series.itemStyle
the settings.
Next, we set the overall color to gray.
#aaa
to set the innermost color to blue
blue
set Aa and B to red
red
.
9.12.2. 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 reserved for data drilling down
}, {
itemStyle: {
color: 'blue'
}
}]
}
};
Configuring styles by layer is a common feature, which can greatly improve the efficiency of configuration.
Data drilldown ¶
The rising sun map supports data drilldown by default, that is, when a fan block is clicked, the data of the fan block will be used as the root node tofurther display the details of the data.
After the data is drilled down, a drawing appears in the middle of the drawing to return to the upper layer, and the style of the drawing can be passed through the
levels[0]
configuration.
9.12.3. 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 you do not need the data drilldown feature, you can set the
nodeClick
set to
false
to close, or you can set it to ‘link’, and set the
data.link
Set to click the fan-shaped block corresponding to the open link.
Highlight related sector block ¶
The rising sun map supports the operation of highlighting related data blocks when the mouse is moved over a fan-shaped block, you can set the
highlightPolicy
, including the following highlighting methods:
-
‘descendant’ (default): highlight the sector block in which the mouse moves and its descendant elements
-
Ancestor’: highlights the fan-shaped block where the mouse is located and its ancestral elements
-
‘self’: only highlights the sector block where the mouse is located
-
‘none’: does not downplay other elements.
The “highlight” mentioned above will be used for the fan-shaped block where the mouse is located.
emphasis
style; for other related sector blocks, use the
highlight
style. In this way, the need to highlight relevant data can be easily realized.
Specifically, for configuration items:
itemStyle: {
color: 'yellow',
borderWidth: 2,
emphasis: {
color: 'red'
},
highlight: {
color: 'orange'
},
downplay: {
color: '#ccc'
}
}
highlightPolicy
for ‘descendant’:
9.12.4. 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
for ‘ancestor’:
9.12.5. 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'
});
});
More Instance ¶
For more information on the configuration of the rising sun, please see https://www.echartsjs.com/zh/option.html#series-sunburst .