ECharts · Example

var nodes = [];
var links = [];
var constMaxDepth = 2;
var constMaxChildren = 7;
var constMinChildren = 4;
var constMaxRadius = 10;
var constMinRadius = 2;

function rangeRandom(min, max) {
    return Math.random() * (max - min) + min;
}

function createRandomNode(depth, parentNode) {
    var node = {
        name : 'NODE_' + nodes.length,
        value : rangeRandom(constMinRadius, constMaxRadius),
        // Custom properties
        id : nodes.length,
        depth : depth,
        category : depth === constMaxDepth ? 0 : 1,
        __parentNode__ : parentNode ? parentNode.id : -1,
        __children__ : [],
        __collapsed__ : false
    }
    nodes.push(node);

return node;
}

function forceMockThreeData() {
    var depth = 0;
    var rootNode = createRandomNode(0);
    rootNode.name = 'ROOT';
    rootNode.category = 2;

mock(rootNode, 0);
}

forceMockThreeData();

option = {
    title : {
        text: 'Force',
        subtext: 'Node collapse example',
        x:'right',
        y:'bottom'
    },
    tooltip : {
        trigger: 'item',
        formatter: '{a} : {b}'
    },
    toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            magicType: {show: true, type: ['force', 'chord']},
            saveAsImage : {show: true}
        }
    },
    legend: {
        x: 'left',
        data:['叶子节点','非叶子节点', '根节点']
    },
    series : [
        {
            type:'force',
            name : "Force tree",
            ribbonType: false,
            categories : [
                {
                    name: '叶子节点'
                },
                {
                    name: '非叶子节点'
                },
                {
                    name: '根节点'
                }
            ],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    nodeStyle : {
                        brushType : 'both',
                        strokeColor : 'rgba(255,215,0,0.6)',
                        lineWidth : 1
                    }
                }
            },
            minRadius : constMinRadius,
            maxRadius : constMaxRadius,
            coolDown: 0.995,
            nodes : nodes,
            links : links
        }
    ]
};

function addChildrenToChart(node) {
    for (var i = 0; i < node.__children__.length; i++) {
        var childNode = nodes[node.__children__[i]];
        childNode.ignore = false;

addChildrenToChart(childNode);
    }
}

targetNode.__collapsed__ = ! targetNode.__collapsed__;
        myChart.setOption(option, true);
    }
}
myChart.on(ecConfig.EVENT.CLICK, focus);

切换主题