基于Struts2+Ajax+Echarts+json的动态报表demo

Echarts准备工作：

• 首先在前台页面引入jQuery.js与echarts.js，如下图：
• 
• 我这里还多引入了echarts.min.js与echarts-all.js，其实按道理，这块引入一个echarts.js就足够了。但是，我在做的过程中echarts一直报未定义的错误。索性我就全引入了。
• Echarts官网下载地址：http://www.echartsjs.com/download.html
• Echarts代码：
• 首先，要为Echarts在页面中准备一个容器，这个容器一定要带有ID属性：

  <div id="main" style="width: 600px;height:400px;float: left"></div>

  <script type="text/javascript">
          function change (result) {
              var servicedata = [];
              for(var i=0;i<result.typeName.length;i++){
                  var obj=new Object();
                  obj.name=result.typeName[i];
                  obj.value=result.sales[i];
                  servicedata[i]=obj;
              }
              var myCharts = echarts.init(document.getElementById('main'));
              var option = {
                  title:{
                      text:"最终决策金额分布情况",
                      left:"40%"
                  },
                  tooltip: {
                      trigger: 'item',
                      formatter: "{a} <br/>{b}: {c} ({d}%)"
                  },
                  legend: {
                      orient: 'vertical',
                      x: 'right',
                      y: 'bottom',
                      data:result.typeName
                  },
                  series: [
                      {
                          name:'访问来源',
                          type:'pie',
                          radius: ['50%', '70%'],
                          avoidLabelOverlap: false,
                          label: {
  
                              formatter:"{d}%",
                              emphasis: {
                                  show: true,
                                  textStyle: {
                                      fontSize: '30',
                                      fontWeight: 'bold'
                                  }
                              }
                          },
                          labelLine: {
                              normal: {
                                  show: true,
                                  position:'outside'
                              }
                          },
                          data:servicedata
                      }
                  ]
              };
              myCharts.setOption(option);
          }
      </script>

   在这里，我就不再一一介绍Echarts中的各个配置项了。这些配置项在Echarts官网中都能找到：

 

http://www.echartsjs.com/option.html#title

Echarts部分到这里就基本结束了。

下面进入Ajax代码部分：

 

<script type="text/javascript">
        function getEcharData() {
            $.ajax({
                type : 'post',
                async : true,
                url :'${pageContext.request.contextPath}/contractinfo/getEchartsData.action',
                data : {},
                dataType : 'json',
                success : function(result) {
                    if (result) {
                        change(result);
                    }
                },
                error : function() {
                    alert("加载数据失败");
                }
            });
        }
    </script>

 

Struts2与json部分：

我这里采用的是Struts2通过拦截器自动将数据转化为json格式的数据，传到前台。这种方法需要你拥有这个包：

• Struts2配置文件：

  <struts>
  	<package name="contractinfo" namespace="/contractinfo"
  		extends="ecm-default,json-default">
  
  		<action name="getEchartsData" class="contractinfo.echartsAction" method="getData">
  			<result name="success" type="json">
  				<param name="root">result</param>
  			</result>
  		</action>
  </Struts>

  这里要注意的是：<package>里的extends属性一定要有"json-default"，除此之外，<action>标签里的name属性与type属性，格外要注意的是type属性。type属性一定要是"json"。最后要注意的是，<param>标签里的值一定要与后台Action中的成员属性名一致。我这里是result，大家可以在下文中看到进行验证。

• Action类：

  public class EchartsTest extends BaseAction{
  
      private EchartsBean result;
  
      public EchartsBean getResult() {
          return result;
      }
  
      public void setResult(EchartsBean result) {
          this.result = result;
      }
  
      private static Logger log = Logger.getLogger(EchartsTest.class);
  
      public String getData(){
   
          String [] typeName = {"董事长","分管领导","部门领导"};
          String [] sales = {"","",""};
          EchartsBean eb = new EchartsBean();
          for (int i = 0; i < typeName.length; i++){
              sales[i] = "" + String.valueOf(Math.random() * 10000);
          }
          eb.setTypeName(typeName);
          eb.setSales(sales);
  
          this.setResult(eb);
    
          return SUCCESS;
      }

  在这里说明一下，因为我这做的只是一个demo。在这里，数据库部分不是重点，所以没有涉及到数据库，只是模拟了一下动态数据。

• JavaBean类：

  import java.io.Serializable;
  
  public class EchartsBean implements Serializable{
  
      private String[] typeName;
      private String[] sales;
  
      public String[] getTypeName() {
          return typeName;
      }
  
      public void setTypeName(String[] typeName) {
          this.typeName = typeName;
      }
  
      public String[] getSales() {
          return sales;
      }
  
      public void setSales(String[] sales) {
          this.sales = sales;
      }
  }

  到这里，就全部结束了。不足之处请指教，互相学习。