echarts ajax数据加载方法

　　

一：

    <!-- 引入 echarts.js -->
    <script type="text/javascript" src="echarts.min.js"></script>
    <!-- 引入jquery.js -->
    <script type="text/javascript" src="jquery-1.12.3.js"></script>

二：

　　　<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style=" 600px;height:400px;"></div>

三：

function showView(){
            $("#view").show();
            
            //初始化echarts实例
            var myChart = echarts.init(document.getElementById('view'));
            // 显示标题，图例和空的坐标轴
             myChart.setOption({
                 title: {
                     text: '异步数据加载示例'
                 },
                 tooltip: {},
                 legend: {
                     data:['注册数量']
                 },
                 xAxis: {
                     data: []
                 },
                 yAxis: {},
                 series: [{
                     name: '注册数量',
                     type: 'bar',
                     data: []
                 }]
             });
           myChart.showLoading();     //数据加载完之前先显示一段简单的loading动画

            var names=[];   　　　　   //日期数组（实际用来盛放X轴坐标值）
            var nums=[];   　　　　　  //注册数量数组（实际用来盛放Y坐标值）
            
             $.ajax({
                type: "POST",
                dataType: "JSON",
                url:"${pageContext.request.contextPath}/back/customerData/getViewList.action",
                success:function(data){
                    if(data.rows){
                         for(var i=0;i<data.rows.length;i++){ 
                               names.push(data.rows[i].registTime);     //挨个取出类别并填入类别数组
                             }
                         for(var i=0;i<data.rows.length;i++){       
                               nums.push(data.rows[i].registerDay);     //挨个取出类别并填入类别数组
                             }
                         myChart.hideLoading();    　　　　　　　　　　　　//隐藏加载动画
                         myChart.setOption({       　　　　　　　　　　　　//加载数据图表
                            xAxis: {
                                data: names
                            },

　　　　　　　　　　　　　　　　　　dataZoom : {
　　　　　　　　　　　　　　　　　　　　show : true,
　　　　　　　　　　　　　　　　　　　　realtime : true,
　　　　　　　　　　　　　　　　　　　　start :70,　　　　　　　　　　       　　//数据加载百分比   从70%开始加载     即ajax返回100条数据 只从第70条开始加载 到100条位置 但是可以滑动查看前面70条
　　　　　　　　　　　　　　　　　　　　end : 100　　　　　　　　　　　　　　 　　//数据加载百分比   到100%结束加载
　　　　　　　　　　　　　　　　　　},

                            series: [{
                               　　　　　　　　　　　　　　　　　　　　　　 // 根据名字对应到相应的系列
                                name: '注册数量',
                                data: nums
                            }]
                            })
                    }else{
                        msgShow("系统提示", "数据查询错误", "warning");
                    }
                },
            }); 
            
            //使用制定的配置项和数据显示图表
            myChart.setOption(option);
        }

四：后台Action

public void getViewList() throws Exception{
        
        String sql = "    SELECT DATE_FORMAT(f.registDate, '%Y-%m-%d') AS registTime,COUNT(f.flowingId) AS registerDay"
                +"        FROM shop_invitation_flowerwater AS f"
                +"        GROUP BY registTime";        
        customerList = customerDataService.findListMapBySql(sql);
        
        Map<String, Object> jsonMap = new HashMap<String, Object>();　  　// 定义map
        jsonMap.put("rows", customerList);                            　　// rows键 存放每页记录 list
        JsonConfig jsonConfig = new JsonConfig();
        jsonConfig.registerJsonValueProcessor(Date.class, new JSONFormatDate("yyyy-MM-dd HH:mm:ss"));
        JSONObject jo = JSONObject.fromObject(jsonMap, jsonConfig);      // 格式化result
        jo.accumulate("isSuccess","true");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(jo.toString());
        out.flush();
        out.close();        
    }