效果图

141Echarts - 树图（From Top to Bottom Tree）_Echarts

源代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<script src="js/echarts.min.js"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="dist/extension/dataTool.js"></script>
	</head>

	<body>
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div id="main" style="width: 1024px;height:768px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;

			myChart.showLoading();
			$.get('data/flare.json', function(data) {
				myChart.hideLoading();

				myChart.setOption(option = {
					tooltip: {
						trigger: 'item',
						triggerOn: 'mousemove'
					},
					series: [{
						type: 'tree',

						data: [data],

						left: '2%',
						right: '2%',
						top: '8%',
						bottom: '20%',

						symbol: 'emptyCircle',

						orient: 'vertical',

						expandAndCollapse: true,

						label: {
							normal: {
								position: 'top',
								rotate: -90,
								verticalAlign: 'middle',
								align: 'right',
								fontSize: 9
							}
						},

						leaves: {
							label: {
								normal: {
									position: 'bottom',
									rotate: -90,
									verticalAlign: 'middle',
									align: 'left'
								}
							}
						},

						animationDurationUpdate: 750
					}]
				});
			});

			//myChart.setOption(option);
		</script>
	</body>

</html>