运用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>