echarts力導向圖的前後臺互動（ajax+json+struts）
阿新 • • 發佈：2019-02-02
目標：用百度研發的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 特別注意
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();
@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的物件即可。