echarts旭日图（sunburst chart）是一种层级数据可视化图表，它以放射状的形式展示数据结构，从中心向外层逐级展开。在默认情况下，旭日图通常会一次性展示所有层级的节点。然而，在某些场景下，为了提升用户体验或管理复杂数据的展示，我们可能需要实现一种交互机制：只有当用户点击某个父节点时，其子节点才会被显示出来，再次点击则隐藏。本教程将指导您如何实现这一高级交互功能。
实现点击父节点动态显示/隐藏子节点功能主要依赖于ECharts的以下几个核心特性：
为了实现子节点的动态显示/隐藏，我们需要对原始数据结构进行巧妙的改造。我们引入一个自定义属性，例如hidden_children，来存储那些初始状态下不应显示但需要通过点击来展示的子节点数据。
当一个节点被点击时，我们将根据其children和hidden_children属性的存在与否，在两者之间进行切换，并调用setOption更新图表。
首先，修改您的旭日图数据结构。对于那些希望初始隐藏，点击父节点后才显示的子节点，请将其从children数组中移除，并存储到hidden_children数组中。
以下是一个示例数据片段，展示了如何将BR节点下的最终子节点（如Request Property）放置到hidden_children中：
var data = [
{
'name': 2020,
'children': [
// ... 其他节点
{
'name': '17th',
'children': [
{
'name': '15:27',
'children': [
{
'name': '0.0.2',
itemStyle: { color: '#FFF' },
'value': 30.0,
'children': [
{
'name': 'BR',
itemStyle: { color: '#ad213e' },
'value': 11.0,
// 将需要隐藏的子节点放入 hidden_children
'hidden_children': [
{
'name': 'Request Property',
itemStyle: { color: '#ad213e' },
label: {
rotate: 0
},
'value': 11.0,
'children': []
}
]
}
]
}
]
},
// ... 其他节点
]
},
// ... 其他节点
]
}
];在ECharts的配置项中，您需要设置series.nodeClick为false，以禁用旭日图默认的节点点击行为。
const dom = document.getElementById('chart-container');
const myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var option = {
// ... 其他配置
series: {
type: 'sunburst',
width: 1000,
height: 990,
sort: undefined,
data: data, // 使用经过改造的数据
radius: [0, '99%'],
label: {
rotate: 'radial'
},
nodeClick: false // 禁用默认的节点点击行为
}
};
myChart.setOption(option);现在，为ECharts实例添加一个点击事件监听器。在回调函数中，我们将检查被点击节点的数据是否包含hidden_children属性，并根据其当前状态决定是显示还是隐藏子节点。
myChart.on('click', function(params){
// 检查被点击节点的数据是否包含 hidden_children 属性
if(params.data.hidden_children){
if(params.data.children){
// 如果 children 属性存在，说明子节点当前可见，点击后应隐藏
delete params.data.children; // 移除 children 属性以隐藏子节点
}
else{
// 如果 children 属性不存在，说明子节点当前隐藏，点击后应显示
params.data.children = params.data.hidden_children; // 将 hidden_children 赋值给 children
}
// 调用 setOption 触发图表重绘，反映数据变化
myChart.setOption({});
}
});结合上述步骤，以下是一个完整的HTML文件示例，展示了如何实现ECharts旭日图的点击父节点显示/隐藏子节点功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts旭日图：点击父节点显示/隐藏子节点</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>
<style>
html, body, #chart-container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div id="chart-container" style="min-width: 300px;height: 95vh"></div>
<script type="text/javascript">
// 经过改造的数据：将需要初始隐藏的子节点放入 'hidden_children'
const data = [
{
'name': 2020,
'children': [
{
'name': 'September',
'children': [
{
'name': '9th',
'children': [
{
'name': '13:57',
'children': [
{
'name': '0.0.2',
'value': 7.0,
'children': []
}
]
}
]
},
{
'name': '17th',
'children': [
{
'name': '15:27',
'children': [
{
'name': '0.0.2',
itemStyle: {color: '#FFF'},
'value': 30.0,
'children': [
{
'name': 'BR',
itemStyle: {color: '#ad213e'},
'value': 11.0,
'hidden_children': [ // 使用 hidden_children 存储初始隐藏的子节点
{
'name': 'Request Property',
itemStyle: {color: '#ad213e'},
label: {
rotate: 0
},
'value': 11.0,
'children': []
}
]
}
]
}
]
},
{
'name': '20:17',
'children': [
{
'name': '0.0.2',
itemStyle: {color: '#FFF'},
'value': 20.0,
'children': [
{
'name': 'BR',
itemStyle: {color: '#ad213e'},
'value': 8.0,
'hidden_children': [
{
'name': 'New Required Request Property',
itemStyle: {color: '#ad213e'},
label: {
rotate: 12
},
'value': 8.0,
'children': []
}
]
}
]
}
]
}
]
}
]
},
{
'name': 'October',
'children': [
{
'name': '12th',
'children': [
{
'name': '21:19',
'children': [
{
'name': '0.0.2',
itemStyle: {color: '#FFF'},
'value': 20.0,
'children': [
{
'name': 'BR',
itemStyle: {color: '#ad213e'},
'value': 10.0,
'hidden_children': [
{
'name': 'New Required Request',
itemStyle: {color: '#ad213e'},
label: {
rotate: 30
},
'value': 10.0,
'children': []
}
]
}
]
}
]
},
{
'name': '21:20',
'children': [
{
'name': '0.0.2',
itemStyle: {color: '#FFF'},
'value': 9.0,
'children': [
{
'name': 'BR',
itemStyle: {color: '#ad213e'},
'value': 1.0,
'hidden_children': [
{
'name': 'Path Removed w/o Deprecation',
itemStyle: {color: '#ad213e'},
label: {
rotate: 0
},
'value': 1.0,
'children': []
}
]
}
]
}
]
}
]
},
{
'name': '29th',
'children': [
{
'name': '12:12',
'children': [
{
'name': '0.0.2',
itemStyle: {color: '#FFF'},
'value': 9.0,
'children': []
}
]
}
]
}
]
},
{
'name': 'November',
'children': [
{
'name': '20th',
'children': [
{
'name': '13:17',
'children': [
{
'name': '0.0.2',
itemStyle: {color: '#FFF'},
'value': 17.0,
'children': [
{
'name': 'BR',
itemStyle: {color: '#ad213e'},
'value': 2.0,
'hidden_children': [
{
'name': ' Media Type eliminated',
itemStyle: {color: '#ad213e'},
label: {
rotate: 0
},
'value': 2.0,
'children': []
}
]
}
]
}
]
}
]
}
]
},
{
'name': 'December',
'children': [
{
'name': '11th',
'children': [
{
'name': '11:01',
'children': [
{
'name': '0.0.2',
itemStyle: {color: '#FFF'},
'value': 23.0,
'children': [
{
'name': 'BR',
itemStyle: {color: '#ad213e'},
'value': 11.0,
'hidden_children': [
{
'name': 'Path Removed',
itemStyle: {color: '#ad213e'},
label: {
rotate: 30
},
'value': 11.0,
'children': []
}
]
}
]
}
]
},
{
'name': '12:57',
'children': [
{
'name': '0.0.2',
itemStyle: {color: '#FFF'},
'value': 9.0,
'children': []
}
]
}
]
}
]
}
]
}
];
const dom = document.getElementById('chart-container');
const myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
const option = {
title: {
left: 'left',
text: 'ECharts 旭日图动态子节点展示',
textStyle: {
fontWeight: 'normal',
fontFamily: 'Serif',
fontSize: 28
},
subtext: '点击“BR”节点可显示/隐藏其子节点',
subtextStyle: {
fontFamily: 'Serif',
fontSize: 18
}
},
series: {
type: 'sunburst',
width: '100%', // 适应容器宽度
height: '100%', // 适应容器高度
sort: undefined,
data: data,
radius: [0, '99%'],
label: {
rotate: 'radial'
},
nodeClick: false // 禁用默认点击行为
}
};
myChart.setOption(option);
// 监听点击事件
myChart.on('click', function(params){
// 只有当被点击节点包含 hidden_children 属性时才执行自定义逻辑
if(params.data.hidden_children){
if(params.data.children){
// 如果 children 属性存在，说明子节点当前可见，点击后隐藏
delete params.data.children;
} else {
// 如果 children 属性不存在，说明子节点当前隐藏，点击后显示
params.data.children = params.data.hidden_children;
}
// 更新图表以反映数据变化
myChart.setOption({});
}
});
// 窗口大小调整时重绘图表
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>通过本教程，您已经学会了如何在ECharts旭日图中实现点击父节点动态显示/隐藏子节点的交互功能。关键在于巧妙地利用ECharts的事件监听、setOption数据更新机制，以及自定义的数据结构（如hidden_children属性）来控制节点的可见性。这种方法不仅提升了图表的交互性，也使得在有限空间内展示复杂层级数据成为可能，为用户提供了更加灵活和个性化的数据探索体验。
以上就是ECharts旭日图：实现点击父节点动态显示/隐藏子节点的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
375
收藏
