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 The global palette is used by default In the rising sun chart, the color of the fan block can be set in the following three ways: In In In The priority of the above three is from high to low, that is to say, the Next, we set the overall color to gray. Configuring styles by layer is a common feature, which can greatly improve the efficiency of configuration. 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 If you do not need the data drilldown feature, you can set the 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 ‘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. Specifically, for configuration items: For more information on the configuration of the rising sun, please see https://www.echartsjs.com/zh/option.html#series-sunburst .
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 ¶
color
assign the innermost layer color, and the rest of the layer is the same color as its parent element.
series.data.itemStyle
set the style for each sector block in the.
series.levels.itemStyle
set the style for each layer in.
series.itemStyle
set the style of the entire rising sun map in the.
series.data.itemStyle
the fan-shaped block will cover
series.levels.itemStyle
and
series.itemStyle
the settings.
#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'
}
}]
}
};
Data drilldown ¶
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'
}
}
};
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 ¶
highlightPolicy
, including the following highlighting methods:
emphasis
style; for other related sector blocks, use the
highlight
style. In this way, the need to highlight relevant data can be easily realized.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 ¶