正文
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阻塞带来很大的方便。
对于实现有问题的同学欢迎留言！
