报表绘图插件echarts使用教程

报表在实际项目中，应该属于必不可少的部分，针对如何显示更直观，有的是用表格，有的使用绘图的形式，给客户提供出平台的一些收益情况。对于绘图这类的插件，今天我们是使用的是echarts插件，进行讲解。可以通过官网http://echarts.baidu.com/查看示例和下载对应的js文件。

从官网可以看到报表显示的形式是多种多样的，如何显示，其实做法都是差不多的，我们只要从后端传对应的x，y粥的数据到前端进行赋值就可以了。

现在我们要做这样的一个功能，从后台传输数据到前台，初始化echarts对应的x，y轴的数据进行显示。显示完之后可以进行不同y轴数据的切换，比如x-y对应的（时间-订单数/微信支付金额/现金支付金额）等等。

1：首先引入js

    <script src="${ctx}/echarts-2.2.7/echarts.js"></script>

2：定义数据保存后台传过来的数据

<script type="text/javascript">
            var xdata;
            var ydata;
            var dateArray;
            var orderCount;
            var orderAmount;
            var purseAmount;
            var wxpayAmount;
            var alipayAmount;
            var unionpayAmount;

    $(document).ready(function() {

      //初始化加载echarts数据为前
            loadEcharts("0");

});

 function loadEcharts(datas){
             $.ajax({
                   type: "POST",
                   url: "${ctx}/echatrts/hkorderstats/hkOrderStats/changeEcharts?refDate="+datas,
                   contentType: "application/json; charset=utf-8",
                   dataType: "json",
                   success: function (data) {
                       //存储数据
                      dateArray= data.dateArray;
                      orderCount=data.orderCountArray;
                      orderAmount= data.orderAmountArray;
                      purseAmount= data.purseAmountArray;
                      wxpayAmount= data.wxpayAmountArray;
                      alipayAmount= data.alipayAmountArray;
                      unionpayAmount= data.unionpayAmountArray;
                      //使用xdata，ydata传参
                       xdata=dateArray;
                       ydata=orderCount;
                        initEcharts(xdata,ydata);
                    
                   },
                   error: function (msg) {
                     /*   alert(msg); */
                   }
               });
        }

function initEcharts(xdata,ydata){
             var myChart = echarts.init(document.getElementById('main'));
              option = {
                    title: {
                        text: '对数轴示例',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    legend: {
                        left: 'left',
                        data: ['2的指数', '3的指数']
                    },
                    xAxis: {
                        type: 'category',
                        name: 'x',
                        splitLine: {show: false},
                        data: xdata,
                         axisLabel :{  //显示所有数据
                             interval:0   
                         }  
                    },
                     grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'log',
                        name: 'y'
                    },
                    series: [
                        {
                            name: '1/2的指数',
                            type: 'line',
                            data:ydata
                        }
                    ]
                };
                // 使用指定的配置项和数据显示图表。
                myChart.setOption(option);
         }

  </script>

3:html

<!-- tab按钮 -->
    <div style="margin-bottom: 30px;margin-top: 30px;" id="btn_div">
    <a class="btn btn-primary" style="margin-right: 5px;" onclick="refreshData(1)">订单数</a><a id="id2" onclick="refreshData(2)" class="btn btn-primary" style="margin-right: 5px;">订单金额</a>
    <a class="btn btn-primary" style="margin-right: 5px;" onclick="refreshData(3)">现金</a><a class="btn  btn-primary" style="margin-right: 5px;" onclick="refreshData(4)">微信支付</a>
    <a class="btn btn-primary" style="margin-right: 5px;" onclick="refreshData(5)">支付宝支付</a><a class="btn btn-primary" onclick="refreshData(6)" style="margin-right: 5px;">银联支付</a>
    </div>
        <!-- ajax查询数轴 -->
    <div>
            <label style="color: green;font-size: 16px;">选择时间</label>
            <input  id="refDate" type="text" maxlength="20" class="laydate-icon form-control layer-date input-sm"/>
              <%-- value="<fmt:formatDate value="${hkOrderStats.refDate}" pattern="yyyy-MM"/>" --%>
    </div>
    
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:500px;"></div>     

 <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
          var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
       option = {
            title: {
                text: '对数轴示例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}'
            },
            legend: {
                left: 'left',
                data: ['2的指数', '3的指数']
            },
            xAxis: {
                type: 'category',
                name: 'x',
                splitLine: {show: false},
                data: xdata,
                 axisLabel :{  
                     interval:0   
                 }  
            },
             grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            yAxis: {
                type: 'log',
                name: 'y'
            },
            series: [
                {
                    name: '1/2的指数',
                    type: 'line',
                    data:ydata
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        
        function refreshData(type){
         var myChart = echarts.init(document.getElementById('main'));
         if(type==1){
             ydata=orderCount;
         }    
         if(type==2){
              ydata=orderAmount;
          }    
          if(type==3){
               ydata=wxpayAmount;
           }    
          if(type==4){
                 ydata=wxpayAmount;
             }    
          if(type==5){
                 ydata=alipayAmount;
             }    
          if(type==6){
                 ydata=unionpayAmount;
             }    
            initEcharts(xdata,ydata);
            //更新数据
           /*  var option = myChart.getOption();
             option.series[0].data =ydata;   
             myChart.setOption(option);   */   
       }
    </script>

4:controller

/**
     * 异步加载折线图信息
     */
    @RequiresPermissions("user")
    @ResponseBody
    @RequestMapping(value ="changeEcharts")
    public Map<String,Object> changgeEcharts(@RequestParam(value="refDate",required=false) String refDate, HttpServletResponse response,Model model, HttpServletRequest request) {
        Map<String, Object> map=Maps.newHashMap();
        HkOrderStats entity=new HkOrderStats();
        if("0".equals(refDate)){
            entity.setRefDate(DateUtils.formatDate(new Date(), "yyyy-MM"));
        }else{
            entity.setRefDate(refDate);
        }
        List<HkOrderStats> list=hkOrderStatsService.findEcharts(entity);
        if(!list.isEmpty()){
            Integer orderCountArray[]=new Integer[list.size()];
            Double orderAmountArray[]=new Double[list.size()];
            Double purseAmountArray[]=new Double[list.size()];
            Double wxpayAmountArray[]=new Double[list.size()];
            Double alipayAmountArray[]=new Double[list.size()];
            Double unionpayAmountArray[]=new Double[list.size()];
            String dateArray[]=new String[list.size()];
            for(int i=0;i<list.size();i++){
                HkOrderStats h=list.get(i);
                orderCountArray[i]=h.getOrderCount();
                orderAmountArray[i]=h.getOrderAmount();
                purseAmountArray[i]=h.getPurseAmount();
                wxpayAmountArray[i]=h.getWxpayAmount();
                alipayAmountArray[i]=h.getAlipayAmount();
                unionpayAmountArray[i]=h.getUnionpayAmount();
                dateArray[i]=h.getRefDate();
            }
            map.put("dateArray",dateArray);
            map.put("orderCountArray", orderCountArray);
            map.put("orderAmountArray", orderAmountArray);
            map.put("purseAmountArray",purseAmountArray);
            map.put("wxpayAmountArray", wxpayAmountArray);
            map.put("alipayAmountArray",alipayAmountArray);
            map.put("unionpayAmountArray", unionpayAmountArray);
        }
        model.addAttribute("hkOrderStatsList", list);
        return map;
    }