fastjson.jar以及Echarts树图的js文件(需要在servlet对json进行赋值,所以需要用到json的插件)

链接:https://pan.baidu.com/s/1GBbamPNGTzKf2926Nkhczg
提取码:ukmg

用json主要目的就是需要用到一个Echars的树图,想要让他的数据从数据库中获取,所以要通过后台对json进行赋值

以下是源代码:

这是一个Echarts的一个前端的界面,这个可以在官网找到

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<h2 align="center">企业分析族谱</h2>
<div id="container" style="height: 80%"></div>
<script type="text/javascript" src="js/echarts.js"></script> //你自己存放js的路径
<script type="text/javascript" src="js/dataTools"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var tempOption = {};
option = null;
$.get('/company/ZuPuServlet', function(data) { //要获取值所用到的后台,由于初次接触,只会用一个后台去单独支持一个界面
$.each(data,function(name,chilren){
tempOption = chilren;
});
myChart.setOption(option = {
tooltip : {
trigger : 'item',
triggerOn : 'mousemove'
},
series : [ {
type : 'tree',
data : [tempOption],
top : '18%',
bottom : '14%',
layout : 'radial',
symbol : 'emptyCircle',
symbolSize : 7,
initialTreeDepth : 3,
animationDurationUpdate : 750
} ]
});
});
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>

这个是后台的代码:

package servlet;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List; import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.websocket.Session; import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.mysql.jdbc.EscapeTokenizer; import bean2.T_corp;
import bean2.T_corp_dist;
import bean2.T_corp_stock;
import bean2.T_m_corp_corp_dist;
import bean2.T_m_corp_corp_stock;
import dao.Guquan;
import dao.T_CORP_Dao;
import dao.T_corp_distDao;
import dao.T_corp_stockDao;
import dao.ZuPu; /**
* Servlet implementation class ZuPuServlet
*/
@WebServlet("/ZuPuServlet")
public class ZuPuServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
private static final String EscapeTokenizer = null; /**
* @see HttpServlet#HttpServlet()
*/
public ZuPuServlet() {
super();
// TODO Auto-generated constructor stub
} /**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("UTF-8");
HttpSession session = request.getSession();
String name =(String)session.getAttribute("name"); //通过session获取公司的名称
System.out.println(name); T_corp t_corp = T_CORP_Dao.getByName(name);
List<T_m_corp_corp_stock> list = Guquan.list1(t_corp); //有某一公司获取到相应的股东关系
List<T_m_corp_corp_dist> list1 = ZuPu.list1(t_corp); //获取对应的分支公司
List<T_corp_stock> tStocks = new ArrayList<>();
List<T_corp_dist> tDists = new ArrayList<>();
T_corp_stock tStock ;
T_corp_dist tDist ; JSONObject json1 = new JSONObject(); //用来处理最中间的主节点
JSONArray arry1 = new JSONArray(); JSONArray arry2 = new JSONArray(); //存放各个股东的信息 JSONArray arry3 = new JSONArray(); //存放各个分公司的数据 JSONArray htags = new JSONArray();
//由主节点扩展的分支节点
JSONObject second1 = new JSONObject();
JSONObject second2 = new JSONObject(); json1.put("name",t_corp.getCORP_NAME());//将公司名赋值给第一个主节点
for(int i = 0; i < list.size();i++)
{
tStock = T_corp_stockDao.getstock(list.get(i).getSUB_ORG(), list.get(i).getSUB_ID(), list.get(i).getSUB_SEQ_ID());
tStocks.add(tStock);
JSONObject json2 = new JSONObject(); //处理代表股权的节点信息
json2.put("name", tStock.getSTOCK_NAME()); arry2.add(json2);
} for(int i =0; i < list1.size() ; i++)
{
tDist = T_corp_distDao.getstock(list1.get(i).getSUB_ORG(), list1.get(i).getSUB_ID(), list1.get(i).getSUB_SEQ_ID());
tDists.add(tDist);
JSONObject json3 = new JSONObject(); //处理代表公司分支的信息
json3.put("name", tDist.getDIST_NAME());
System.out.println(tDist.getDIST_NAME());
arry3.add(json3);
} second2.put("name", "对外投资");
second1.put("name", "股东");
second1.put("children", arry2);
second2.put("children", arry3); arry1.add(second1);
arry1.add(second2);
json1.put("children", arry1);
System.out.println("获取数据"); response.setContentType("application/json");
response.setCharacterEncoding("utf-8"); htags.add(json1);
response.getWriter().write(htags.toJSONString());
session.invalidate(); } /**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
} }

最终的效果是这样的

第一次接触这个东西写的有点乱不太好理解,不喜勿喷

json通过后台获取数据库中的内容,并在前端进行显示的更多相关文章

  1. 通过jdbc获取数据库中的表结构

    通过jdbc获取数据库中的表结构 主键 各个表字段类型及应用生成实体类   1.JDBC中通过MetaData来获取具体的表的相关信息.可以查询数据库中的有哪些表,表有哪些字段,字段的属性等等.Met ...

  2. ThinkPhp循环出数据库中的内容并输出到模板

    <foreach name='user' item='v'> //循环出数据库中的内容 对应控制器->方法中的  $this->assign('user',M('user')- ...

  3. 使用 UEditor 编辑器获取数据库中的数据

    在 ThinkPHP 3.2.2 中,使用 UEditor 编辑器获取数据库中保存的数据,可以使用 UEditor 自身提供的方法. 首先在视图模板中实例化编辑器,这是出现编辑器界面的必须的行为: & ...

  4. sql 2000以及2005以上获取数据库中所有的表(不包括系统表)

    ---------------------------------------------------------------------------- --sql 2005以上数据库 --- 获取数 ...

  5. SQL语句获取数据库中的表主键,自增列,所有列

    SQL语句获取数据库中的表主键,自增列,所有列   获取表主键 1:SELECT TABLE_NAME,COLUMN_NAME FROM INFORMATION_SCHEMA.KEY_COLUMN_U ...

  6. 使用Java或 JavaScript获取 方括号中的内容

    1.使用Java获取方括号中的内容 String str = "[你]们,[我]们,[他]们,都要[好好学习,天天敲代码]"; Pattern p = Pattern.compil ...

  7. 将数据库中的内容展示出来并将某些value值转换成汉字

    1.将数据库中的内容展示出来 前台代码未做改变,刚开始未显示的原因是因为 data-field 跟数据库不一样data-field 需要跟数据库中的一样才可以 2.将某些value值转换成汉字 在li ...

  8. sql脚本来获取数据库中的所有表结构了

    sql脚本来获取数据库中的所有表结构了,代码如下: use AdventureWorks2008 go SELECT (case when a.colorder=1 then d.name else ...

  9. 使用jdbc将mysql数据库中的内容封装为指定对象的list集合

    使用jdbc将mysql数据库中的内容封装为指定对象的list集合 public List<User> findAll() { private JdbcTemplate template ...

随机推荐

  1. 洛谷$P3620\ [APIO/CTSC 2007]$数据备份 贪心

    正解:贪心 解题报告: 传送门$QwQ$ $umm$感觉这种问题还蛮经典的,,,就选了某个就不能选另一个这样儿,就可以用堆模拟反悔操作 举个$eg$,如果提出了$a_i$,那就$a_{i-1}$和$a ...

  2. 洛谷$P4126\ [AHOI2009]$最小割 图论

    正解:网络流+$tarjan$ 解题报告: 传送门$QwQ$ $umm$最小割的判定问题$QwQ$,因为并不会做是看的题解才会的,所以也没什么推导过程直接放结论趴$QwQ$ 首先跑个最大流,然后有. ...

  3. MySQL之分库分表(MyCAT实现)

    分库分表介绍 随着微服务这种架构的兴起,我们应用从一个完整的大的应用,切分为很多可以独立提供服务的小应用.每个应用都有独立的数据库. 数据的切分分为两种: 垂直切分:按照业务模块进行切分,将不同模块的 ...

  4. MinGW-W64下载与安装

    安装方案 1 下载安装包,MinGW-w64 - for 32 and 64 bit Windows,然后直接以管理员安装即可,但是这个方案在部分电脑可能不行,会提示 cannot download ...

  5. angular.foreach 循环方法

    angular循环给一个 angular监听的变量复值时.最好还是用angular自带的循环方法.“angular.foreach” 尽量避免代码的冲突,最好不要jq angular 混用 var o ...

  6. Could not write JSON: Infinite recursion (StackOverflowError);

    转自:https://blog.csdn.net/east123321/article/details/80435051 在controller返回数据到统一json转换的时候,出现了json inf ...

  7. 编写SQL查询范围分区类型,MAX分区范围

    需求 对于分区表,对于范围分区类型来说,查询MAX分区及对应的分区范围. ==查询分区表对应的最大分区信息 ==排除了自扩展分区(如果是自扩展分区,但是最大的分区不是自扩展的并未排除在外) ==排除了 ...

  8. 什么是aPaas?aPaas与低代码又是如何促进应用程序开发现代化的?

    从软件即服务(SaaS)到基础设施即服务(IaaS),云计算的兴起使“一切皆服务”(XaaS)模型得以泛滥,而aPaaS可能是这些模型中最鲜为人知的模型.随着aPaaS市场预计将从2018年的近90亿 ...

  9. ReactNative: 将自定义的ReactNative组件制作成第三方库的详细流程(制作-->发布)

    一.简介 在讲本篇博文之前,需要你熟知怎么自定义ReactNative组件,然后才好学习将自定义的ReactNative组件制作成第三方库.本文中的自定义的ReactNative组件LoginMana ...

  10. nginx介绍与安装

    1.nginx作用可以配置数十个场景 ​ ​ 2.环境安装 环境确认 ​ 安装环境 yum -y install gcc gcc-c++ autoconf pcre-devel make automa ...