I have a sunburst graph in echarts which looks something like this:
I wanted to modify this so there is one single button and as you click on it, it displays all the nodes one by one, so first the year then the months, then days and so on.
Here is the code for my graph:
var data = [
{
"name": 2017,
"children": [
{
"name": "Jun",
"children": [
{
"name": 20,
"children": [
{
"name": "13:55",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": " path rem. w/o depr",
"original": "api-path-rem.-w/o-deprecation",
"value": 5,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 5
},
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": " title modified",
"original": "api title modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": " description modified",
"original": "api description modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": "path added",
"original": "path added",
"value": 3,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 5
}
],
"itemStyle": {},
"value": 10
}
],
"day": 20,
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": 26,
"children": [
{
"name": "12:11",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": " path rem. w/o depr",
"original": "api-path-rem.-w/o-deprecation",
"value": 5,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 5
},
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": " title modified",
"original": "api title modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": " description modified",
"original": "api description modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": "path added",
"original": "path added",
"value": 5,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 7
}
],
"itemStyle": {
"color": "#fff"
},
"value": 12
}
],
"day": 26,
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": 28,
"children": [
{
"name": "9:28",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": "summ. of method POST modified",
"original": "summ. of method POST modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 1
}
],
"itemStyle": {
"color": "#fff"
},
"value": 1
}
],
"day": 28,
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": "10:30",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": "new required req param",
"original": "new-required-request-parameter",
"value": 6,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
},
{
"name": "req param rem.",
"original": "request-parameter-rem.",
"value": 6,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 12
}
],
"itemStyle": {
"color": "#fff"
},
"value": 12
}
],
"day": 28,
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jun",
"year": 2017,
"itemStyle": {
"color": ""
},
"value": {
"$numberDouble": "NaN"
}
}
],
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": "Jul",
"children": [
{
"name": 14,
"children": [
{
"name": "10:57",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": "new required req param",
"original": "new-required-request-parameter",
"value": 1,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
},
{
"name": "req param rem.",
"original": "request-parameter-rem.",
"value": 4,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 5
}
],
"itemStyle": {
"color": "#fff"
},
"value": 5
}
],
"day": 14,
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": 17,
"children": [
{
"name": "13:11",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": " path rem. w/o depr",
"original": "api-path-rem.-w/o-deprecation",
"value": 1,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 1
},
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": "path added",
"original": "path added",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 1
}
],
"itemStyle": {
"color": "#fff"
},
"value": 2
}
],
"day": 17,
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
},
{
"name": "16:22",
"children": [
{
"name": "1.0.0",
"children": [],
"itemStyle": {
"color": "#fff"
}
}
],
"day": 17,
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
},
"value": {
"$numberDouble": "NaN"
}
},
{
"name": 27,
"children": [
{
"name": "12:29",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": " path rem. w/o depr",
"original": "api-path-rem.-w/o-deprecation",
"value": 5,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 5
},
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": "path added",
"original": "path added",
"value": 5,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 5
}
],
"itemStyle": {
"color": "#fff"
},
"value": 10
}
],
"day": 27,
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"month": "Jul",
"year": 2017,
"itemStyle": {
"color": ""
}
}
],
"year": 2017,
"itemStyle": {
"color": ""
}
},
],
"itemStyle": {
"color": ""
}
},
{
"name": 2018,
"children": [
{
"name": "May",
"children": [
{
"name": 15,
"children": [
{
"name": "16:32",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": " title modified",
"original": "api title modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": " description modified",
"original": "api description modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": "path added",
"original": "path added",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
},
{
"name": "summ. of method GET modified",
"original": "summ. of method GET modified",
"value": 3,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 6
}
],
"itemStyle": {
"color": "#fff"
},
"value": 6
}
],
"day": 15,
"month": "May",
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"month": "May",
"year": 2018,
"itemStyle": {
"color": ""
}
},
{
"name": 21,
"children": [
{
"name": "10:39",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "NBC",
"itemStyle": {
"color": "#7FB3D5"
},
"children": [
{
"name": " title modified",
"original": "api title modified",
"value": 1,
"itemStyle": {
"color": "#7FB3D5"
},
"breaking": false
}
],
"value": 1
}
],
"itemStyle": {
"color": "#fff"
},
"value": 1
}
],
"day": 21,
"month": "May",
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"month": "May",
"year": 2018,
"itemStyle": {
"color": ""
}
},
],
"year": 2018,
"itemStyle": {
"color": ""
}
},
{
"name": "Aug",
"children": [
{
"name": 1,
"children": [
{
"name": "8:20",
"children": [
{
"name": "1.0.0",
"children": [
{
"name": "BC",
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"children": [
{
"name": "req param rem.",
"original": "request-parameter-rem.",
"value": 8,
"itemStyle": {
"color": "#ad213e"
},
"collapsed": true,
"breaking": true
}
],
"value": 8
}
],
"itemStyle": {
"color": "#fff"
},
"value": 8
}
],
"day": 1,
"month": "Aug",
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"month": "Aug",
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"year": 2018,
"itemStyle": {
"color": ""
}
}
],
"itemStyle": {
"color": ""
}
},
{
"name": 2021,
"children": [
{
"name": "Feb",
"children": [
{
"name": 11,
"children": [
{
"name": "14:2:9",
"children": [
{
"name": "1.0.0",
"children": [],
"itemStyle": {
"color": "#fff"
}
}
],
"day": 11,
"month": "Feb",
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
}
},
{
"name": "14:8:14",
"children": [
{
"name": "1.0.0",
"children": [],
"itemStyle": {
"color": "#fff"
}
}
],
"day": 11,
"month": "Feb",
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
}
},
{
"name": "15:59:56",
"children": [
{
"name": "1.0.0",
"children": [],
"itemStyle": {
"color": "#fff"
}
}
],
"day": 11,
"month": "Feb",
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
}
}
],
"month": "Feb",
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
},
"value": {
"$numberDouble": "NaN"
}
}
],
"year": 2021,
"itemStyle": {
"color": "#a8a8a8"
}
}
],
"itemStyle": {
"color": "#a8a8a8"
}
}
];
option = {
title: {
textStyle: {
fontSize: 24,
fontFamily: 'Times New Roman',
align: 'center'
},
subtextStyle: {
align: 'center',
fontSize: 18,
fontWeight: 'bold',
fontFamily: 'Times New Roman',
}
},
series: {
type: 'sunburst',
data: data,
width:2000,
height:1600,
radius: [0, '60%'],
sort: undefined,
label: {
formatter: '{b}',
position: 'inside',
distance: 0,
rotate: 'radial'
},
levels: [
{},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
itemStyle: {
colorAlpha: 0
}
},
{
label: {
formatter: '{b}',
position: 'outside',
distance: 2, // Adjust the distance to increase the gap between the chart and the labels
depth: 0, // Adjust this value to set the depth level for labels
rotate: 'radial' // Rotate the labels around the sunburst chart
}
}
]
}
};
Is there a way this could be achieved, I am not very good with javascript so any suggestions or ideas will be greatly appreciated.
ECharts currently does not provide a straightforward way to set the maximum number of displayed levels. This could actually be addressed... I initially wrote a script to modify your array by removing unnecessary levels, but I realized that I was not heading in the right direction because - unfortunately - you did not provide the itemStyle.color and value values for each level, which makes it impossible for ECharts to interpret the array correctly even if I remove the last level (children) where this was given.
If you were to provide itemStyle.color and value values for each element, you could simply override the value of option.series.data with the press of a button and re-render the chart.
Important! Every element needs to have a value and itemStyle.color assigned to it, otherwise echarts will not be able to display the specific level where this is not fulfilled.
const data = [...]
const option = {...}
let level = 0
const getDataToLevel = (data, currLevel) => {
// need a procedure that returns the children up to a certain level, and then stops
if (level <= 0) {
return data.map(obj => ({
...obj,
children: []
}));
}
let result = [];
for (let obj of data) {
let newObj = {
...obj,
children: Array.isArray(obj.children) ? getDataToLevel(obj.children, level - 1) : []
};
result.push(newObj);
}
return result;
}
const updateChart = (currChart, currOption, currData, currLevel) => {
currOption.series.data = getDataToLevel(currData, currLevel)
currChart.setOption(currOption)
}
<button id="collapseButton">-</button>
<button id="expandButton">+</button>
/**
** Expand Button
*/
const expandButton = document.getElementById('expandButton')
expandButton.addEventListener('click', function() {
// Need higher level
level++
// After... need update chart
updateChart(chart, option, data, level)
})
/**
** Collapse Button
*/
const collapseButton = document.getElementById('collapseButton')
collapseButton.addEventListener('click', function() {
// Need smaller level
if (level > 0) level--
// After... need update chart
updateChart(chart, option, data, level)
})
However, we can customize the format of each level separately, which you have already started implementing in the option.series.levels property. I thought about this further.
I created two buttons: expand and collapse. I assigned a click event to them. Essentially, they either increase or decrease the value of the global level variable by 1, and then call the chart update function.
<button id="collapseButton">-</button>
<button id="expandButton">+</button>
/**
** Current Level
*/
let level = 0
/**
** Expand Button
*/
const expandButton = document.getElementById('expandButton')
expandButton.addEventListener('click', function() {
// Need higher level
level++
// After... need update chart
updateChart(chart, option, level)
})
/**
** Collapse Button
*/
const collapseButton = document.getElementById('collapseButton')
collapseButton.addEventListener('click', function() {
// Need smaller level
if (level > 0) level--
// After... need update chart
updateChart(chart, option, level)
})
In the chart update function, I instructed the program to make every level with an index greater than the current global level invisible. That means I specified that the element should be transparent, and its label should not be displayed.
/**
** Update Chart
* @param {HTMLElement} currChart (chart)
* @param {object} currOption (option)
* @param {number} currLevel (level)
*/
const updateChart = (currChart, currOption, currLevel) => {
// Check pre-defined levels
currOption.series.levels.map((lvl, index) => {
// If index higher than current level --> need hide it
if (index > currLevel) {
lvl.label = {...(lvl.label ?? {}), ...{ show: false }} // text
lvl.itemStyle = {...(lvl.itemStyle ?? {}), ...{ opacity: 0 }} // item color
}
// If index smaller or equal than current level --> need show it
else {
lvl.label = {...(lvl.label ?? {}), ...{ show: true }} // text
lvl.itemStyle = {...(lvl.itemStyle ?? {}), ...{ opacity: 1 }} / item color
}
return lvl
})
currChart.setOption(currOption)
}
(Unfortunately, I deleted the last level from data as it became too long to provide an example that Stack Overflow no longer allowed me to share, but it doesn't lose its value.)
/**
** Initialize
*/
const chartDom = document.getElementById('chart')
const chart = echarts.init(chartDom)
/**
** Data
*/
const data = [
{
name: 2017,
children: [
{
name: 'Jun',
children: [
{
name: 20,
children: [
{
name: '13:55',
children: [
{
name: '1.0.0',
children: [
{
name: 'BC',
itemStyle: {
color: '#ad213e',
},
collapsed: true,
children: [],
value: 5,
},
{
name: 'NBC',
itemStyle: {
color: '#7FB3D5',
},
children: [],
value: 5,
},
],
itemStyle: {},
value: 10,
},
],
day: 20,
month: 'Jun',
year: 2017,
itemStyle: {
color: '',
},
},
],
month: 'Jun',
year: 2017,
itemStyle: {
color: '',
},
},
{
name: 26,
children: [
{
name: '12:11',
children: [
{
name: '1.0.0',
children: [
{
name: 'BC',
itemStyle: {
color: '#ad213e',
},
collapsed: true,
children: [],
value: 5,
},
{
name: 'NBC',
itemStyle: {
color: '#7FB3D5',
},
children: [],
value: 7,
},
],
itemStyle: {
color: '#fff',
},
value: 12,
},
],
day: 26,
month: 'Jun',
year: 2017,
itemStyle: {
color: '',
},
},
],
month: 'Jun',
year: 2017,
itemStyle: {
color: '',
},
},
{
name: 28,
children: [
{
name: '9:28',
children: [
{
name: '1.0.0',
children: [
{
name: 'NBC',
itemStyle: {
color: '#7FB3D5',
},
children: [],
value: 1,
},
],
itemStyle: {
color: '#fff',
},
value: 1,
},
],
day: 28,
month: 'Jun',
year: 2017,
itemStyle: {
color: '',
},
},
{
name: '10:30',
children: [
{
name: '1.0.0',
children: [
{
name: 'BC',
itemStyle: {
color: '#ad213e',
},
collapsed: true,
children: [],
value: 12,
},
],
itemStyle: {
color: '#fff',
},
value: 12,
},
],
day: 28,
month: 'Jun',
year: 2017,
itemStyle: {
color: '',
},
},
],
month: 'Jun',
year: 2017,
itemStyle: {
color: '',
},
value: {
$numberDouble: 'NaN',
},
},
],
year: 2017,
itemStyle: {
color: '',
},
},
{
name: 'Jul',
children: [
{
name: 14,
children: [
{
name: '10:57',
children: [
{
name: '1.0.0',
children: [
{
name: 'BC',
itemStyle: {
color: '#ad213e',
},
collapsed: true,
children: [],
value: 5,
},
],
itemStyle: {
color: '#fff',
},
value: 5,
},
],
day: 14,
month: 'Jul',
year: 2017,
itemStyle: {
color: '',
},
},
],
month: 'Jul',
year: 2017,
itemStyle: {
color: '',
},
},
{
name: 17,
children: [
{
name: '13:11',
children: [
{
name: '1.0.0',
children: [
{
name: 'BC',
itemStyle: {
color: '#ad213e',
},
collapsed: true,
children: [],
value: 1,
},
{
name: 'NBC',
itemStyle: {
color: '#7FB3D5',
},
children: [
{
name: 'path added',
original: 'path added',
value: 1,
itemStyle: {
color: '#7FB3D5',
},
breaking: false,
},
],
value: 1,
},
],
itemStyle: {
color: '#fff',
},
value: 2,
},
],
day: 17,
month: 'Jul',
year: 2017,
itemStyle: {
color: '',
},
},
{
name: '16:22',
children: [
{
name: '1.0.0',
children: [],
itemStyle: {
color: '#fff',
},
},
],
day: 17,
month: 'Jul',
year: 2017,
itemStyle: {
color: '',
},
},
],
month: 'Jul',
year: 2017,
itemStyle: {
color: '',
},
value: {
$numberDouble: 'NaN',
},
},
{
name: 27,
children: [
{
name: '12:29',
children: [
{
name: '1.0.0',
children: [
{
name: 'BC',
itemStyle: {
color: '#ad213e',
},
collapsed: true,
children: [],
value: 5,
},
{
name: 'NBC',
itemStyle: {
color: '#7FB3D5',
},
children: [],
value: 5,
},
],
itemStyle: {
color: '#fff',
},
value: 10,
},
],
day: 27,
month: 'Jul',
year: 2017,
itemStyle: {
color: '',
},
},
],
month: 'Jul',
year: 2017,
itemStyle: {
color: '',
},
},
],
year: 2017,
itemStyle: {
color: '',
},
},
],
itemStyle: {
color: '',
},
},
{
name: 2018,
children: [
{
name: 'May',
children: [
{
name: 15,
children: [
{
name: '16:32',
children: [
{
name: '1.0.0',
children: [
{
name: 'NBC',
itemStyle: {
color: '#7FB3D5',
},
children: [],
value: 6,
},
],
itemStyle: {
color: '#fff',
},
value: 6,
},
],
day: 15,
month: 'May',
year: 2018,
itemStyle: {
color: '',
},
},
],
month: 'May',
year: 2018,
itemStyle: {
color: '',
},
},
{
name: 21,
children: [
{
name: '10:39',
children: [
{
name: '1.0.0',
children: [
{
name: 'NBC',
itemStyle: {
color: '#7FB3D5',
},
children: [],
value: 1,
},
],
itemStyle: {
color: '#fff',
},
value: 1,
},
],
day: 21,
month: 'May',
year: 2018,
itemStyle: {
color: '',
},
},
],
month: 'May',
year: 2018,
itemStyle: {
color: '',
},
},
],
year: 2018,
itemStyle: {
color: '',
},
},
{
name: 'Aug',
children: [
{
name: 1,
children: [
{
name: '8:20',
children: [
{
name: '1.0.0',
children: [
{
name: 'BC',
itemStyle: {
color: '#ad213e',
},
collapsed: true,
children: [],
value: 8,
},
],
itemStyle: {
color: '#fff',
},
value: 8,
},
],
day: 1,
month: 'Aug',
year: 2018,
itemStyle: {
color: '',
},
},
],
month: 'Aug',
year: 2018,
itemStyle: {
color: '',
},
},
],
year: 2018,
itemStyle: {
color: '',
},
},
],
itemStyle: {
color: '',
},
},
{
name: 2021,
children: [
{
name: 'Feb',
children: [
{
name: 11,
children: [
{
name: '14:2:9',
children: [
{
name: '1.0.0',
children: [],
itemStyle: {
color: '#fff',
},
},
],
day: 11,
month: 'Feb',
year: 2021,
itemStyle: {
color: '#a8a8a8',
},
},
{
name: '14:8:14',
children: [
{
name: '1.0.0',
children: [],
itemStyle: {
color: '#fff',
},
},
],
day: 11,
month: 'Feb',
year: 2021,
itemStyle: {
color: '#a8a8a8',
},
},
{
name: '15:59:56',
children: [
{
name: '1.0.0',
children: [],
itemStyle: {
color: '#fff',
},
},
],
day: 11,
month: 'Feb',
year: 2021,
itemStyle: {
color: '#a8a8a8',
},
},
],
month: 'Feb',
year: 2021,
itemStyle: {
color: '#a8a8a8',
},
value: {
$numberDouble: 'NaN',
},
},
],
year: 2021,
itemStyle: {
color: '#a8a8a8',
},
},
],
itemStyle: {
color: '#a8a8a8',
},
},
]
/**
** Option
*/
const option = {
title: {
textStyle: {
fontSize: 24,
fontFamily: 'Times New Roman',
align: 'center',
},
subtextStyle: {
align: 'center',
fontSize: 18,
fontWeight: 'bold',
fontFamily: 'Times New Roman',
},
},
series: {
type: 'sunburst',
data: data,
width: 300,
height: 300,
radius: [0, '100%'], // [0, '60%'],
sort: undefined,
label: {
formatter: '{b}',
position: 'inside',
distance: 0,
rotate: 'radial',
},
levels: [
{},
{
itemStyle: {
colorAlpha: 0,
},
},
{
itemStyle: {
colorAlpha: 0,
},
},
{
itemStyle: {
colorAlpha: 0,
},
},
{
itemStyle: {
colorAlpha: 0,
},
},
{
itemStyle: {
colorAlpha: 0,
},
},
{
itemStyle: {
colorAlpha: 0,
},
},
{
label: {
formatter: '{b}',
position: 'outside',
distance: 2, // Adjust the distance to increase the gap between the chart and the labels
depth: 0, // Adjust this value to set the depth level for labels
rotate: 'radial', // Rotate the labels around the sunburst chart
},
},
],
},
}
/* *********************************************************** */
/**
** Current Level
*/
let level = 0
/**
** Expand Button
*/
const expandButton = document.getElementById('expandButton')
expandButton.addEventListener('click', function() {
level++
updateChart(chart, option, level)
})
/**
** Collapse Button
*/
const collapseButton = document.getElementById('collapseButton')
collapseButton.addEventListener('click', function() {
if (level > 0) level--
updateChart(chart, option, level)
})
/* *********************************************************** */
/**
** Update Chart
* @param {HTMLElement} currChart (chart)
* @param {object} currOption (option)
* @param {number} currLevel (level)
*/
const updateChart = (currChart, currOption, currLevel) => {
currOption.series.levels.map((lvl, index) => {
if (index > currLevel) {
lvl.label = {...(lvl.label ?? {}), ...{ show: false }}
lvl.itemStyle = {...(lvl.itemStyle ?? {}), ...{ opacity: 0 }}
}
else {
lvl.label = {...(lvl.label ?? {}), ...{ show: true }}
lvl.itemStyle = {...(lvl.itemStyle ?? {}), ...{ opacity: 1 }}
}
return lvl
})
currChart.setOption(currOption)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button id="collapseButton">-</button>
<button id="expandButton">+</button>
<div id="chart" style="width: 300px; height: 300px;"></div>