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请求展示多叉树的更多相关文章
- Vue中使用echarts,ajax请求的远程数据赋值给图表不刷新的问题和解决办法
问题: vue-cli搭建的项目,在mounted钩子函数里面创建echarts图表,本地模拟数据可以正常显示,但是当将ajax请求的远程数据赋值给图表时,图表并不会刷新. 解决办法: 刚开始以为是v ...
- echarts通过ajax向服务器发送post请求,servlet从数据库读取数据并返回前端
1.echarts的官网上的demo,都是直接写死的随机数据,没有和数据库的交互,所以就自己写了一下,ok,我们开始一步一步走一遍整个流程吧. 就以官网最简单的那个小demo来做修改吧.官网上的小de ...
- Ajax请求二进制流并在页面展示
后端代码: public void getIntegralQrcode(HttpServletResponse response, String token) throws BizException, ...
- C# 动态创建SQL数据库(二) 在.net core web项目中生成二维码 后台Post/Get 请求接口 方式 WebForm 页面ajax 请求后台页面 方法 实现输入框小数多 自动进位展示,编辑时实际值不变 快速掌握Gif动态图实现代码 C#处理和对接HTTP接口请求
C# 动态创建SQL数据库(二) 使用Entity Framework 创建数据库与表 前面文章有说到使用SQL语句动态创建数据库与数据表,这次直接使用Entriy Framwork 的ORM对象关 ...
- 通过Ajax方式上传文件,使用FormData进行Ajax请求
通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...
- 从头开始一步一步实现EF6+Autofac+MVC5+Bootstarp极简前后台ajax表格展示及分页(二)前端修改、添加表格行点击弹出模态框
在前一篇中,由于不懂jquery,前端做的太差了,今天做稍做修改,增加一个跳转到指定页面功能,表格行点击样式变化.并且在表格中加入bootstarp的按钮组,按钮点击后弹出模态框,须修改common, ...
- ajax请求总是不成功?浏览器的同源策略和跨域问题详解
场景 码农小明要做一个展示业务数据的大屏给老板看,里面包含了来自自己网站的数据和来自隔壁老王的数据.那么自己网站的数据提供了 http://xiaoming.com/whoami 这样的数据接口隔壁老 ...
- MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查
MVC3+EF5.0 code first+Flexigrid+ajax请求+jquery dialog 增删改查 本文的目的: 1.MVC3项目简单配置EF code first生成并初始化数据 ...
- 【liferay】1、使用alloy-UI发送ajax请求
1.首先liferay要发送ajax请求,那么就需要在jsp中定义resourceURL <portlet:resourceURL var="workDeal" id=&qu ...
随机推荐
- HTTP自学心得
HTTP是一个 客户端和 服务器端请求和应答的标准(TCP).HTTP是客户端浏览器或其他程序与 Web服务器之间的应用层通信协议. HTTP一般指超文本传输协议,它是互联网应用最广泛的协议,是用于从 ...
- Python3基础(九) 错误和异常
本文主要介绍Python中的错误和异常,涉及到简单的异常处理.抛出异常以及清理动作.至于自定义异常类,将在介绍类与继承的时候讲到. 一.定义 常见的两种错误:语法错误 和 异常. 1.语法错误(Syn ...
- Python3基础(八) 模块
在程序中定义函数可以实现代码重用.但当你的代码逐渐变得庞大时,你可能想要把它分割成几个文件,以便能够更简单地维护.同时,你希望在一个文件中写的代码能够被其他文件所重用,这时我们应该使用模块(modul ...
- iOS_截屏并裁剪
截图使用场景: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcHJlX2VtaW5lbnQ=/font/5a6L5L2T/fontsize/400/fil ...
- CoffeeScript里的字符串插值
拼接字符串是我们常干的事情.与其用很多的 "" + "",不如用一下字符串插值,可读性好些. 方法是在字符串中加入#{ 变量.表达式.函数等} getOther ...
- Jboss 7配置日志
1. Jboss7配置日志理论知识介绍 Jboss 7日志能够在XML配置文件和日志管理属性文件内配置.默认日志配置在configuration文件夹的logging.properties文件内. 通 ...
- leecode 题解 || Merge k Sorted Lists 问题
problem: Merge k sorted linked lists and return it as one sorted list. Analyze and describe its comp ...
- VS2010 使用TeeChart绘图控件 - 之二 - 绘制图形(折线图,柱状图)
1.前期准备 具体可见VS2010 使用TeeChart绘图控件 - 之一 控件和类的导入 1. 1 添加TeeChart控件,给控件添加变量m_TeeChart 添加TeeChart控件,右击控件, ...
- oracle查询时间段
select count(*) tt from crm_cisco_call_detailwhere DateTime between to_date('2016-4-5 00:00:00','yyy ...
- E20170930-hm
parse vt. 从语法上描述或分析(词句等);