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阻塞带来很大的方便。

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

巴特西

echarts通过ajax请求展示多叉树

最新文章

热门文章