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

對於實現有問題的同學歡迎留言！