Echart折線圖 Sql總結

這裏寫圖片描述
這裏寫圖片描述
現在前端想要獲取車輛的閒置數量,用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折線圖獲取數據。
顯示效果如圖:
這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章