创新项目实训-个人记录(六)

 一、图表数据的获取，条形折线图

实现了日报周报的文字部分的获取与展示后，要完成图表部分。

首先是条形折线图，横坐标为一周七天，纵坐标为心情值评分。需要将本周日志传给模型，让其对日志进行心情值评分，返回评分数值。难点在于：

1.先前的博客中有写，全部日志是组装起来一次传给模型的，而非一次传一篇，那样效率太低。所以问题在于如何让模型对这里面的每一篇日志都进行评分，返回评分。

2.对返回的心情值评分进行数据处理，得到一周每一天的心情值评分，将这些数值传给前端，解析API返回结果，生成饼状图。

基于上述分析，编写getMoodMark方法。在for (Blog blog : weekBlogs)循环中遍历每篇日志，将日志传给模型的过程也需要包含在这个for循环中，这样才能解决问题1，对每一篇日志都进行分类，而非组装后的日志总和。

为了将周几和心情值评分对应起来，建立一个Map映射，将评分结果按周几存储，天数作为key，相应的评分数组作为value。

用正则表达式模式获取评分的数字部分，使用Matcher对marks进行匹配。while循环查找所有匹配的评分，并将匹配的评分转换为整数存储在scores数组中，递增计数器i，确保每个评分值都能对应一周中的一天。

最后将scores数组存储在映射中，return response给前端。

现在只是完成了Controller中方法的编写，但具体怎么在前端解析API返回的结果生成条形折线图，还需要通过调试不断修改前后端代码。

对API进行测试，可以看到最后返回给前端的数据格式，如下：

根据这个在前端解析API返回结果，基于echarts生成条形折线图。

在data()return里加上moodMark，在methods里编写fetchMoodMark()方法，点击按钮绑定事件。

基于之前的博客完成的echarts图，修改series中的data为this.moodMark。

这里调试了很久，前端还是显示不出任何东西。

最后找到问题在于，后端返回的是"daysOfWeek"，所以不能是res.data，而应该是res.daysOfWeek，修改了这里，图就能够正确显示了。在这里也感谢和我一起调试找问题的队友。

将bar的data也改为this.moodMark，条形和折线就都能显示出来了。

二、后续工作

在这里卡了很久，好在最后还是解决了，数据的正确获取太重要了，再次感谢帮我找到问题的队友，条形折线图完成了，接下来还要实现饼状图。