关系图点击节点展开次级节点效果尝试

option = {
    title: {
        text: '关系图点击节点展开次级节点效果尝试'
    },
    tooltip: {},
    legend: {
        show: false,
        y: '8%',
        data: categories
    },
    animationDuration: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [{
        name: 'ECharts学习',
        type: 'graph',
        layout: 'none',
        data: data,
        links: links,
        categories: categories.map(function(a) {
            return {
                name: a
            };
        }),
        roam: true,
        focusNodeAdjacency: true,
        itemStyle: {
            normal: {
                borderColor: '#fff',
                borderWidth: 1,
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.3)'
            }
        },
        label: {
            position: 'right',
            formatter: '{b}'
        },
        lineStyle: {
            color: 'source',
            curveness: 0.3
        },
        emphasis: {
            lineStyle: {
                width: 10
            }
        }
    }]
};

myChart.on('click', function(params) {
    
    categoryName = params.name + '_childrens';

    // 如果 category 状态为显示，则通过一定规则隐藏所有 childres
    if (categoryStatus[categoryName]) {

        // 这里为了省事，直接通过字符串匹配判断了
        for (let i in categories) {
            if (categories[i].includes(params.name) && categories[i] != 'node0') {
                myChart.dispatchAction({
                    type: 'legendUnSelect',
                    // 图例名称
                    name: categories[i]
                });
            }
        }
        
        categoryStatus[categoryName] = false;
    
    // 如 category 状态为隐藏，则显示    
    } else {
        for (let i in categories) {
            if (categories[i].includes(params.name) && categoryStatus[categories[i]] || categories[i] === categoryName) {
                myChart.dispatchAction({
                    type: 'legendSelect',
                    // 图例名称
                    name: categories[i]
                });
            }
        }
        categoryStatus[categoryName] = true;
    }
});