'Apache ECharts - How to integrate a "Backbutton" for Sunburst diagram
I used the Sunburst example from ECharts and wanted to add a back button instead of the blue default circle. I could not find this in the documentation. May be someone can link the right section and give an example based on the shown code on how to adjust the "back" to root button. Thank you! The example has been derived from the standard Sunburst examples at https://echarts.apache.org/examples/en/editor.html?c=sunburst-drink
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=sunburst-drink
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
var data = [
{
name: 'a',
itemStyle: {
color: '#fc9d43'
},
children: [
{
name: 'a1',
value: 1,
itemStyle: {
color: '#fc9d43'
}
},
{
name: 'a2',
value: 1,
itemStyle: {
color: '#fc9d43'
},
},
{
name: 'a3',
value: 1,
itemStyle: {
color: '#fc9d43'
},
}
]
}
];
option = {
title: {
text: 'sunburst',
subtext: 'Source: sunburst',
textStyle: {
font: 'Azo Sans Bold',
fontSize: 24,
align: 'center'
},
subtextStyle: {
align: 'center'
},
sublink: 'sunburst'
},
series: {
type: 'sunburst',
//name: 'Back',
data: data,
radius: [0, '95%'],
sort: undefined,
emphasis: {
focus: 'descendant',
//itemStyle : {color: 'red'}
},
levels: [
{},
{
r0: '5%',
r: '75%',
nodeClick: 'rootToNode',
itemStyle: {
borderRadius: 7,
borderWidth: 2,
},
label: {
rotate: 'radial', // radial or tangential
align : 'center',
textBorderColor: '#fff',
textBorderWidth: 2,
//backgroundColor: '#f2e0D6',
borderType: 'solid',
}
},
{
r0: '80%',
r: '95%',
nodeClick:false,
itemStyle: {
borderRadius: 7,
borderWidth: 2
},
label: {
rotate: 'tangential',
}
},
]
}
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
In my understanding the emphasis state: https://echarts.apache.org/handbook/en/concepts/style/#style-of-emphasis-state is modifying the behavior of all the rest -> color change will hovering over an element etc. So question remains what option changes the "Back" Blue circle. My goal is to replace it with a Back Arrow svg to make it more obvious to the user that it lead back to the root.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|