ECharts
View on GitHub
Home
Example
API & Doc
Download
ZIP (Latest)
Link
Ecom-FE
Data Visualization
ZRender
option
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) { var node = { name : 'NODE_' + nodes.length, value : rangeRandom(constMinRadius, constMaxRadius), // Custom properties id : nodes.length, depth : depth, category : depth === constMaxDepth ? 0 : 1 } nodes.push(node); return node; } function forceMockThreeData() { var depth = 0; var rootNode = { name : 'ROOT', value : rangeRandom(constMinRadius, constMaxRadius), // Custom properties id : 0, depth : 0, category : 2 } nodes.push(rootNode); function mock(parentNode, depth) { var nChildren = Math.round(rangeRandom(constMinChildren, constMaxChildren)); for (var i = 0; i < nChildren; i++) { var childNode = createRandomNode(depth); links.push({ source : parentNode.id, target : childNode.id, weight : 1 }); if (depth < constMaxDepth) { mock(childNode, depth + 1); } } } mock(rootNode, 0); } forceMockThreeData(); option = { title : { text: 'Force', subtext: 'Force-directed tree', x:'right', y:'bottom' }, tooltip : { trigger: 'item', formatter: '{a} : {b}' }, legend: { x: 'left', data:['叶子节点','非叶子节点', '根节点'] }, series : [ { type:'force', name : "Force tree", categories : [ { name: '叶子节点', itemStyle: { normal: { color : '#ff7f50' } } }, { name: '非叶子节点', itemStyle: { normal: { color : '#6f57bc' } } }, { name: '根节点', itemStyle: { normal: { color : '#af0000' } } } ], itemStyle: { normal: { label: { show: false }, nodeStyle : { brushType : 'both', strokeColor : 'rgba(255,215,0,0.6)', lineWidth : 1 } } }, minRadius : constMinRadius, maxRadius : constMaxRadius, density : 1, attractiveness: 1.2, nodes : nodes, links : links } ] };
Refresh ~