目标：用百度研发的echarts数据可视化插件做个关系图
环境：myeclipse+echarts3.0+struts2
HTML代码
<!DOCTYPE html>
<html>
<header>
<Meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
<script src="jquery.js"></script>
</header>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 1000px;height:800px;"></div>
<script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 option = { title: { text: 'Graph 简单示例' },tooltip: {},animationDurationUpdate: 1500,animationEasingUpdate: 'quinticInOut',series : [ { type: 'graph',layout: 'force',symbolSize: 50,roam: true,label: { normal: { show: true } },symbol:'circle',force:{repulsion: 2000},categories : [ { name: '人物' },{ name: '家人' },{ name:'朋友' } ],nodes:[ ],links : [ ],draggable:true,edgeLabel: { normal: { textStyle: { fontSize: 20 } } },} ] }; // 使用刚指定的配置项和数据显示图表。 $.ajax({ url:'echartsDisplay',type:'POST',data:"{}",dataType:'json',success:function (data) { option.series[0].nodes=data.echartsData.nodes; option.series[0].links=data.echartsData.links; myChart.setOption(option); },error: function (errorMsg) { alert("不好意思，大爷，图表请求数据失败啦!"); } }); </script>
</body>
</html>
特别注意
ajax返回值的获取：
option.series[0].nodes=data.echartsData.nodes;
option.series[0].links=data.echartsData.links;
myChart.setOption(option);
struts2的配置
1，web.xml
加一段过滤器的配置
<filter>
<filter-name>SSH</filter-name>
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>SSH</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
2，struts2.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
<package name="default" extends="json-default">
<action name="echartsDisplay" class="com.echarts.action.echartsDisplayAction">
<result type="json">
<param name="includeProperties">
echartsData\.nodes\[\d+\]\.name,echartsData\.links\[\d+\]\.source,echartsData\.links\[\d+\]\.target,echartsData\.links\[\d+\]\.name
</param>
</result>
</action>
</package>
</struts>
特别注意
<package name="default" extends="json-default">
package要继承json-default
<result type="json">
<param name="includeProperties">
echartsData\.nodes\[\d+\]\.name,echartsData\.links\[\d+\]\.source,echartsData\.links\[\d+\]\.target,echartsData\.links\[\d+\]\.name
</param>
用正则把需要传到前台的复杂list对象包含在内
3.action
package com.echarts.action;
/** * Created by User on 2016-6-28. */
import com.echarts.bean.EchartsData;
import com.echarts.bean.Nodes;
import com.echarts.bean.Links;
import org.apache.struts2.json.annotations.JSON;
import com.opensymphony.xwork2.ActionSupport;
import java.util.ArrayList;
import java.util.List;
public class echartsDisplayAction extends ActionSupport{
/** * */
private static final long serialVersionUID = 1L;
private EchartsData echartsData = new EchartsData();
@H_31_404@@Override
public String execute() throws Exception {
System.out.println("action start");
List<Nodes> nodes =new ArrayList<Nodes>();
Nodes node1 = new Nodes();
Nodes node2 = new Nodes();
Nodes node3 = new Nodes();
node1.setName("中国");
node2.setName("山西");
node3.setName("大同");
nodes.add(node1);
nodes.add(node2);
nodes.add(node3);
List<Links> links = new ArrayList<Links>();
Links link1 = new Links();
Links link2 = new Links();
link1.setName("属于");
link1.setSource("中国");
link1.setTarget("山西");
link2.setName("属于");
link2.setSource("山西");
link2.setTarget("大同");
links.add(link1);
links.add(link2);
echartsData.setNodes(nodes);
echartsData.setLinks(links);
return SUCCESS;
}
public EchartsData getEchartsData() {
return echartsData;
}
public void setEchartsData(EchartsData echartsData) {
this.echartsData = echartsData;
}
}
4，bean
package com.echarts.bean;
import java.util.ArrayList;
import java.util.List;
/** * Created by User on 2016-6-28. */
public class EchartsData {
private List<Nodes> nodes = new ArrayList<Nodes>();
private List<Links> links = new ArrayList<Links>();
public List<Nodes> getNodes() {
return nodes;
}
public void setNodes(List<Nodes> nodes) {
this.nodes = nodes;
}
public List<Links> getLinks() {
return links;
}
public void setLinks(List<Links> links) {
this.links = links;
}
}
package com.echarts.bean;
/** * Created by User on 2016-6-28. */
public class Links {
private String source;
private String target;
private String name;
public String getSource() {
return source;
}
public void setSource(String source) {
this.source = source;
}
public String getTarget() {
return target;
}
public void setTarget(String target) {
this.target = target;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
package com.echarts.bean;
/** * Created by User on 2016-6-28. */
public class Nodes {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
5
struts2很好的提供了json的支持：
在struts.xml里的package要extends json-default
result的type要设置为json
遇到复杂对象（数组对象），要通过正则表达式设置要传到前台的include的参数，action中只要在类属性声明并get、set这个要边为json的对象即可。
