百度Echarts中国相声名家师承关系图-web建站教程在线编辑器

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ECharts 实例</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				border: 0;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<div id="familyTreeChart" style="width: 1300px;height: 1300px;"></div>
		<script src="/js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/js/bmap.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="https://api.map.baidu.com/api?v=3.0&ak=UAumsTfvpKBlNPUd9e5PvAEnR0YGNllO" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		  // 初始化ECharts实例
          var myChart = echarts.init(document.getElementById('familyTreeChart'));
        
          // 家族关系数据
          var familyData = {
            name: '张三禄',
            children: [
              {name: '朱绍文', children: [
        	    {name: '范长利', children:[
        		  {name:'周德山',children:[
        		    {name:'马三立', children:[
        			  {name: '班德贵', children:[{name:'范振钰',children:[{name:'高峰'}]}]},
        			  {name: '常宝华',children:[{name:'牛群'}]},
        			  {name: '连笑昆', children:[{name: '王本林',children:[{name:'郑小山',children:[{name:'苗阜'}]}]}]}
        			]}
        		  ]}
        		]}, 
        		{name: '沈竹善', children:[
        		  {name:'范瑞亭',children:[{name:'焦寿海',children:[{name:'赵佩茹',children:[
        		    {name:'高英培',children:[{name:'孟凡贵',children:[{name:'刘云天'}]}]},
        		    {name:'李伯祥',children:[{name:'戴志诚'}]},
        		    {name:'常贵田'},
        		    {name:'侯耀文',children:[{name:'郭德纲',children:[{name:'岳云鹏',children:[{name:'尚筱菊'},{name:'刘筱亭'},{name:'徐筱竹'}]},{name:'于云霆'},{name:'栾云平'},{name:'...'}]},{name:'奇志'},{name:'陈寒柏'}]},
        		  ]}]}]},
        		  {name:'卢德俊',children:[{name:'赵霭茹', children:[{name:'王长友',children:[{name:'赵振铎',children:[{name:'李金斗',children:[{name:'大兵'},{name:'方清平'}]}]}]}]}]}
        		]}, 
        		{name: '徐长福',children:[
        		  {name:'刘德智',children:[{name:'郭启儒',children:[{name:'全常保',children:[{name:'郑文喜',children:[{name:'王声'}]}]}]}]},
        		  {name:'焦德海',children:[
        		    {name:'朱阔泉',children:[{name:'侯宝林',children:[{name:'师胜杰',children:[{name:'李菁'}]},{name:'马季',children:[{name:'姜昆',children:[{name:'句号'},{name:'大山'},{name:'周炜'}]},{name:'王谦祥'},{name:'李增瑞'},{name:'冯巩',children:[{name:'贾玲'},{name:'白凯南'},{name:'潘斌龙'}]}]}]},{name:'马志明'}]},
        			{name:'张寿臣'}
        		  ]}
        		]}
        	  ]},
              {name: '沈春和', children: [
        		{name: '冯昆志', children:[
        		  {name: '高德亮', children:[
        			{name: '高凤山', children:[
        			  {name: '石富宽', children:[
        			    {name: '于谦', children:[{name: '郭麒麟'},{name: '冯照洋'}]},{name: '侯震'},{name: '孙悦'}
        			  ]}
        			]}
        		  ]}
        		]}
              ]}		
            ]
          };
        
          // 配置选项
          var option = {
            series: [{
              type: 'tree',
              data: [familyData],
              top: '10%',
              bottom: '10%',
              layout: 'vertical',
              symbol: 'rectangle',
        	  label: {  
        		show: true,  
        		rotate: 0, // 设置标签旋转角度为90度实现竖排效果  
        		formatter: function(params) {  
        		  // 假设我们想要每行显示一个字符  
        		  return params.name.split('').join('\n'); // 将每个字符后添加换行符  
        		},  
        		textStyle: {  
        		  color: '#000', // 文本颜色  
        		  align: 'center', // 文本水平对齐方式  
        		  verticalAlign: 'middle', // 文本垂直对齐方式  
        		  lineHeight: 15 
        		},  
        		padding: [0, 2] // 文本内边距，用于调整字符间距  
        	  }, 
        	  itemStyle: {  
        		color: '#fff', // 设置节点背景色  
        		borderColor: '#025afa', // 设置节点边框颜色  
        		borderWidth: 2 // 设置节点边框宽度  
        	  },
              symbolSize: [30, 55], // 调整矩形大小以包裹文字
              orient: 'vertical', // 纵向布局
              leaves: {
                label: {
                  position: 'inside', // 文字位置在矩形内部
                },
              },
              initialTreeDepth: -1, // 展开所有层级
              animationDurationUpdate: 750,
            }]
          };
        
          // 渲染图表
          myChart.setOption(option);
		</script>
	</body>
</html>

源代码：点击运行 》

运行结果：

源代码：