java 中对v-charts统计图 data 对象的封装

前两天在工作上遇到一个开发需求，是需要把某个数据表中的数据按照特定的条件进行分组统计，然后以统计图表的形式展示，分组条件，我就去学习了一下v-charts这个插件，发现它需要的数据模型是下面这样的：

chartData: {
    columns: ['日期', '访问用户', '下单用户', '下单率'],
    rows: [
        { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
        { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
        { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
        { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
        { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
        { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
   ]
}

我们可以把这个对象看作一个表，其中，columns 相当于是表头，用于定义字段，而rows用于存数据数组，在其中给每个字段赋值。然后，我们还可以发现，‘日期’这个字段是作为图表的x轴来展示的，后面的字段则是作为图例，y轴则是显示统计量，如图所示，是v-charts 官网的实例：

然后，我们就可以在后端java中来拼装这个数据对象了。

我们在java实体包中定义一个ChartData 类，在其中定义两个私有属性：

List<String> columns（或者 String[] columns）和 List<HashMap<String, Object>> rows

并为它们加上 get 和 set 方法，我们就创建了一个通用的v-chart数据模型类

我们还需要定义一个实体类，假设叫CountByGroup，用于保存mybatis(或者其它框架中DAO层插件)查询返回的数据，这里面的字段根据实际的数据表来定，字段一般包括分组的字段、以及分组统计量

然后，我们在Controller中写好相关接口，接收相关查询条件，然后等待调用Service的方法，在Service层定义的方法，返回值是一个 ChartData 对象，Service 方法里面需要调用DAO层来获取分组统计数据，接收数据的对象就用CountByGroup,DAO层的sql就同学们自行解决吧。

然后，我们获取到的是一个 List<CountByGroup> 类型的集合，此时，我们需要考虑用什么字段来作为表的x轴，比如，我做的例子中，是按照月份(month)来做x轴的，而后面的图例字段则是用各个不同的状态。

这里，我们需要考虑一个问题：month这个字段，是我们已经确定了的，那后面的状态（status属性呢？他有可能只是一个字段，又或者是一张状态数据表，不管哪一种，数据都是变化的，通常，有几个状态，我们就需要在Map中put 几个键值对。

上面提到，我们应该是拿到了DAO层提供的 List<CountByGroup> 集合，然后，我们就需要对该集合进行遍历，然后拼装我们的ChartData对象了。

假设我们查询一年内按月和状态来分组查询所有状态的统计，那么我们首先要定义如下几个变量：

    List<Date> months 或者 List<String> month，月份，最好用String

    List<String> columns,用于存字段

    List<HashMap<String, Object>> rows,用于存数据

我们遍历 months,取出其中的月份month，并定义一个HashMap<String, Object> row，然后给row put 第一个属性：

row.put("month", month);

在里面遍历List<CountByGroup>集合，取其中的CountByGroup 对象，判断其中的日期所在月份，如果与 month 相符，则，那么执行：

    row.put(key，value);其中，key 是根据状态值type动态拼接的，比如:

    row.put("type_" +  countByGroup.getType, countByGroup.getCount())

    同时，在这里，我们需要判断columns 中是否有"type_" +  countByGroup.getType这个元素，如果没有就加进去，完了我们需要对columns进行排序，需要把 month 这个元素移到第一个（因为month 表示x轴，需要放第一个）

在循环赋值完成后，我们为了界面的美观，可以把一些Map对象中没有的key,设置为0，尤其是在做折线统计图的时候，曲线过度平滑，效果极好

一次循环里的逻辑完了之后，我们需要把 row 对象 add 到 rows 集合中

最后，我们需要把rows 和 columns 这两个集合赋值给 ChartData 对象并返回。然后在Controller 中就可以对得到的ChartData对象稍做处理，返回给前端使用啦！

   这是自己摸索出来的一些东西，比较适合前端用vue，后端用Spring 的项目，希望对大家有用 ,附上v-charts官网地址:v-charts官网