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();
    }

三. 总结

这里的统计实现方式是最基本的，暂时满足日常的使用！日后还有很大的优化空间！比如采取缓存提升效率等等。。。看大家具体的使用场景了！有问题，欢迎咨询。。。