java折线图不同步的问题_使用java，ajax，echarts画折线图的时候遇到问题

各位网友：

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

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

//前端代码

首页

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

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();

}

})

//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 list = new ArrayList();

public List 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 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 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);

}