doc/example/force3.html - echarts-www - Git at Google

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta name="robots" content="noindex, nofollow">
     <title>ECharts2 · Example</title>

     <link rel="shortcut icon" href="../asset/ico/favicon.png">

     <link href="../asset/css/font-awesome.min.css" rel="stylesheet">
     <link href="../asset/css/bootstrap.css" rel="stylesheet">
     <link href="../asset/css/carousel.css" rel="stylesheet">
     <link href="../asset/css/echartsHome.css" rel="stylesheet">
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
       <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->

     <script src="./www/js/echarts.js"></script>
     <script src="../asset/js/codemirror.js"></script>
     <script src="../asset/js/javascript.js"></script>

     <link href="../asset/css/codemirror.css" rel="stylesheet">
     <link href="../asset/css/monokai.css" rel="stylesheet">
 </head>

 <body>
     <!-- Fixed navbar -->
     <div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>


     <div class="container-fluid">
         <div class="row-fluid example">
             <div id="sidebar-code" class="col-md-4">
                 <div class="well sidebar-nav">
                     <div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
                     <textarea id="code" name="code">

 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;

     function mock(parentNode, depth) {
         var nChildren = Math.round(rangeRandom(constMinChildren, constMaxChildren));

         for (var i = 0; i < nChildren; i++) {
             var childNode = createRandomNode(depth, parentNode);
             links.push({
                 source : parentNode.id,
                 target : childNode.id,
                 weight : 1
             });
             parentNode.__children__.push(childNode.id);
             if (depth < constMaxDepth) {
                 mock(childNode, depth + 1);
             }
         }
     }

     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 isAscendant(node1, node2) {
     var parent = nodes[node2.__parentNode__];
     while(parent) {
         if (parent.id === node1.id) {
             return true;
         }
         parent = nodes[parent.__parentNode__];
     }
     return false;
 }

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

         addChildrenToChart(childNode);
     }
 }

 var ecConfig = require('echarts/config');
 function focus(param) {
     var data = param.data;
     if (
         data.source !== undefined
         && data.target !== undefined
     ) {
     } else { // 点击的是点
         var targetNode = nodes[data.id];

         if (!targetNode.__collapsed__) {
             option.series[0].nodes = nodes.map(function (node) {
                 node.ignore = isAscendant(data, node);
                 return node;
             });
         } else {
             addChildrenToChart(targetNode);
         }

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

                     </textarea>
               </div><!--/.well -->
             </div><!--/span-->
             <div id="graphic" class="col-md-8">
                 <div id="main" class="main"></div>
                 <div>
                     <button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷 新</button>
                     <span class="text-primary">切换主题</span>
                     <select id="theme-select"></select>

                     <span id='wrong-message' style="color:red"></span>
                 </div>
             </div><!--/span-->
         </div><!--/row-->

         </div><!--/.fluid-container-->

     <footer id="footer"></footer>
     <!-- Le javascript
     ================================================== -->
     <!-- Placed at the end of the document so the pages load faster -->
     <script src="../asset/js/jquery.min.js"></script>
     <script type="text/javascript" src="../asset/js/echartsHome.js"></script>
     <script src="../asset/js/bootstrap.min.js"></script>
     <script src="../asset/js/echartsExample.js"></script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<meta name="robots" content="noindex, nofollow">
	<title>ECharts2 · Example</title>

	<link rel="shortcut icon" href="../asset/ico/favicon.png">

	<link href="../asset/css/font-awesome.min.css" rel="stylesheet">
	<link href="../asset/css/bootstrap.css" rel="stylesheet">
	<link href="../asset/css/carousel.css" rel="stylesheet">
	<link href="../asset/css/echartsHome.css" rel="stylesheet">
	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

	<script src="./www/js/echarts.js"></script>
	<script src="../asset/js/codemirror.js"></script>
	<script src="../asset/js/javascript.js"></script>

	<link href="../asset/css/codemirror.css" rel="stylesheet">
	<link href="../asset/css/monokai.css" rel="stylesheet">
	</head>

	<body>
	<!-- Fixed navbar -->
	<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="head"></div>


	<div class="container-fluid">
	<div class="row-fluid example">
	<div id="sidebar-code" class="col-md-4">
	<div class="well sidebar-nav">
	<div class="nav-header"><a href="#" onclick="autoResize()" class="glyphicon glyphicon-resize-full" id ="icon-resize" ></a>option</div>
	<textarea id="code" name="code">

	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;

	function mock(parentNode, depth) {
	var nChildren = Math.round(rangeRandom(constMinChildren, constMaxChildren));

	for (var i = 0; i < nChildren; i++) {
	var childNode = createRandomNode(depth, parentNode);
	links.push({
	source : parentNode.id,
	target : childNode.id,
	weight : 1
	});
	parentNode.__children__.push(childNode.id);
	if (depth < constMaxDepth) {
	mock(childNode, depth + 1);
	}
	}
	}

	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 isAscendant(node1, node2) {
	var parent = nodes[node2.__parentNode__];
	while(parent) {
	if (parent.id === node1.id) {
	return true;
	}
	parent = nodes[parent.__parentNode__];
	}
	return false;
	}

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

	addChildrenToChart(childNode);
	}
	}

	var ecConfig = require('echarts/config');
	function focus(param) {
	var data = param.data;
	if (
	data.source !== undefined
	&& data.target !== undefined
	) {
	} else { // 点击的是点
	var targetNode = nodes[data.id];

	if (!targetNode.__collapsed__) {
	option.series[0].nodes = nodes.map(function (node) {
	node.ignore = isAscendant(data, node);
	return node;
	});
	} else {
	addChildrenToChart(targetNode);
	}

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

	</textarea>
	</div><!--/.well -->
	</div><!--/span-->
	<div id="graphic" class="col-md-8">
	<div id="main" class="main"></div>
	<div>
	<button type="button" class="btn btn-sm btn-success" onclick="refresh(true)">刷新</button>
	<span class="text-primary">切换主题</span>
	<select id="theme-select"></select>

	<span id='wrong-message' style="color:red"></span>
	</div>
	</div><!--/span-->
	</div><!--/row-->

	</div><!--/.fluid-container-->

	<footer id="footer"></footer>
	<!-- Le javascript
	================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="../asset/js/jquery.min.js"></script>
	<script type="text/javascript" src="../asset/js/echartsHome.js"></script>
	<script src="../asset/js/bootstrap.min.js"></script>
	<script src="../asset/js/echartsExample.js"></script>
	</body>
	</html>