一、介紹
通過ECharts餅狀圖展示數據庫中的數據信息，通過ajax發送請求從後臺獲取數據，將數據通過js在ECharts展示出來。主要實現在數據庫表中，查詢有多少個項目培訓類型，參與每一個項目的有多少人，將這些數據通過餅狀圖的形式展現出來。
二、java後臺代碼
//dao層
@Select("select traintype,count(traintype) as traintypenum from v_all group by traintype")
public List<All> getTrainTypeNuminfo();
//service層
public List<All> getTrainTypeNuminfo(){
return integratedQueryMapper.getTrainTypeNuminfo();
}
//Controller層
@RequestMapping(value = "/getTrainInforStatic",method = {RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public List<All> getTrainInforStatic(HttpSession session){
List<All> getTrainTypeNuminfo = integratedQueryService.getTrainTypeNuminfo();
return getTrainTypeNuminfo;
}三、前臺代碼
3.1 前臺代碼1
如下的前臺代碼，js只用來對Echarts的餅狀圖賦值數據，會產生沒有餅狀圖標題，統計數據信息：
$(function(){
var myChart = echarts.init(document.getElementById('main'));
/* data1 表示每個餅狀圖的名字，每個培訓類型
data2 表示每個餅狀圖，即每個培訓類型的統計結果
*/
var data1=[];
var data2=[];
var array=[];
option = {
title : {
text: '培訓信息數據統計',
/*subtext: '',*/
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
/*data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']*/
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
/*data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:234, name:'聯盟廣告'},
{value:135, name:'視頻廣告'},
{value:1548, name:'搜索引擎'}
]*/
data:[]
}
]
};
$.ajax({
type:"post",
url:"/getTrainInforStatic",
data:{},
cache:false,
async: false,
dataType:"json",
success : function (result) {
for(var i in result){
data1.push(result[i].traintype);
data2.push(result[i].traintypenum);
var map={};
map.name=result[i].traintype;
map.value=result[i].traintypenum;
array[i]=map;
}
myChart.setOption({ //加載數據圖表
legend : {
data : data1
},
series : {
// 根據名字對應到相應的系列
name : ['數量'],
type:'pie',
data : array
}
});
},
error : function(result) {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myChart.hideLoading();
}
});
})
通過上圖可以看出，沒有標題，並且將鼠標懸浮在每個餅狀圖上，無法顯示統計的信息。
3.2 前臺代碼2
爲了解決上述情況，將整個option放置在ajax的success函數裏，將解決上述問題。
<script>
$(function(){
var myChart = echarts.init(document.getElementById('main'));
/* data1 表示每個餅狀圖的名字，每個培訓類型
data2 表示每個餅狀圖，即每個培訓類型的統計結果
*/
var data1=[];
var data2=[];
var array=[];
$.ajax({
type:"post",
url:"/getTrainInforStatic",
data:{},
cache:false,
async: false,
dataType:"json",
success : function (result) {
for(var i in result){
data1.push(result[i].traintype);
data2.push(result[i].traintypenum);
var map={};
map.name=result[i].traintype;
map.value=result[i].traintypenum;
array[i]=map;
}
myChart.setOption({ //加載數據圖表
title : {
text: '培訓信息數據統計',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:data1
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'統計結果:',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:array
}
]
});
},
error : function(result) {
//請求失敗時執行該函數
alert("圖表請求數據失敗!");
myChart.hideLoading();
}
});
})
</script>
<body>
<div id="main" style="height:560px"></div>
</body>運行結果如下所示：
四、數據庫數據信息
select traintype,count(traintype) as traintypenum from v_all group by traintype上述的SQL代碼運行結果如下：
前臺debug測試array和data1數組元素如下：
