javascript 仅当单击父节点时，才在Echarts朝阳中显示子节点

我在echarts中有一个朝阳：

我想为Breaking创建一个节点，当我点击它时，只有它显示最后一个节点：（请求属性、路径已删除等）。我不知道如何在echarts中实现这一点。
下面是我的图的代码：

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

任何建议或想法将是非常有帮助的！

可以为整个图表添加一个事件处理程序，该处理程序可以通过其参数来标识所单击的项。这里是[文档中的介绍]]（https://apache.github.io/echarts-handbook/en/concepts/event/）。
另一件必须知道的事情是echart的示例函数setOption用于更新图表并执行重绘到新配置。我将直接使用myChart.setOption({})在更新数据后触发重画。
我通过将series.nodeClick设置为false禁用了单击的默认行为。
下面代码的想法-目标是对原始代码进行最小的修改-将隐藏的'children'重命名为'hidden_children'，然后如果单击具有hidden_children的节点，则children将被分配hidden_children并更新图表。此外，第二次单击通过从其数据中删除属性来隐藏children：

myChart.on('click', function(params){
    if(params.data.hidden_children){
        if(params.data.children){
            delete params.data.children; //remove - hide
        }
        else{
            params.data.children = params.data.hidden_children; // show
        }
        myChart.setOption({})
    }
});

片段：

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': [
                                                        {
                                                            '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': []
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ],
    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,
            nodeClick: false,
            data: data,
            radius: [0, '99%'],
            label: {
                rotate: 'radial'
            }
        }
    };

const dom = document.getElementById('chart-container');
const myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});
myChart.setOption(option);
myChart.on('click', function(params){
    if(params.data.hidden_children){
        if(params.data.children){
            delete params.data.children; //remove - hide
        }
        else{
            params.data.children = params.data.hidden_children; // show
        }
        myChart.setOption({})
    }
});

window.addEventListener('resize', myChart.resize);

<div id="chart-container" style="min-width: 300px;height: 95vh"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>

javascript 仅当单击父节点时，才在Echarts朝阳中显示子节点

1条答案

相关问题

热门标签

最新问答