基于echarts树图画组织结构图

原创

于 2019-06-20 18:54:12 发布 · 1.4w 阅读

39 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #树图 #tree #组织架构图

基于echarts树图画组织结构图

注：新版本echarts已有折线树图绘制功能(Tree with Polyline)，本法适合v4.2.1之前版本
1、下载echarts插件
官网地址：https://echarts.baidu.com/
下载地址：https://echarts.baidu.com/download.html

2、页面引入插件并初始化

<!DOCTYPE html>
<html>
	<head>
	...
	<style type="text/css">
		/*宽高根据实际需要调节*/
    	#main { height:180%; width: 100%;}
    </style>
	</head>
	<body>
		<div id="main"></div>
		<!-- 注：此处引入的是未压缩文件 -->
    	<script src="../../js/plugins/echarts-4.2.1/dist/echarts.js"></script>
    	<script>
    		var myChart = echarts.init(document.getElementById('main'));
    		var data = {
    			"name": "xxxx",
    			"children": [
    				 ...
				]
			};
    		var option = {
				...
			    series:[
			        {
			            type: 'tree',                         // 设置树图
			            name: 'xxxx',
			            data: [data],
			            layout: 'orthogona',