ECharts.js + ECharts.java 的基本使用

上代碼

<div class="box box-primary">

            <div class="box-header">

    <i class="fa fa-shopping-cart"></i>

                <h2 class="box-title">${requestScope.user.phone}.訂單統計表</h2>

                <br />

            <div class="btn-group" role="group" >

             <button class="btn btn-default btn-sm date">所有</button>

       <button class="btn btn-default btn-sm date" >近7天</button>

             <button class="btn btn-default btn-sm date" >近15天</button>

             <button class="btn btn-default btn-sm date" >近30天</button>

            </div>

            </div>

            <div class=""box-body"">

               <div id="orderscharts" style="height: 400px; width: 80%;"></div>

            </div><!-- /.col -->

          </div><!-- /.row -->

<script src="<%=basePath%>common/echarts/echarts.js"></script>  
<script type="text/javascript"> 
 $(function () {
    var myChart;

   $.ajax({

     type:"post",

     
url:"<%=basePath%>admin/usermanagement/ordersecharts${user.id}_0
",

     dataType : 'json',

     success : function(data) {

      if (data != null) {

       var result = eval(data);

       require.config({

        paths : {

         'echarts' : '<%=basePath%>common/echarts',

        }

       });

       require([ 'echarts', 'echarts/chart/bar',  'echarts/chart/line'// 使用柱狀圖就加載bar模塊，按需加載

        ], function(ec) {

         myChart = ec.init(document.getElementById('orderscharts'));

         myChart.setOption(result);

       });

      }else {

       alert("數據異常");

      }

     },

     error : function (data) {

      alert("數據異常");

     }

    }); 

 $(".date").click(function(){

   $(this).parents().children().removeClass("active");

   $(this).addClass("active");

   var type = $(this).index();

  if (type != null) {

   // 圖表清空-------------------

   myChart.clear();

   //var myChart = echarts.init(document.getElementById('orderscharts')); 

   var urls = "<%=basePath%>admin/usermanagement/ordersecharts${user.id}_"+type;

   

   $.ajax({

     type:"post",

     url: urls,

     dataType : 'json',

     success : function(data) {

      if (data != null) {

       var result = eval(data);

       require.config({

        paths : {

         'echarts' : '<%=basePath%>common/echarts',

        }

       });

       

       // 使用

       require([ 'echarts', 'echarts/chart/bar',  'echarts/chart/line'// 使用柱狀圖就加載bar模塊，按需加載

       ], function(ec) {

        // 基於準備好的dom，初始化echarts圖表

        myChart = ec.init(document.getElementById('orderscharts'));

        // 爲echarts對象加載數據 

        myChart.setOption(result);

       }); 

      }else {

       alert("數據異常");

      }

     },

     error : function (data) {

      alert("數據異常");

     }

    });

   }

  });

     
 
});

java

@RequestMapping(value = "/ordersecharts{id}_{type}", method = RequestMethod.POST )

 @ResponseBody

 public Object ordersCharst(@PathVariable Integer id, @PathVariable Integer type ) {

  /**

   * 0  表示所有

   * 1 表示近7天

   * 2 表示近15天

   * 3 表示近30天

   */

  

  User user = userService.getEntityByProperty(" id=:id ", id);

   GsonOption option = new GsonOption();

  // 設置圖表標題,而且顯示居左

  option.tooltip().trigger(Trigger.axis);

  // toolbox

  option.toolbox().show(true).feature(Tool.mark, new MagicType(Magic.line, Magic.bar).show(true), Tool.restore, Tool.saveAsImage);

  // 設置圖例,居中底部顯示，顯示邊框

  option.legend("訂單量");

  // x軸

  option.xAxis(new CategoryAxis().data("已取消的訂單","待付款的訂單","已退款的訂單","退款中的訂單","已支付的訂單","已完成的訂單"));

  // y軸

  option.yAxis(new ValueAxis());  

  Bar bar = new Bar();

  bar.name("訂單量");

  Object[] obj = userService.getCountOrderTypeByUser(user, type);

  //bar.data(1,5,15,20,25,30);

  bar.data(obj);

  bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值"));

  bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));

   option.series(bar);  

  System.out.println(option.toString());  

  return option.toString();

 }

代碼真的寫得很差。

但願能看到。

看着以前 最好把 Echarts.js 瞭解下

Echarts - java

http://www.oschina.net/p/echarts-java