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=)