版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34461514/article/details/79373077
Echats官网示例修改版
效果图在页面的最后
页面
<body>
<!--长宽在 js 或 css 中设置可能会出现变形-->
<div id="chart" style="width: 800px;height:800px;"></div>
</body>js
从后台获取数据之后，调用以下 JS 方法
/**
* 生成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（路径）的数据示例：
{source:0,targer:1,isLink:true,weight:'433.54469204454574',normal:{color:'rgb(0,0,255)',show:'true'},emphasise:{width:3,type:'dashed'}}生成代码
/**
* 获取线段的 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;
}获取路径数组并传给前台
//创建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）的数据示例
{x:100,y:100,name:7,isNode:true,normal:{color:'rgb(255,0,0)',show:'true'},emphasise:{}}效果图：
扫描二维码关注公众号，回复：
3342833 查看本文章
