Ehcart知识图谱----Ajex,JSON后台调用数据

 

运用Ajex,JSON从后台调取数据(类别,节点,链条)

 

截图:

 

 

 

(1)创建类别,节点,链条的JavaBean类

 

(2)将数据分别储存在List中,之后再将三个List存在一个新的List,转换为JSON格式并传至前端

// 类别
		ArrayList<cate> categories = new ArrayList<cate>();
		categories.add(  new cate("第一代")  );
		categories.add(  new cate("第二代")  );
		categories.add(  new cate("第三代")  );
		
		//	节点
		ArrayList<node> data = new ArrayList<node>();
		data.add( new node("张三", "张三", 70, 0) );
		data.add( new node("张四", "张四", 50, 1) );
		data.add( new node("张五", "张五", 50, 1) );
		data.add( new node("张六", "张六", 25, 2) );
		
		// 连接
		ArrayList<link> links = new ArrayList<link>();
		links.add( new link("张三", "张四", "01", "01") );
		links.add( new link("张三", "张五", "02", "02") );
		links.add( new link("张四", "张六", "03", "03") );
		
		
		ArrayList<ArrayList>	list = new ArrayList<ArrayList>();
		list.add(categories);
		list.add(data);
		list.add(links);
		

		ObjectMapper mapper = new ObjectMapper();
		String json = mapper.writeValueAsString(list);
		mapper.writeValue(response.getWriter(), list);
		
		System.out.println(json);

　　

(3)前端

<div id="main" style="width: 1200px;height:600px; text-align:center; margin: 0 auto; background-color:#eee	 ;   box-shadow:2px 5px 5px rgba(0,0,0,.3);" ></div>




<script>
//************************Ajex传值***************************//

	var cate1;var da1;var li1;
	
	$(function(){
	
		$.get("Zhishitupu",{username:"rose"},
				function(data){
			//获取Ajex返回的数据
			cate1 = data[0];
			da1 = data[1];
			li1 = data[2];
			
			makeEchart(cate1,da1,li1);
			
			},"json");
		
	});

	
	
//************************************************************//

</script>

 <script type="text/javascript">



function makeEchart(cate1,da1,li1){
	var categories =cate1;
	 var das = da1;
	 
	 var myChart = echarts.init(document.getElementById('main'));
	 option = {
		     // 图的标题
		     title: {
		         text: 'ECharts 关系图'
		     },
		     // 提示框的配置
		     tooltip: {
		         formatter: function (x) {
		             return x.data.des;
		         }
		     },
		     // 工具箱
		     toolbox: {
		         // 显示工具箱
		         show: true,
		         feature: {
		             mark: {
		                 show: true
		             },
		             // 还原
		             restore: {
		                 show: true
		             },
		             // 保存为图片
		             saveAsImage: {
		                 show: true
		             }
		         }
		     },
		     legend: [{
		         // selectedMode: 'single',
		         data: categories.map(function (a) {
		             return a.name;
		         })
		     }],
		     series: [{
		         type: 'graph', 								// 类型:关系图
		         layout: 'force', 								//图的布局，类型为力导图
		         symbolSize: 40,							 // 调整节点的大小
		         roam: true, 								// 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
		         edgeSymbol: ['circle', 'arrow'],
		         edgeSymbolSize: [2, 10],
		         edgeLabel: {
		             normal: {
		                 textStyle: {
		                     fontSize: 20
		                 }
		             }
		         },
		         force: {
		             repulsion: 2500,
		             edgeLength: [10, 50]
		         },
		         draggable: true,
		         lineStyle: {
		             normal: {
		                 width: 2,
		                 color: '#4b565b',
		             }
		         },
		         edgeLabel: {
		             normal: {
		                 show: true,
		                 formatter: function (x) {
		                     return x.data.name;
		                 }
		             }
		         },
		         label: {
		             normal: {
		                 show: true,
		                 textStyle: {}
		             }
		         },

		         // 数据				
		         //点数据 (名称,高亮显示名,原点大小,类别)	(类别仅有0,1)
		         //线数据 (起点,终点,名称,高亮名称)
		         data: das,
		         links: li1,
		         categories: categories,
		     }]
		 };
		 myChart.setOption(option);
 }
 

 

 	
	</script>