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

最近有读者问，关系图如何通过点击节点展开、折叠，当时没有时间写例子（最近一直比较忙），就口述了下思路……

昨晚终于抽出点时间做了一个极其简易的示例，补上。

思路

思路就是利用自带的图例动作（显示/隐藏）实现。

1. 通过监听鼠标事件触发
2. 判断鼠标点击的节点，通过一定规则确定要隐藏/显示的category（这里给当时问我的读者道个歉……当时我给说成series 了，实际上关系图的图例是通过series[i]-graph.categories 和 series[i]-graph.data[i].category结合 legend 配置的）
3. 通过legendSelect / legendUnSelect 这两个图标行为（ACTION）完成所需图例的显示/隐藏；或者直接通过修改option.legend.selected 并setOption 实现。

实现

一、首先准备些数据:

1、关系图的节点数据 data

2、节点间关系数据 links

3、用于图例的 categories 类目名称列表 categories

4、一个用于记录节点显示/隐藏状态的 categoryStatus

二、准备配置项 option

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]