0
回答
使用java,ajax,echarts画折线图的时候遇到问题
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

各位网友:

    目前我在使用java(普通的servlet模式),ajax,echarts画双折线图的时候遇到问题谷歌浏览器报错:Uncaught Error: yAxis "0" not found,查了好久一直都没能解决,所以向大家求助。

已知后台可以查询出来数据无异常,然后servler将对象转为json格式响应给前端。以下是主要代码:

 

//前端代码

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="keywords" content="scclui框架">
    <meta name="description" content="scclui为轻量级的网站后台管理系统模版。">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>首页</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
   <script type="text/javascript" src="../common/js/echarts.js"></script>
  </head>
  
 <body>

    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->

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

    <script type="text/javascript">

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

         var colors = ['#5793f3', '#d14a61', '#675bba'];


  var setOption = {
    color: colors,

    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    legend: {
        data:['2015 降水量', '2016 降水量']
    },
    grid: {
        top: 70,
        bottom: 50
    },
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[1]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '降水量  ' + params.value + ':' + params.seriesData[0].data;
                    }
                }
            },
            data: []
        },
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
                lineStyle: {
                    color: colors[0]
                }
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '降水量  ' + params.value + ':' + params.seriesData[0].data;
                    }
                }
            },
            data: []
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name:'2015',
            type:'line',
            xAxisIndex: 1,
            smooth: true,
            data: []
        },
        {
            name:'2016',
            type:'line',
            //xAxisIndex: 1,
            smooth: true,
            data: []
        }
    ]
};


 myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画

   var names=[];    //类别数组(实际用来盛放X轴坐标值)

   var spo2=[];    //血氧数组(实际用来盛放血氧坐标值)

   var pr = [];   //用来存放脉率

     $.ajax({

         type : "post",

         async : true,            //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)

         url : "Spo2Servlet",    //请求发送到TestServlet处

         data : {username:"krk223294247@qq.com"},

         dataType : "json",        //返回数据形式为json

         success : function(result) {

             //请求成功时执行该函数内容,result即为服务器返回的json对象

             if (result.length > 0) {

                    for(var i=0;i<result.length;i++){       

                       names.push(result[i].exmTime); 
                       spo2.push(result[i].spo2);
                       pr.push(result[i].pr);

             
                     }


                    myChart.hideLoading();    //隐藏加载动画

                    myChart.setOption({        //加载数据图表

                        xAxis: {

                            data: names

                        },

                        series: [{

                            // 根据名字对应到相应的系列

                            name: '2015',
                            type:'line',
                            data: spo2

                        },
                        {

                            // 根据名字对应到相应的系列

                            name: '2016',
                            type:'line',
                            data: pr

                        }

                        ]

                    });

                    

             }

         

        },

         error : function(errorMsg) {

             //请求失败时执行该函数

         alert("图表请求数据失败!");

         myChart.hideLoading();

         }

    })
    

 

         

    </script>

    

</body>

</html>

 

//service

public class QuerySpo2 {
    
    /**
     * 
     * @param username
     * @return
     */
    /*查询一天
     * select * from tb_spo2_sampling where date(exm_time) = curdate();
     * 查询一周
    select * from tb_spo2_sampling  where DATE_SUB(CURDATE(), INTERVAL 7 DAY) <= date(exm_time);
    查询一个月
     select * from tb_spo2_sampling  where DATE_SUB(CURDATE(), INTERVAL 1 MONTH) <= date(exm_time);
             */
    
    Connection conn = null;
    PreparedStatement pstmt = null;
    ResultSet rs = null;
    List<SPO2> list = new ArrayList<SPO2>();
    
    public List<SPO2> querySpO2(String username) {
        
        try {
            conn =  ConnectionManager.getConnection();
            String sql = "select * from tb_spo2_sampling  a left outer join tb_user b on "
                    + "a.usr_id = b.usr_id where b.account = ? "
                    + "and  DATE_SUB(CURDATE(), INTERVAL 1 MONTH) <= date(exm_time)";
            pstmt = (PreparedStatement) conn.prepareStatement(sql);
            pstmt.setString(1, username);
            rs =  pstmt.executeQuery();
            while(rs.next()){
                int spo2 = rs.getInt(2);
                int pr   = rs.getInt(3);
                int pi = rs.getInt(4);
                String date = rs.getString("exm_time");
                list.add(new SPO2(spo2,pr,pi,date));
                
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally {
            // 释放资源
            try {
                pstmt.close();
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        return list;
    } 
    public static void main(String[] args) {
        String username = "krk223294247@qq.com";
        QuerySpo2 q = new QuerySpo2();
        List<SPO2> list = q.querySpO2(username);
        System.out.println(list.size());
        
        
    }

}

 

//servlet

 

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        String username = request.getParameter("username");
        QuerySpo2 query = new QuerySpo2();
        List<SPO2> list = query.querySpO2(username);
        System.out.println(list.size());
        ObjectMapper mapper = new ObjectMapper(); // 提供java-json相互转换功能的类
        String json = mapper.writeValueAsString(list); // 将list中的对象转换为Json格式的数组
        // 将json数据返回给客户端
        response.setContentType("text/html; charset=utf-8");
        response.getWriter().write(json);

    }

<无标签>
举报
在我的歌声里
发帖于8个月前 0回/271阅
顶部