根据按钮和日期范围选择器的日期范围来控制图表X轴的显示（日期格式化）

需求：

上方的按钮和时间选择器控制下方柱状图的X轴（时间范围）；本周：包括今天在内的过去7天，本月：这一个月的所有天，全年：本年的所有月；日期范围框的时间在表格中显示为 日

 

 

 

 

 html:

    <el-card style="margin-top: 20px;">
      <div class="button-container">
        <el-button type="text" @click="setTimeRange('week')">本周</el-button>
        <el-button type="text" @click="setTimeRange('month')">本月</el-button>
        <el-button type="text" @click="setTimeRange('year')">全年</el-button>
        <el-date-picker v-model="timeRange" type="daterange" format="yyyy-MM-dd" placeholder="选择日期范围"
          @change="handleDateChange" style="margin-left: 10px;" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" />
      </div>
      <div style="display:flex">
        <div style="width: 65%;">
          <div class="title">
            <div></div>
            <p>全院考核活动扣分趋势</p>
          </div>
          <div id="barChart" style="height: 300px;"></div>
        </div>
        <div style="width: 35%;">
          <div class="title">
            <div></div>
            <p>全院考核活动扣分趋势</p>
          </div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="排名" prop="rank">
              <template #default="scope">
                <span :style="getRankStyle(scope.row.rank)">{{ scope.row.rank }}</span>
              </template>
            </el-table-column>
            <el-table-column label="科室" prop="department"></el-table-column>
            <el-table-column label="扣分次数" prop="scoreCount"></el-table-column>
          </el-table>
        </div>
      </div>
    </el-card>

js：

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      timeRange: [], // 保存选择的日期范围
      barChart: null, // ECharts 实例
      tableData: [
        { rank: 1, department: '心内科', scoreCount: 10 },
        { rank: 2, department: '神经内科', scoreCount: 9 },
        { rank: 3, department: '麻醉科', scoreCount: 8 },
        { rank: 4, department: '重症科', scoreCount: 7 },
        { rank: 5, department: '呼吸内科', scoreCount: 6 },
        { rank: 6, department: '肾内科', scoreCount: 5 },
      ],
    };
  },
  mounted() {
    this.barChart = echarts.init(document.getElementById('barChart')); // 通过 id 初始化 ECharts 实例
    this.updateBarChart('month'); // 默认显示本月数据
  },
  methods: {

    setTimeRange(period) {
      const now = new Date();
      if (period === 'week') {
        const startOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay() + 1); // 从周一开始
        const endOfWeek = new Date(now.getFullYear(), now.getMonth(), now.getDate() - now.getDay() + 7); // 到下周日
        this.timeRange = [startOfWeek.toISOString().split('T')[0], endOfWeek.toISOString().split('T')[0]];
        console.log('this.timeRange  :', this.timeRange);
      } else if (period === 'month') {
        const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
        const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
        this.timeRange = [startOfMonth.toISOString().split('T')[0], endOfMonth.toISOString().split('T')[0]];
      } else if (period === 'year') {
        const startOfYear = new Date(now.getFullYear(), 0, 1);
        const endOfYear = new Date(now.getFullYear(), 11, 31);
        this.timeRange = [startOfYear.toISOString().split('T')[0], endOfYear.toISOString().split('T')[0]];
      }
      this.updateBarChart(period);
    },
    handleDateChange(dates) {
      if (dates && dates.length === 2) {
        this.timeRange = dates;
        this.updateBarChart('custom');
      }
    },
    updateBarChart(period) {
      let xAxisData = [];
      let seriesData = [];
      const today = new Date(); // 先保存今天的日期
      if (period === 'custom') { // 自定义日期范围
        const startDate = new Date(this.timeRange[0]);
        const endDate = new Date(this.timeRange[1]);

        // 生成日期范围内的日期数据
        let currentDate = startDate;
        while (currentDate <= endDate) {
          xAxisData.push(`${currentDate.getMonth() + 1}月${currentDate.getDate()}日`);
          seriesData.push(Math.floor(Math.random() * 101)); // 随机生成0-100之间的数
          currentDate.setDate(currentDate.getDate() + 1); // 增加一天
        }
      } else {
        if (period === 'week') {
          for (let i = 6; i >= 0; i--) {
            const date = new Date(today); // 每次循环创建一个新的日期对象
            date.setDate(today.getDate() - i); // 设置日期为今天减去 i 天
            xAxisData.push(`${date.getMonth() + 1}月${date.getDate()}日`);
            seriesData.push(Math.floor(Math.random() * 101)); // 随机生成0-100之间的数
          }
        } else if (period === 'month') {
          const daysInMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
          for (let i = 1; i <= daysInMonth; i++) {
            xAxisData.push(`${i}日`);
            seriesData.push(Math.floor(Math.random() * 101)); // 随机生成0-100之间的数
          }
        } else if (period === 'year') {
          for (let i = 1; i <= 12; i++) {
            xAxisData.push(`${i}月`);
            seriesData.push(Math.floor(Math.random() * 101)); // 随机生成0-100之间的数
          }
        } 
      }

      const option = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          // axisLine: { show: false }, // 隐藏X轴坐标轴线条
          splitLine: { show: false }, // 隐藏X轴分割线
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          axisLine: { show: false }, // 隐藏Y轴坐标轴线条
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#e8e8e8',
            },
          },
        },
        series: [
          {
            name: '扣分次数',
            type: 'bar',
            data: seriesData,
            itemStyle: {
              color: '#3ba1ff',
            },
          },
        ],
      };

      this.barChart.setOption(option);
    },
    getRankStyle(rank) {
      switch (rank) {
        case 1:
          return { color: 'red' };
        case 2:
          return { color: 'orange' };
        case 3:
          return { color: 'yellow' };
        default:
          return {};
      }
    },
  }
}
</script>

css:

<style lang="scss" scoped>
.title {
  font-weight: 600;
  font-size: 18px;
  color: #333333;
  line-height: 25px;
  text-align: left;
  font-style: normal;
  display: flex;
  margin: 0px;
}

.title>div {
  width: 5px;
  height: 18px;
  background-color: #1384ff;
  border-radius: 2px;
  margin-top: 14px;
  margin-right: 10px;
}

.title>p {
  display: block;
  line-height: 12px;
}
.charts-container {
  display: flex;
  justify-content: space-between;
}

.chart {
  width: 30%;
  height: 200px;
}
.button-container {
  display: flex;
  align-items: center;
  margin: 16px 0;
  justify-content: flex-end;
    /* 确保按钮和选择器靠右 */
  /* 设置按钮和选择器的上下边距 */
}
</style>

 格式化

当月日期格式化为2024-10-25

else if (period === 'month') {
  const now = new Date();
  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); // 当前月份的1号
  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0); // 当前月份最后一天

  // 使用 toLocaleDateString 进行格式化
  const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
  this.timeRange = [
    startOfMonth.toLocaleDateString('en-CA', options), // YYYY-MM-DD 格式
    endOfMonth.toLocaleDateString('en-CA', options)
  ];
  
  this.dateType = '2';
  console.log('222timeRange :', this.timeRange);
}

 日期范围选择器格式化

    handleDateChange(dates) {
      if (dates && dates.length === 2 && dates.every(date => date instanceof Date)) {
        // 定义一个函数来格式化日期  
        const formatDate = (date) => {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，所以需要加1  
          const day = String(date.getDate()).padStart(2, '0'); // 日期需要补零  
          return `${year}-${month}-${day}`;
        };

        // 对每个日期进行格式化
        const formattedDates = dates.map(formatDate);
        // 更新时间范围
        this.timeRange = formattedDates;
        console.log('this.timeRange :', this.timeRange);
      }
    },

完整的（包括当天在内的过去7天，本月1号到月底，本年1月1日到12月31日）

    // 日期切换
    setTimeRange(period) {
      const now = new Date();
      if (period === 'week') {
        const startOfWeek = new Date(now);
        startOfWeek.setDate(now.getDate() - 6); // 设置为过去6天
        const endOfWeek = now;
        this.timeRange = [
          startOfWeek.toISOString().split('T')[0],
          endOfWeek.toISOString().split('T')[0]
        ];
        console.log('111timeRange :', this.timeRange);
        this.dateType = '2';
      } else if (period === 'month') {
        const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); // 当月的1号
        const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0); // 当月最后一天
        // 使用 toLocaleDateString 进行格式化
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        this.timeRange = [
          startOfMonth.toLocaleDateString('en-CA', options), // YYYY-MM-DD 格式
          endOfMonth.toLocaleDateString('en-CA', options)
        ];
        this.dateType = '2';
        console.log('222timeRange :', this.timeRange);
      } else if (period === 'year') {
        const startOfYear = new Date(now.getFullYear(), 0, 1); // 当年的1月1日
        const endOfYear = new Date(now.getFullYear(), 11, 31); // 当年最后一天
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };

        this.timeRange = [
          startOfYear.toLocaleDateString('en-CA', options),
          endOfYear.toLocaleDateString('en-CA', options)
        ];
        console.log('333timeRange :', this.timeRange);
        this.dateType = '1';
      }
      this.updateBarChart(period);
      this.getData();
    },

页面初始化时默认显示当月，可以这样写：

export default {
  data() {
    const now = new Date();
    const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); // 当月的1号
    const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0); // 当月最后一天
    // 使用 toLocaleDateString 进行格式化
    const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
    return {
      timeRange: [
        startOfMonth.toLocaleDateString('en-CA', options), // YYYY-MM-DD 格式
        endOfMonth.toLocaleDateString('en-CA', options)
      ],
    }
}

 对完接口：

    // 日期切换
    setTimeRange(period) {
      const now = new Date();
      if (period === 'week') {
        const startOfWeek = new Date(now);
        startOfWeek.setDate(now.getDate() - 6); // 设置为过去6天
        const endOfWeek = now;
        this.timeRange = [
          startOfWeek.toISOString().split('T')[0],
          endOfWeek.toISOString().split('T')[0]
        ];
        this.dateType = '2';
      } else if (period === 'month') {
        const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); // 当月的1号
        const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0); // 当月最后一天
        // 使用 toLocaleDateString 进行格式化
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        this.timeRange = [
          startOfMonth.toLocaleDateString('en-CA', options), // YYYY-MM-DD 格式
          endOfMonth.toLocaleDateString('en-CA', options)
        ];
        this.dateType = '2';
      } else if (period === 'year') {
        const startOfYear = new Date(now.getFullYear(), 0, 1); // 当年的1月1日
        const endOfYear = new Date(now.getFullYear(), 11, 31); // 当年最后一天
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };

        this.timeRange = [
          startOfYear.toLocaleDateString('en-CA', options),
          endOfYear.toLocaleDateString('en-CA', options)
        ];
        this.dateType = '1';
      }
      this.getbarChart(period);
    },
    getbarChart(period) {
      this.loading = true;
      getAnalyse({
        startTime: this.timeRange[0],
        endTime: this.timeRange[1],
        type: this.dateType,
      }).then((response) => {
        // 全院考核活动扣分趋势
        this.updateBarChart(period, response.data.assessmentActivityScoreTrend);
        // 科室考核活动扣分排名
        this.tableData = response.data.assessmentActivityScoreTrendByDept;
        this.loading = false;
      });
    },
    handleDateChange(dates) {
      if (dates && dates.length === 2 && dates.every(date => date instanceof Date)) {
        // 定义一个函数来格式化日期  
        const formatDate = (date) => {
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始计数，所以需要加1  
          const day = String(date.getDate()).padStart(2, '0'); // 日期需要补零  
          return `${year}-${month}-${day}`;
        };
        // 对每个日期进行格式化
        const formattedDates = dates.map(formatDate);
        // 更新时间范围
        this.timeRange = formattedDates;
        this.getbarChart('custom');
      }
    },
    updateBarChart(period, data) {
      const myChart = echarts.init(document.getElementById('barChart'));
      let xAxisData = [];
      let seriesData = [];
      if (period === 'custom' && data) {
          // 处理后端返回的数据  
          data.forEach(item => {
            const year = item.startDate.split('-')[0];
            const month = item.startDate.split('-')[1];
            const day = item.startDate.split('-')[2];
            // 日期 
            // const date = new Date(year, month - 1, day);
            xAxisData.push(`${month}月${day}日`);
            seriesData.push(item.num);
          });
      } else {
        if (period === 'week' && data) {
          data.forEach(item => {
            const year = item.startDate.split('-')[0];
            const month = item.startDate.split('-')[1];
            const day = item.startDate.split('-')[2];
            const date = new Date(year, month - 1, day);
            xAxisData.push(`${date.getMonth() + 1}月${date.getDate()}日`);
            seriesData.push(item.num);
          });
        } else if (period === 'month' && data) {
          data.forEach(item => {
            const year = item.startDate.split('-')[0];
            const month = item.startDate.split('-')[1];
            const day = item.startDate.split('-')[2];
            xAxisData.push(`${day}日`);
            seriesData.push(item.num);
          });
        } else if (period === 'year' && data) {
          data.forEach(item => {
            const year = item.startDate.split('-')[0];
            const month = item.startDate.split('-')[1];
            // 假设每月1号为数据点  
            const date = new Date(year, month - 1, 1);
            xAxisData.push(`${date.getMonth()+1}月`);
            seriesData.push(item.num);
          });
        } 
      }
      const option = {
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          // axisLine: { show: false }, // 隐藏X轴坐标轴线条
          splitLine: { show: false }, // 隐藏X轴分割线
        },
        yAxis: {
          type: 'value',
          min: 0,
          // max: 100,
          axisLine: { show: false }, // 隐藏Y轴坐标轴线条
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#e8e8e8',
            },
          },
        },
        // 滑块组件
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 100,
            dataBackground: {
              lineStyle: {
                // color: 'white'
              },
              areaStyle: {
                color: '#dedce0'
              }
            },
            backgroundColor: '#ffffff', //组件的背景颜色
            fillerColor: 'rgba(91, 143, 249, 0.15)' //选中范围的填充颜色
          },
          {
            type: 'inside',
            start: 50,
            end: 70
          }
        ],
        series: [
          {
            name: '扣分条数',
            type: 'bar',
            data: seriesData,
            itemStyle: {
              color: '#3ba1ff',
            },
          },
        ],
      };

      myChart.setOption(option);
    },

这里对于后端返回的日期数据2024-10-25有两种处理方法：

1、直接切割数据后提取

    data.forEach(item => {
            const year = item.startDate.split('-')[0];
            const month = item.startDate.split('-')[1];
            const day = item.startDate.split('-')[2];
            xAxisData.push(`${month}月${day}日`);
            seriesData.push(item.num);
          });

2、Date()中的month是从0开始的

          data.forEach(item => {
            const year = item.startDate.split('-')[0];
            const month = item.startDate.split('-')[1];
            const day = item.startDate.split('-')[2];
            const date = new Date(year, month - 1, day);
            xAxisData.push(`${date.getMonth() + 1}月${date.getDate()}日`);
            seriesData.push(item.num);
          });