如何实现ECharts旭日图点击BR节点才显示其子节点？

核心思路 #

先初始隐藏BR节点的子节点，通过点击事件触发动态加载显示，具体分两步实现：

1. 预处理原始数据，缓存BR节点的子节点 #

遍历原始数据，找到所有名称为BR的节点，将它们的子节点临时存储到自定义属性_children中，然后清空children属性，这样图表初始化时BR节点不会显示子节点。

// 递归遍历数据，处理BR节点
function processData(data) {
  if (!Array.isArray(data)) data = [data];
  data.forEach(item => {
    if (item.name === 'BR') {
      // 缓存子节点到_children
      item._children = item.children;
      // 清空children，初始不显示
      item.children = [];
    }
    if (item.children && item.children.length > 0) {
      processData(item.children);
    }
  });
}

// 处理原始数据
processData(data);

2. 绑定点击事件，动态显示BR子节点 #

初始化ECharts实例后，监听click事件，当点击的节点名称为BR时，将缓存的_children赋值回children，并更新图表。

// 假设你的DOM容器id是main
const myChart = echarts.init(document.getElementById('main'));

// 设置图表配置项
myChart.setOption(option);

// 绑定点击事件
myChart.on('click', params => {
  // 判断点击的是BR节点
  if (params.name === 'BR') {
    const clickedNode = params.data;
    // 如果子节点还未显示
    if (clickedNode.children.length === 0 && clickedNode._children) {
      // 恢复子节点
      clickedNode.children = clickedNode._children;
      // 清除缓存（可选，避免重复触发）
      delete clickedNode._children;
      // 更新图表
      myChart.setOption({
        series: {
          data: data
        }
      });
    }
  }
});

完整代码示例 #

把上述逻辑整合到你的代码中，最终代码如下：

var 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,
                        '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,
                        '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,
                        '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,
                        '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,
                        '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,
                        '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': []
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
];

// 预处理数据
function processData(data) {
  if (!Array.isArray(data)) data = [data];
  data.forEach(item => {
    if (item.name === 'BR') {
      item._children = item.children;
      item.children = [];
    }
    if (item.children && item.children.length > 0) {
      processData(item.children);
    }
  });
}
processData(data);

var option = {
  title: {
    left: 'left',
    textStyle: {
      fontWeight: 'normal',
      fontFamily: 'Serif',
      fontSize: 28
    },
    subtextStyle: {
      fontFamily: 'Serif',
      fontSize: 18
    }
  },
  series: {
    type: 'sunburst',
    width: 1000,
    height: 990,
    sort: undefined,
    data: data,
    radius: [0, '99%'],
    label: {
      rotate: 'radial'
    }
  }
};

// 初始化图表并绑定事件
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

myChart.on('click', params => {
  if (params.name === 'BR') {
    const clickedNode = params.data;
    if (clickedNode.children.length === 0 && clickedNode._children) {
      clickedNode.children = clickedNode._children;
      delete clickedNode._children;
      myChart.setOption({
        series: {
          data: data
        }
      });
    }
  }
});

补充说明 #

• 如果需要实现点击BR节点切换显示/隐藏子节点，只需要修改点击事件的逻辑：判断如果当前有children就清空，反之恢复_children。
• 递归处理数据是为了确保所有层级下的BR节点都能被正确处理，避免遗漏。

内容的提问来源于stack exchange，提问作者Brie MerryWeather