echarts折线图获取mysql,ECharts获取数据库中的内容

echarts是一个对于我完全陌生的事务，也许，它曾经出现在某个我浏览的网页上，但我是真的不认识它。哎，官网也真是的，每次给的demo全是死的数据，你让我们这些什么都不会的人怎么看啊。哪还有人用死的数据啊。网上的解决方法也大都是php什么的，看了也白看，只能自己来了。

这里的示例本来是一个降水量的柱形图，我在数据库创建了一个demo表，字段有：mon,jsl,zfl。让图表横坐标显示月份，柱形图显示蒸发量(zfl)。需要注意的是，在开始写的时候google的控制台一直报错，说$没有定义，查了一下，说是jquery要放在做前面，我试了一下还是不行，后来发现是路径的问题。

主要的解决方法就是将 xAxis 、 series 中的date改成调用别的方法。在这里使用了getXX()来获取数组。由于对hibernate也不是很了解，我利用sql查询表中的一个字段时返回出了错。于是又自己写了一个方法，调用查询所有的信息，在利用数组和for循环将值传到数组中，返回到js中。本来在网上查找到的ajax方法是这样写的：

function getMonth(){

var arrStr = new Array();

$.ajax({

type: "POST",

url: "syncData.jsp?line=0&r="+Math.random(),

dataType:"text",

async:false,  //同步

success: function(data){

eval(data);

var dataChart = data.dataChart.split(",");

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

arrStr.push(dataChart[i]);

}

}

});

return arrStr;

}

但是我试了一下，当我查询蒸发量的时候，所有的数据都已经被查出来了，但是一月和十二月的数据却没有显示，这让我郁闷的很，后来改成下面的就可以了。

ECharts

require.config({

paths:{

'echarts' : 'http://echarts.baidu.com/build/echarts',

'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'

}

});

function getXname(){

var arrStr = [];

$.ajax({

type: "POST",

url: "../do/mon/getMon",

dataType:"text",

async:false,  //同步

success: function(data){

arrStr = eval('('+data+')');

}

});

return arrStr;

}

//x轴

function getMonth(){

var arrStr = [];

$.ajax({

type: "POST",

url: "../do/mon/getZfl",

dataType:"text",

async:false,  //同步

success: function(data){

arrStr = eval('('+data+')');

}

});

return arrStr;

}

// 使用

require(

[

'echarts',

'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

],

function(ec) {

// 基于准备好的dom，初始化echarts图表

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

var option = {

//提示框，鼠标悬浮交互时的信息提示

tooltip: {

show: true

},

//图例，每个图表最多仅有一个图例

legend: {

data:['蒸发量']

},

//横轴数组，

xAxis : [

{

type : 'category',  //横轴默认类目型是category

data : getXname()

}

],

//纵轴数组

yAxis : [

{

type : 'value'   //纵轴默认类目型value

}

],

//驱动图表生成的数据内容数组

series : [

{

"name":"蒸发量",

"type":"bar",

"data": getMonth()

}

]

};

// 为echarts对象加载数据

myChart.setOption(option);

}

);

这里是将所有的结果分开，我只获取它的月份，让后添加到数组中。

@RequestMapping("/getMon")

public @ResponseBody String[] queryMon(){

Demo demo = new Demo();

String mon = null ;

List demolist = service.findDemoMon();

System.out.println(demolist.size());

String[] array = new String[demolist.size()] ;

for(int i = 0 ; i < demolist.size() ; i++){

demo = demolist.get(i);

long dmon = demo.getMon();

mon = Long.toString(dmon) + "月";

array[i] = mon;

System.out.println(mon);

}

return array;

}

谨以纪念，我为此费劲的脑细胞····