// 初始化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:'孟凡贵',children:[{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:'焦德海',children:[
{name:'朱阔泉',children:[{name:'侯宝林',children:[{name:'师胜杰',children:[{name:'李菁'}]},{name:'马季',children:[{name:'姜昆',children:[{name:'句号'},{name:'大山'},{name:'周炜'}]},{name:'王谦祥'},{name:'李增瑞'},{name:'冯巩',children:[{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);
点击运行 》