{{ use: partial-label-rotate-tangential( prefix = ${prefix}, defaultRotate = “‘radial’” ) }}

The following example shows different rotate settings:

#${prefix} align(string) = ‘center’

Align of text, which can be 'left', 'center', or 'right'. Note that 'left' stands for inner side, and 'right' stands for outer side.

{{ if: ${prefix} === ‘##’ }} ~700x400 {{ else }} Same to label.align {{ /if }}

#${prefix} minAngle(number) = null

If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.

{{ use: partial-label( prefix = ${prefix}, defaultPosition = “‘inside’”, formatter = true, formatterExtra = { treePathInfo: { desc: ‘The ancestors of current node (including self)’, type: ‘Array’ } }, defaultShowLabel = “true”, noRotate = true, noAlign = true, minMargin = ${minMargin} ) }}

#${prefix} label(Object)

To specify the style of the label of the sector.

Priority：series.data.label > series.levels.label > series.label。

{{ use: partial-sunburst-label-helper( prefix = ${prefix} + ‘#’, minMargin = ${state} === ‘normal’ ) }}

#${prefix} labelLine(Object)

{{ use: partial-label-line( prefix = ‘#’ + ${prefix}, length2 = ${state} === ‘normal’, minTurnAngle = ${state} === ‘normal’, showAbove = ${state} === ‘normal’, smooth = ${state} === ‘normal’ ) }}

#${prefix} itemStyle(Object)

To specify the style of the sector of the sunburst chart.

You can specify the style of all sectors with series.itemStyle, or specify the style of each level of sectors with series.levels.itemStyle, or specify a specific style for each sector with series.data.itemStyle. The priority is from low to high, that is, if series.data.itemStyle is defined, it will override series.itemStyle and series.levels.itemStyle.

Priority：series.data.itemStyle > series.levels.itemStyle > series.itemStyle。

{{ use: partial-item-style( prefix = ${prefix} + ‘#’, useColorPalatte = true, defaultBorderWidth = 1, defaultBorderColor = “‘white’”, defaultOpacity = 1, hasInherit = ${state} === ‘emphasis’, useDecal = ${state} === ‘normal’ ) }}

{{ use: partial-sector-border-radius( prefix = “#” + ${prefix}, type = “sunburst” ) }}

{{ use: partial-sunburst-label-props( prefix = ${prefix}, state = ${state} ) }}

{{ use: partial-sunburst-itemStyle-props( prefix = ${prefix}, state = ${state} ) }}

{{ use: partial-sector-border-radius( prefix = “#” + ${prefix}, type = “sunburst” ) }}

series.sunburst(Object)

Sunburst Chart is composed of multiple pie charts. From the view of data structure, inner rings are the parent nodes of outer rings. Therefore, it can show the partial-overall relationship as Pie charts, and also level relation as Treemap charts.

For example:

~700x500

~700x700

Data Drilling

The sunburst chart supports data drilling by default, which means when a user clicks a sector, it will be used as the root node, and there will be a circle in the center used to return to the parent node. If data drilling is not needed, it can be disabled by series-sunburst.nodeClick.

type(string) = ‘sunburst’

{{ use: component-circular-layout( componentName = “Sunburst chart”, defaultRadius = “[0, ‘75%’]” ) }}

data(Array)

The data structure of series-sunburst.data is like tree. For example:

[{
    name: 'parent1',
    value: 10,          // value of parent node can be left unset, and sum of
                        // children values will be used in this case.
                        // If is set, and is larger than sum of children nodes,
                        // the reset can be used for other parts in parent.
    children: [{
        value: 5,
        name: 'child1',
        children: [{
            value: 2,
            name: 'grandchild1',
            itemStyle: {
                // every data can have its own itemStyle,
                // which will overwrites series.itemStyle and level.itemStyle
            },
            label: {
                // label style, the same to above
            }
        }]
    }, {
        value: 3,
        name: 'child2'
    }],
    itemStyle: {
        // itemStyle of parent1, which will not be inherited for children
    },
    label: {
        // label of parent1, which will not be inherited for children
    }
}, {
    name: 'parent2',
    value: 4
}]

value(number)

Value for each item. If contains children, value can be left unset, and sum of children values will be used in this case.

name(string)

Name displayed in each sector.

link(string)

Link address that redirects to when this sector is clicked. Only useful when series-sunburst.nodeClick is set to be 'link'.

See series-sunburst.data.target.

target(string) = ‘blank’

Like target attribute of HTML <a>, which can either be 'blank' or 'self'. See series-sunburst.data.link.

{{ use: partial-sunburst-state( prefix = “##”, state = ‘normal’ ) }}

emphasis

Emphasis state.

{{ use: partial-sunburst-state( prefix = “###”, state = ‘emphasis’ ) }}

blur

Blur state.

{{ use: partial-sunburst-state( prefix = “###”, state = ‘blur’ ) }}

select

Select state.

{{ use: partial-sunburst-state( prefix = “###”, state = ‘select’ ) }}

children(Array)

The children nodes defined recursively. The structure is the same as series-sunburst.data.

{{ use: partial-sunburst-state( prefix = “##”, state = ‘normal’ ) }}

nodeClick(boolean|string) = ‘rootToNode’

The action of clicking a sector, which can be:

false: nothing happens.
'rootToNode': use the clicked sector as root.
'link'：if link is set, the page will redirect to it.

sort(string|Function) = ‘desc’

Sorting method that sectors use based on value, which is the sum of children when not set. The default value 'desc' states for descending order, while it can also be set to be 'asc' for ascending order, or null for not sorting, or callback function like:

function(nodeA, nodeB) {
    return nodeA.getValue() - nodeB.getValue();
}

renderLabelForZeroData(boolean) = false

If there is no name, whether need to render it.

clockwise(boolean) = true

Whether the layout of sectors of sunburst chart is clockwise.

startAngle(number) = 90

The start angle, which range is [0, 360].

{{ use: partial-sunburst-label-props( prefix = “#”, state = ‘normal’ ) }}

labelLayout(Object|Function)

{{ use: partial-sunburst-itemStyle-props( prefix = “#”, state = ‘normal’ ) }}

emphasis

Configurations of emphasis state.

{{ use: partial-sunburst-state( prefix = “##”, state = ‘emphasis’ ) }}

blur

Configurations of blur state. Available when emphasis.focus is set.

{{ use: partial-sunburst-state( prefix = “##”, state = ‘blur’ ) }}

select

Configurations of select state. Available when selectedMode is set.

{{ use: partial-sunburst-state( prefix = “##”, state = ‘select’ ) }}

levels(Array)

Multiple levels

Sunburst chart has a leveled structure. To make it convenient, we provide a levels option, which is an array. The first element of it is for returning to parent node when data mining. The following elements are for levels from center to outside.

For example, if we don't want the data mining, and want to set the most inside sector to be red, and text to be blue, we can set the option like:

series: {
    // ...
    levels: [
        {
            // Blank setting for data mining
        },
        {
            // The most inside level
            itemStyle: {
                color: 'red'
            },
            label: {
                color: 'blue'
            }
        },
        {
            // The second level
        }
    ]
}

radius(Array)

The inner and outer radius of the current layer, noting that the radius of other layers will not be adaptive.

emphasis

Emphasis state.

{{ use: partial-sunburst-state( prefix = “###”, state = ‘emphasis’ ) }}

blur

Blur state.

{{ use: partial-sunburst-state( prefix = “###”, state = ‘blur’ ) }}

select

Select state.

{{ use: partial-sunburst-state( prefix = “###”, state = ‘select’ ) }}

{{ use: partial-animation( prefix = “#”, defaultAnimationEasing = “‘cubicOut’”, defaultAnimationDuration = 1000, defaultAnimationDurationUpdate = 500 ) }}