echart获取数据库中的内容附上下载地址，可以自己去下载
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;
}
但是我试了一下，当我查询蒸发量的时候，所有的数据都已经被查出来了，但是一月和十二月的数据却没有显示，这让我郁闷的很，后来改成下面的就可以了。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/esl.js"></script>
</head>
<body>
<div id="main" style="height:400px"></div>
<script type="text/javascript">
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(){
url: "../do/mon/getZfl",
arrStr = eval('('+data+')');
});
// 使用
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);
);
</script>
</body>
这里是将所有的结果分开，我只获取它的月份，让后添加到数组中。
@RequestMapping("/getMon")
public @ResponseBody String[] queryMon(){
Demo demo = new Demo();
String mon = null ;
List<Demo> 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);
![Java小案例——随机数猜测随机数猜测[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)