Echarts可视化教程

  1. 网站首页
  2. 百度ECharts
  3. ECharts实例
  4. ECharts入门
  5. 地图大全
  6. ECharts官网

百度Echarts中国相声名家师承关系图

// 初始化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);

点击运行 》

点击展开全文
下一篇: 没有了

相关文章

  1. 百度echarts图表之三国人物关系图
  2. 百度echarts图表之人际关系图