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

效果图

源代码

	
		
		ECharts
		
		
		
		
	

	
		
		

		
			// 基于准备好的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);