echats統計圖表的設計與實現

最近做了項目中統計這一模塊，感受頗多，踩了一些坑。於是分享一下感受！

一. 數據表的設計思路

我這裏做的是訂單的統計，分爲兩種訂單，線下和線上的。直接統計表裏的數據會很慢，因爲數據量很大，維度多，需要多條sql並行，性能會很差，頁面加載的速度會大打折扣。於是我們需要設計兩張表，線下訂單統計表和線上訂單統計表。利用quartz每天統計保存當天的數據到這兩張表中。然後展示的時候我們只從這兩張表中查就會快的多。不過這樣以來，我們只能查詢昨天及之前的數據。具體表字段看產品需要的維度具體設計。
比如我這裏是根據日，周，月來查詢數據的，你的表字段裏就需要創建時間，當前天爲周幾，爲月的第幾周等字段來標示，以便於後期查詢！
實際步驟分爲兩步，第一步：定時任務存，第二步：從數據表取。

二. 圖表 渲染

實現的效果：

echatrs官網demo鏈接http://echarts.baidu.com/examples/#chart-type-pie
這裏有各種圖表demo，支持在線調試編輯，選擇適合自己的樣式！

頁面js構造一個餅圖：

//初始化餅圖方法
function getPie(id, data, content) {
    var myChart = echarts.init(document.getElementById(id));
    option = {
        title: {
            text: '',
            subtext: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: content
        },
        series: [
            {
                name: '數量',
                type: 'pie',
                radius: '65%',
                center: ['50%', '60%'],
                data: data,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 15,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    }
    myChart.setOption(option);
}

構造ajax發送請求獲取後臺數據：

function getPieData(type,timeType) {
    var content = null;
    if (type == 0) {
        content = ["報價單", "對比數據"];
    }
    if (type == 1) {
        content = ["分期訂單", "已完成訂單"];
    }
    $.ajax({
        url: .....,
        data: {
            type: type,
            dateType:timeType
        },
        type: "POST",
        success: function (data) {
            getPie("pie1", data, content);
        }
    })
}

這裏拿到數據後去渲染上面的餅圖,data的格式爲數組。頁面上有什麼模糊的地方，比如哪塊代碼控制哪塊的顯示都可以去官網的demo在線調試get到！

展示幾個我用到的工具類：

 /**
     * 得到當前日期所在周的起始截止日期
     *
     * @param
     * @return
     */
    public static String getFirstAndLastOfWeek(Date date) {
        Calendar cal = Calendar.getInstance();
        cal.setTime(date);
        int d = 0;
        if (cal.get(Calendar.DAY_OF_WEEK) == 1) {
            d = -6;
        } else {
            d = 2 - cal.get(Calendar.DAY_OF_WEEK);
        }
        cal.add(Calendar.DAY_OF_WEEK, d);
        // 所在周開始日期
        String data1 = new SimpleDateFormat("yyyy/MM/dd").format(cal.getTime());
        cal.add(Calendar.DAY_OF_WEEK, 6);
        // 所在周結束日期
        String data2 = new SimpleDateFormat("yyyy/MM/dd").format(cal.getTime());
        return data1 + "-" + data2;
    }

/**
     * 得到當前日期所在月的起始截止日期
     *
     * @param
     * @return
     */
    public static String getFirstAndLastOfMonth(Date date) {
        Calendar calendar = Calendar.getInstance();
        calendar.setTime(date);
        int min = calendar.getActualMinimum(Calendar.DAY_OF_MONTH);// 取得當前月的最小日期(天)
        int max = calendar.getActualMaximum(Calendar.DAY_OF_MONTH);
        calendar.set(Calendar.DAY_OF_MONTH, min);// 設置天
        String start = new SimpleDateFormat("yyyy/MM/dd").format(calendar.getTime());
        calendar.set(Calendar.DAY_OF_MONTH,max);
        String end = new SimpleDateFormat("yyyy/MM/dd").format(calendar.getTime());
        return start+"-"+end;
    }

 /**
     * 查詢日期的前後幾月，
     *
     * @param date，起點時間
     * @param mons，days爲負數時，表示前幾月
     * @return
     */
    public static Date addMonth(Date date, Integer mons) {
        GregorianCalendar cal = new GregorianCalendar();
        cal.setTime(date);
        cal.add(Calendar.MONTH, mons);
        return cal.getTime();
    }

    /**
     * 查詢日期的前後幾周，
     *
     * @param date，起點時間
     * @param weeks，days爲負數時，表示前幾周
     * @return
     */
    public static Date addWeek(Date date, Integer weeks) {
        GregorianCalendar cal = new GregorianCalendar();
        cal.setTime(date);
        cal.add(Calendar.WEDNESDAY, weeks);
        return cal.getTime();
    }

三. 總結

這裏的統計實現方式是最基本的，暫時滿足日常的使用！日後還有很大的優化空間！比如採取緩存提升效率等等。。。看大傢俱體的使用場景了！有問題，歡迎諮詢。。。