场景

若依前后端分离版本地搭建开发环境并运行项目的教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

在上面搭建架构的基础上，实现使用ElementUI的el-date-picker选择一段时间范围，

统计后台数据库中对应时间内的记录数并在柱状图中显示。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、后台设计数据库，新建带时间字段的表

DROP TABLE IF EXISTS `bus_blog`;
CREATE TABLE `bus_blog`  (
  `id` int(0) NOT NULL AUTO_INCREMENT COMMENT 'id',
  `add_time` datetime(0) NOT NULL COMMENT '添加时间',
  `blog_name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '名称',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '博客表' ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

然后表中添加几条带时间的数据

7、前端新建一个组件BarChartDateRange.vue用来显示柱状图

组件代码：

8、然后在主页面中引入该组件

import BarChartDateRange from "@/components/Echarts/BarChartDateRange";

export default {
  name: "Blog",
  components: {
    BarChartDateRange,
  },

并且在主页面添加时间范围选择组件

  

    

      ref="BarChartDateRange">
    
    
class="block">
      picker
        size="large"
        type="daterange"
        v-model="value1"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="dateSelectChange"
        :value-format="dateFormat"
      >
      
    
  

设置时间选择组件的改变事件

@change="dateSelectChange"

实现该方法

    /** 查询博客列表 */
      dateSelectChange(val) {
      if (val) {
        var startDate = new Date(val[0]).getTime();
        var endDate = new Date(val[1]).getTime();
        debugger;
        if (endDate - startDate > 6 * 24 * 60 * 60 * 1000) {
          this.$message({
            message: "所选时间范围不能大于7天",
            type: "warning",
          });
        }else{
           this.$refs.BarChartDateRange.getSelectedRangeList(val);
        }
      }
    },

获取选择的时间进行范围校验，然后通过

 this.$refs.BarChartDateRange.getSelectedRangeList(val);

调用子组件的方法重新查询数据并渲染柱状图

子组件需要声明ref

ref="BarChartDateRange">

在子组件中方法实现

    //父组件调用子组件的该方法进行重新渲染柱状图
    getSelectedRangeList(range) {
      var startDate = range[0];
      var endDate = range[1];
      this.queryParam.beginDate = startDate;
      this.queryParam.endDate = endDate;
      this.getList().then((response) => {
        var res = response.data;
        if (res) {
          this.typeData = [];
          for (var key in res) {
            this.typeData.push({ product: key, 博客数: res[key] });
          }
        }
        this.initChart(this.typeData);
      });
    },

9、柱状图组件完整示例代码

10、显示柱状图的父组件完整示例代码