Echats官网示例修改版
效果图在页面的最后
页面
复制代码
1
2
3
4
5<body> <!--长宽在 js 或 css 中设置可能会出现变形--> <div id="chart" style="width: 800px;height:800px;"></div> </body>
js
从后台获取数据之后，调用以下 JS 方法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68/** * 生成Echarts图 * @points 点数据 * @lines 线数据 */ function setChart(points,lines) { //--- 获取画布 “chart” --- if(chart==null) chart=echarts.init(document.getElementById("chart")); //--- 设置 --- if(option==null) option = { //—— 悬浮框 —— tooltip:{ position:'bottom',//悬浮时显示的位置 backgroundColor:'#0050FF', textStyle:{fontSize:18,}, formatter:function(params){//悬浮提示框显示的内容 if (params.data.islink) {return '权重： '+params.data.weight;} else if (params.data.isnode) {return params.data.x+","+params.data.y;} } }, //—— 其他设置 —— backgroundColor:'white', animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', //—— 关键设置 —— series : [ { type: 'graph', layout: 'none', symbolSize: 6,//图形的大小（示例中的圆的大小）, roam: false,//鼠标缩放及平移 focusNodeAdjacency:true,//是否在鼠标移到节点上的时候突出显示节点、节点的边和邻接节点 label: { normal: { show: true , //控制非高亮时节点名称是否显示 position:'top', fontSize:18, color:'blue' } }, edgeLabel: { normal:{ show:false }, emphasis: { textStyle: { fontSize: 18 //边节点显示的字体大小 } } }, // ！这里是节点和边的数据。数据来自后台。 data: [], links: [] } ] } //--- 传值 --- option.series[0].data=points; option.series[0].links=lines; chart.setOption(option); }
更新数据后重新调用即可
后台 Servlet
json所需jar包：
路径生成和获取（示例）
生成路径，并使用 AJAX 传送给前台
生成路径的 json 对象
一条路径（line）的数据示例：
复制代码
1
2{source:0,targer:1,isLink:true,weight:'433.54469204454574',normal:{color:'rgb(0,0,255)',show:'true'},emphasise:{width:3,type:'dashed'}}
生成代码
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36/** * 获取线段的 json对象 * @i 起始点 * @j 目标点 */ private JSONObject getJSObject(int i,int j){ //根据需要设置颜色 boolean red=...||...&&...; JSONObject object=new JSONObject(); object.put("source",i); object.put("target",j); object.put("islink",true); //写入其他所需属性 object.put("weight",weight[i][j]); JSONObject lineStyle=new JSONObject(); //正常态 JSONObject normal=new JSONObject(); normal.put("color",red?"rgb(255,0,0)":"rgb(0,0,255)");//根据需要设置颜色 normal.put("show",true); lineStyle.put("normal",normal); //触发态 JSONObject emphasise=new JSONObject(); // emphasise.put("color",red?"red":"blue"); emphasise.put("width",3); emphasise.put("type","dashed"); lineStyle.put("emphasis",emphasise); object.put("lineStyle",lineStyle); return object; }
获取路径数组并传给前台
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21//创建json数组 JSONArray array=new JSONArray(); //pathes是一条集合，包含一条路径所有点 for(ArrayList<Integer> path:pathes){ Integer last=-1; for(Integer point:path){ if(last!=-1) array.add(getJSObject(last,point));//调用生成json的方法 last=point; } array.add(path_array); } //AJAX输出数据 resp.setContentType("text/text"); resp.setCharacterEncoding("UTF-8"); PrintWriter writer=resp.getWriter(); writer.print(array); writer.flush(); writer.close();
点生成和获取
点数据的获取与传送和上面代码基本相同，此处不再赘述，仅给出本例中点数据的示例。如有需要，可参照以上代码自行完成获取点数据的代码
一个点（point）的数据示例
复制代码
1
2{x:100,y:100,name:7,isNode:true,normal:{color:'rgb(255,0,0)',show:'true'},emphasise:{}}
效果图：
一般状态
节点触发态
边触发态
最后
以上就是含蓄花生最近收集整理的关于Echarts动态拓扑图（修改自Echarts官网示例，Servlet实现，附效果图）Echats官网示例修改版的全部内容，更多相关Echarts动态拓扑图（修改自Echarts官网示例内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复