Echarts实现折线树形家谱图(附源码)

最近受朋友委托为朋友开发了一个简易的家谱管理系统，系统核心采用Thinkphp5界面部分使用了Layui的布局。项目开发完成后，觉得应该有朋友会需要用到，因此也对项目源码进行了开源。下载地址：https://gitee.com/zkii_admin/jiapu。

今天主要记录的笔记是利用Echarts实现折线树形家谱图，具体效果如下图所示：

Echarts实现折线树形家谱图

HTML部分较为简单，只需要一行div，设置ID属性及宽高定义即可。JS部分代码片段：

  1. <script src="/static/plugs/jquery/jquery.min.js"></script>
  2. <script src="/static/admin/echarts/chart/echarts.js"></script>
  3. <script type="text/javascript">
  4.     //Echarts CDN路径
  5.     require.config({
  6.         paths: {
  7.             echarts: 'https://cdn.jsdelivr.net/npm/[email protected]/build'
  8.         }
  9.     });
  10.     var bid = {$id};  //Ajax请求参数，可忽略
  11.     var fid = {$fid}; //Ajax请求参数，可忽略
  12.     require(['echarts','echarts/chart/tree'],function (ec) {
  13.         // 基于准备好的dom，初始化echarts图表
  14.         var myChart = ec.init(document.getElementById('mainStructure'));
  15.         myChart.showLoading();
  16.         $.post('/admin/branch/createStruct.html',{branch_id:bid,fid:fid},function (res) {
  17.             console.log(res);
  18.             var option = {
  19.                 title : {
  20.                     text: '家族分支图谱',
  21.                     x:'center',
  22.                     y:"40",
  23.                 },
  24.                 tooltip : {
  25.                     show: true,
  26.                     trigger: 'item',
  27.                     formatter: function (v) {
  28.                         var phone = v.contact == undefined?"无":v.contact
  29.                         return "字辈:["+v.value+"]"+'<br/>'+"手机:"+phone;
  30.                     },
  31.                     textStyle: {
  32.                         fontSize: 18,
  33.                         fontFamily:'Microsoft YaHei',
  34.                     }
  35.                 },
  36.                 toolbox: {
  37.                     show : true,
  38.                     feature : {
  39.                         restore : {show: true},
  40.                         saveAsImage : {show: true}
  41.                     }
  42.                 },
  43.                 calculable : true,
  44.                 series : [
  45.                     {
  46.                         name:'家族树',
  47.                         type:'tree',
  48.                         layout:'orthogonal',
  49.                         orient: 'vertical',  // vertical horizontal
  50.                         rootLocation: {x: '50%', y: '110'}, // 根节点位置  {x: 'center',y: 10}
  51.                         nodePadding: 10,
  52.                         layerPadding:40,
  53.                         width:"100%",
  54.                         symbol: 'rectangle',
  55.                         borderColor:'black',
  56.                         roam: true,
  57.                         itemStyle: {
  58.                             normal: {
  59.                                 color: '#fff',//节点背景色
  60.                                 borderWidth: 2,
  61.                                 borderColor: 'black',
  62.                                 label: {
  63.                                     show: true,
  64.                                     position: 'inside',
  65.                                     textStyle: {
  66.                                         color: 'black',
  67.                                         fontSize: 16,
  68.                                     }
  69.                                 },
  70.                                 lineStyle: {
  71.                                     color: '#000',
  72.                                     width: 1,
  73.                                     type: 'broken'
  74.                                 }
  75.                             },
  76.                             emphasis: {
  77.                                 label: {
  78.                                     show: false,
  79.                                 }
  80.                             }
  81.                         },
  82.                         data:[res],
  83.                     }
  84.                 ]
  85.             };
  86.             // 为echarts对象加载数据
  87.             myChart.hideLoading();
  88.             myChart.setOption(option);
  89.         })
  90.     });
  91. </script>

由于家族成员会随着时间推移越来越多，导致Canvas绘图区域无法全部显示，因此最好的方法是分片打印。上述示例中已经开启了Echarts的拖拽显示以及缩放。可以用鼠标拖拽、鼠标滚轮来缩放树形图谱的大小。

更多的参数也可参阅Echarts树形结构的文档。

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！