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(){
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);
}
);
</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);
}
return array;
}
谨以纪念,我为此费劲的脑细胞····
转载于:https://blog.51cto.com/lmq4930/1423138