echarts通过ajax请求展示多叉树

 

背景：在sqlserver使用过程中经常由于各种原因会出现阻塞，并发数较高，很难肉眼看出那个session阻塞了其他process，通过sql查询出根源也需要大量的重复操作才能够找到。

因此就有这方面的需求来，通过session_id以及blocked_sessionid两个字段来找出阻塞根源并通过网页展示出来。

echarts拥有非常优秀的BI组件库，能够对各种数据进行各种形式的展示。

前台部分代码为：

    <table>
           <tr>
               <td align="center"><div class="well sidebar-nav" id="tree" style="width:1000px;height:300px" ></div></td>
           </tr>
    </table>

为echarts画图申请一块区域

ajax请求如下：

var optiontree = {
        title : {
            text: '',
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b}: {c}"
        },
        //toolbox: {
        //    show : true,
        //   feature : {
        //        mark : {show: true},
        //        dataView : {show: true, readOnly: false},
        //        restore : {show: true},
        //       saveAsImage : {show: true}
         //   }
        //},
        calculable : false,

        series : [
            {
                name:'test',
                type:'tree',
                orient: 'vertical',  // vertical horizontal
                rootLocation: {x: 'center', y: '20%'},
                nodePadding: 20,
                roam: true,
                symbol: 'circle',
                symbolSize: 40,
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'inside',
                            textStyle: {
                                color: '#000',
                                fontSize: 15,
                                fontWeight:  'bolder'
                            }
                        },
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
                        }
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    }
                },
                data: []
            }
        ]
    };
$.ajax({
    type : "post",
    async : false, 
    url : "<%=request.getContextPath()%>/manage/testjson",
    data : {},
    dataType : "json",
    success : function(result) {
              if (result) {
            　　var arr = result[0].treedata;
           　　 var contact = JSON.parse(arr);
           　　 optiontree.series[0].data.push(contact); 
　　　　　　     var myChart = echarts.init(document.getElementById('tree'));
　　　　　　　　  myChart.setOption(optiontree);

          }
 }}); 

java后台代码思路如下：

1.查询出两列数据 gettreedata();

2.将这两列数据通过递归函数以及多叉树数据结构存储

treetojson()
{
      iteratorfunc(......) //将数据转换成nodetree
      ...
      ...
      ...
      deletenoblocknode()  //将没有阻塞的节点删除
  
      nodetreetraversetojson() //将树形结构转换成
                               // json字符串传回给jquery
}

这里需要注意的地方需要标准的json格式

{"name" : "0","children" : [{"name" : "4","children" : [{"name" : "3","children" : [{"name" : "1","children" : [{"name" : "13"}]},{"name" : "2"}]},{"name" : "5","children" : [{"name" : "6"}]},{"name" : "7","children" : [{"name" : "8"}]}]},{"name" : "11","children" : [{"name" : "12"}]}]}

最终展示如图：

 

 对于echarts来说可以增加点击事件，点击sessionid后可再次查询出详细信息，对于解决sqlserver阻塞带来很大的方便。

对于实现有问题的同学欢迎留言！