9.12. ECharts rising sun map

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.itemStyle set the style for each sector block in the.
In series.levels.itemStyle set the style for each layer in.
In series.itemStyle set 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 .