laravel + vue实现的数据统计绘图（今天、7天、30天数据）

下面是讲解“laravel+vue实现的数据统计绘图”的攻略：

1. 确定需求和框架选择

首先，我们需要确定本次需求是实现某个网站的数据统计功能，需要使用何种框架实现。本次攻略选择了Laravel作为后端框架，并结合Vue来完成前端部分。

2. 数据获取和处理

接下来，我们需要考虑如何获取并处理需要的数据。在Laravel中，可以使用官方的ORM(Eloquent)来实现对数据库的数据操作。我们需要在Laravel中编写相应的控制器，以响应前端的请求，获取需要的数据并以JSON格式返回给前端。

对于不同时间范围的数据统计，我们可以通过编写不同的查询条件来实现。例如，我们可以编写一个getTodayData方法来获取今天的数据，一个getLast7DaysData方法获取过去7天的数据，一个getLast30DaysData方法获取过去30天的数据。

3. 绘制图表

获得所需数据之后，我们需要将其可视化，这里我们选择使用Echarts图表框架。在Vue中，官方提供了 vue-echarts 组件方便我们使用Echarts。

以获取今天的数据为例，具体实现过程如下：

① 在Vue中，将 vue-echarts 组件引入：

<template>
  <div>
    <v-chart ref="chart"></v-chart>
  </div>
</template>

<script>
import ECharts from "vue-echarts";

export default {
  components: {
    VChart: ECharts
  }
};
</script>

② 在控制器中编写 getTodayData 方法:

public function getTodayData()
{
    $data = DB::table('table_name')->where('created_at', '>=', now()->startOfDay())
        ->where('created_at', '<=', now())->get();

    return $data;
}

③ 将数据传递给前端并使用 vue-echarts 组件绘制折线图:

import axios from "axios";

export default {
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      axios.get("/api/getTodayData").then(response => {
        let todayData = response.data;

        this.renderChart(todayData)
      });
    },
    renderChart(data) {
      const chartData = {
        xAxis: {
          type: "category",
          data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: data,
            type: "line"
          }
        ]
      };

      this.$refs.chart.setOption(chartData);
    }
  }
};

这样，我们就实现了以折线图的形式展示今日数据的功能。

4. 实现其他时间范围的数据统计

对于获取不同时间范围的数据，我们只需要在控制器中编写不同的方法，例如 getLast7DaysData 和 getLast30DaysData，并在前端中对应的地方调用这些方法即可。

示例1：获取过去7天的数据，与获取今日数据类似：

① 在控制器中编写 getLast7DaysData 方法:

public function getLast7DaysData()
{
    $data = DB::table('table_name')->where('created_at', '>=', now()->subDays(6)->startOfDay())
        ->where('created_at', '<=', now())->get();

    return $data;
}

② 将数据传递给前端并使用 vue-echarts 组件绘制折线图:

import axios from "axios";

export default {
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      axios.get("/api/getLast7DaysData").then(response => {
        let last7DaysData = response.data;

        this.renderChart(last7DaysData)
      });
    },
    renderChart(data) {
      const chartData = {
        xAxis: {
          type: "category",
          data: ["Day1", "Day2", "Day3", "Day4", "Day5", "Day6", "Day7"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: data,
            type: "line"
          }
        ]
      };

      this.$refs.chart.setOption(chartData);
    }
  }
};

示例2：获取过去30天的数据。和示例1相似，这里不再赘述示例代码。

5. 总结

通过本次攻略，我们实现了一个基于 Laravel + Vue 平台的数据统计绘图应用。在实现过程中，我们了解了Laravel框架的使用和数据获取/处理方法，同时也学习了Vue中使用Echarts绘制图表的方法，希望对大家有所帮助。