本教程详细阐述如何在ECharts旭日图中实现点击父节点动态显示或隐藏其子节点的交互功能。通过禁用默认的节点点击行为，结合ECharts的事件监听机制和setOption方法，我们引入一个自定义的hidden_children数据属性来管理子节点的可见性。当用户点击特定父节点时，该节点下的子节点将根据其当前状态进行切换显示或隐藏，从而提供更精细的图表交互控制。
ECharts旭日图交互式子节点管理
echarts旭日图（sunburst chart）是一种层级数据可视化图表，它以放射状的形式展示数据结构，从中心向外层逐级展开。在默认情况下，旭日图通常会一次性展示所有层级的节点。然而，在某些场景下，为了提升用户体验或管理复杂数据的展示，我们可能需要实现一种交互机制：只有当用户点击某个父节点时，其子节点才会被显示出来，再次点击则隐藏。本教程将指导您如何实现这一高级交互功能。
核心原理
实现点击父节点动态显示/隐藏子节点功能主要依赖于ECharts的以下几个核心特性：
事件监听机制 (myChart.on(‘click’, …)): ECharts允许我们为图表上的特定事件（如点击、鼠标悬停等）注册回调函数。通过监听’click’事件，我们可以捕获用户点击图表上任意元素（包括旭日图节点）的操作。图表数据更新 (myChart.setOption({})): ECharts实例的setOption方法不仅用于初始化图表，也用于更新图表的配置和数据。当图表数据发生变化时，调用setOption({})（传入一个空对象或仅更新需要修改的部分）可以触发图表重绘，反映最新的数据状态。禁用默认点击行为 (series.nodeClick: false): 旭日图默认的节点点击行为通常是放大或聚焦到被点击的节点。为了实现自定义的显示/隐藏逻辑，我们需要禁用这一默认行为，以便完全控制点击事件的响应。
数据结构设计
为了实现子节点的动态显示/隐藏，我们需要对原始数据结构进行巧妙的改造。我们引入一个自定义属性，例如hidden_children，来存储那些初始状态下不应显示但需要通过点击来展示的子节点数据。
children: 存放当前可见的子节点数据。hidden_children: 存放那些需要被隐藏，但可以在点击后显示出来的子节点数据。
当一个节点被点击时，我们将根据其children和hidden_children属性的存在与否，在两者之间进行切换，并调用setOption更新图表。
实现步骤
1. 准备您的数据
首先，修改您的旭日图数据结构。对于那些希望初始隐藏，点击父节点后才显示的子节点，请将其从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': [] } ] } ] } ] }, // ... 其他节点 ] }, // ... 其他节点 ] }];
2. 初始化 ECharts 实例并配置旭日图系列
在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);
3. 编写点击事件处理逻辑
现在，为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旭日图的点击父节点显示/隐藏子节点功能。
ECharts旭日图：点击父节点显示/隐藏子节点 html, body, #chart-container { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } // 经过改造的数据：将需要初始隐藏的子节点放入 '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);
注意事项与扩展
性能考虑： 对于拥有极其庞大层级数据的旭日图，频繁地修改数据并调用setOption可能会影响性能。在这种情况下，可以考虑优化数据处理逻辑，或者只更新必要的数据片段。默认行为与自定义行为的结合： 如果您希望某些节点保持ECharts默认的’rootToNode’点击行为（即点击后聚焦到该节点），而另一些节点实现自定义的显示/隐藏功能，则需要更复杂的逻辑。您可以在事件处理函数中，根据params.data的特定属性（例如，只有当params.data.hidden_children存在时才执行自定义逻辑），来区分处理。对于不包含hidden_children的节点，可以手动调用myChart.dispatchAction({ type: ‘sunburstRootToNode’, dataIndex: params.dataIndex });来模拟默认行为。动画效果： ECharts在数据更新时通常会提供平滑的动画效果，这有助于提升用户体验。本方法直接修改数据并重绘，通常能自动利用ECharts的动画机制。数据深拷贝： 在某些复杂的应用中，直接修改原始数据对象可能会引入副作用。如果您的数据在其他地方也被引用，建议在修改前进行深拷贝，以避免不必要的连锁反应。不过，对于本教程中的直接修改并立即setOption的场景，通常不是问题。
总结
通过本教程，您已经学会了如何在ECharts旭日图中实现点击父节点动态显示/隐藏子节点的交互功能。关键在于巧妙地利用ECharts的事件监听、setOption数据更新机制，以及自定义的数据结构（如hidden_children属性）来控制节点的可见性。这种方法不仅提升了图表的交互性，也使得在有限空间内展示复杂层级数据成为可能，为用户提供了更加灵活和个性化的数据探索体验。
以上就是ECharts旭日图：实现点击父节点动态显示/隐藏子节点的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1523244.html
微信扫一扫 
支付宝扫一扫 
