echarts力导向图的前后台交互（ajax+json+struts）
发布时间：2020-12-16 01:33:15 所属栏目：百科 来源：网络整理
导读：目标：用百度研发的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" / scrip
目标：用百度研发的echarts数据可视化插件做个关系图环境：myeclipse+echarts3.0+struts2html代码<!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.actionpackage 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，beanpackage 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;
}
}
5struts2很好的提供了json的支持： mission success！（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |