Echarts通过Ajax实现动态数据加载

Posted 2020-10-21 采菊东篱下，悠然见南山。

　　

一：

    <!-- 引入 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="width: 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
                            },
                            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();        
    }