使用ECharts如何從mysql資料庫取數據顯示在頁面？

12-23

在echarts的官網上面去下載一個了小的案例了，
2
注意事項：就是導入echarts包的路徑了，現在的版本有3個了，一個是最大版、一般的，縮減版本，我下的是最大了，反正也沒多大啊，
juqery還是導入吧
3
代碼很簡單的了，很少了，
注意一點就是要按照這個順序來了，我由於沒有沒有按照這個順序了，居然報錯，沒有找到這個dom(main)
4
運行成功了
END

echarts顯示模擬的數據

1
其實也是從後台獲取到的數據，跟資料庫差不多額
我在網上搜的了，很多都是沒有沒寫後台數據啊，親啊，echarts就是用來顯示後台數據的了，
2
後台是數據如下，簡單了，數據自動生成的了，
/**
* app信息的獲取，用echarts顯示
* @param request
* @return
*/
@RequestMapping("/getAllecharts")

public void getAllecharts(HttpServletRequest request,HttpServletResponse response)throws Exception{
List m = (List) new ArrayList();
JSONArray jsons = new JSONArray();
for(int i=0;i<10;i++){
App user = new App();
user.setApp_name("name_" + i);
user.setApp_id(i);
m.add(user);
}
for(int j=0;j<m.size();j++){

JSONObject jsonObject = new JSONObject();
jsonObject.put("user", m.get(j));
jsons.add(jsonObject);
}
response.getWriter().print(jsons);
}
3
還有一個這個
App user = new App();
user.setApp_name("name_" + i);
user.setApp_id(i);

哪裡來的了，就是這個bean或者是entity了
4
這個顯示的代碼是這樣的了，echarts的那個入門案例是一樣的了，只是把它的data改了一下了
下面的代碼都是一樣的了，只是app_id和app_name不一樣額
5
這是主要部分了，直接複製就可以了
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById("main"));
var option = {
tooltip: {

show: true
},
legend: {
data: ["銷量"]
},
xAxis: [
{
type: "category",
data: (function(){
var arr=[];

$.ajax({
type : "post",
async : false, //同步執行
url : "/test_ssh/app/getAllecharts",
data : {},
dataType : "json", //返回數據形式為json
success : function(json) {
if (json) {
for(var i=0;i<json.length;i++){
console.log(json[i].context);

arr.push(json[i].user.app_name);
}
}
},
error : function(errorMsg) {
alert("不好意思,圖表請求數據失敗啦!");
myChart.hideLoading();
}
})
return arr;

})()
}
],
yAxis: [
{
type: "value"
}
],
series: [
{

"name": "銷量",
"type": "bar",
"data":(function(){
var arr=[];
$.ajax({
type : "post",
async : false, //同步執行
url : "/test_ssh/app/getAllecharts",
data : {},
dataType : "json", //返回數據形式為json
success : function(json) {
if (json) {
for(var i=0;i<json.length;i++){
console.log(json[i].context);
arr.push(json[i].user.app_id);
}
}
},
error : function(errorMsg) {
alert("不好意思,圖表請求數據失敗啦!");
myChart.hideLoading();
}
})
return arr;
})()
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
6
代碼運行結果
END