現在前端想要獲取車輛的閒置數量,用Echart表格展示出來。
問題有兩個:
一是:sql 語句怎麼寫?問題描述:閒置數量是根據上傳GPRS數據進行統計。這裏閒置數量是當日里程小於3KM,則,爲閒置數量。難點是通過數據庫中查詢每天的閒置數量,並通過時間進行排序升序排序。而Date爲String類型,所以要進行時間格式的轉換。而查出來是數量,是數據庫中沒有的字段。可以用DO處理,上一篇文章已經說過。現在給出完整Sql,如下
SELECT date_format( searchtime, '%Y-%m-%d %H-%m-%s' ) AS searchtime, sum(licheng < 3) AS count FROM cx_reportoneday WHERE licheng < 3 GROUP BY searchtime ORDER BY searchtime ASC
查詢結果是:
二是:如何封裝Json 格式數據傳送到前臺?前臺接收的Json格式如圖:
?
給出相關代碼:
@RequiresPermissions("admin:echart:freecount")
@RequestMapping(value="/echart/freecount",method=RequestMethod.POST)
@ResponseBody
public EchartDataVO loadData(){
List<String> category = new ArrayList<String>();
List<Integer> serisData=new ArrayList<Integer>();
List<Freecount> list = freecountService.findCar_FreeCount();
for (Freecount totalNum : list) {
category.add(totalNum.getSearchtime());
serisData.add(totalNum.getCount());
}
List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "順豐車輛在線數量統計" }));// 數據分組
List<SeriesVO> series = new ArrayList<SeriesVO>();// 縱座標
series.add(new SeriesVO("車輛閒置數量", "line", serisData));
EchartDataVO targetdata = new EchartDataVO(legend, category, series);
return targetdata;
}
VO代碼:
/**
* E -Chart 顯示數據
*/
public class SeriesVO<T> {
public String name;
public String type;
public List<T> data;// 這裏要用int 不能用String 不然前臺顯示不正常(特別是在做數學運算的時候)
public SeriesVO(String name, String type, List<T> data) {
super();
this.name = name;
this.type = type;
this.data = data;
}
}
EchartVO代碼
public class EchartDataVO {
public List<String> legend = new ArrayList<String>();// 數據分組
public List<String> category = new ArrayList<String>();// 橫座標
public List<SeriesVO> series = new ArrayList<SeriesVO>();// 縱座標
public EchartDataVO(List<String> legendList, List<String> categoryList,
List<SeriesVO> seriesList) {
super();
this.legend = legendList;
this.category = categoryList;
this.series = seriesList;
}
}
前臺代碼:
<script type="text/javascript">
showBar();
function showBar(){
var myChart = echarts.init(document.getElementById('main2'));
//圖表顯示提示信息
myChart.showLoading();
//定義圖表options
var options = {
color : [ '#1abc9c' ],
title : {
text : "順豐車輛閒置數量統計"
},
tooltip : {
trigger : 'axis'
},
legend : {
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,
xAxis : [ {
type : 'category',
data : []
} ],
yAxis : [ {
type : 'value',
splitArea : {
show : true
}
} ],
series : [ {
barWidth : '60%'
} ]
};
//通過Ajax獲取數據
$.ajax({
type : "post",
async : false, //同步執行
url : "${basePath}/admin/echart/freecount",
dataType : "json", //返回數據形式爲json
success : function(result) {
if (result) {
//將返回的category和series對象賦值給options對象內的category和series
//因爲xAxis是一個數組 這裏需要是xAxis[i]的形式
options.xAxis[0].data = result.category;
options.series = result.series;
options.legend.data = result.legend;
myChart.hideLoading();
myChart.setOption(options);
}
},
error : function(errorMsg) {
alert("圖表請求數據失敗啦!");
}
});
}
</script>
至此完畢!《end》
總結用到的知識點,一,複雜的Sql,二,Mybatis中處理字段不對應的關係,三,封裝Json格式數據,四,前臺通過Ajax異步請求數據。完整Echart折線圖獲取數據。
顯示效果如圖: