近一周的线形图

 后端返回的数据格式：

 

    initLineChart(data) {
      // 通过 ID 选择 DOM 元素
      const chartInstance = echarts.init(document.getElementById('line-chart'));
      // 格式化日期的函数  
      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'); // 日期补零  
        const weekdays = ['日', '一', '二', '三', '四', '五', '六'];
        const weekday = weekdays[date.getDay()];
        return `${year}年${month}月${day}日星期${weekday}`;
      };

      // 生成包括今天在内的过去七天的日期数组，并确保当天在最后  
      const today = new Date();
      const lastWeekDates = [];
      for (let i = 7; i >= 1; i--) {
        const date = new Date(today);
        date.setDate(today.getDate() - (i - 1)); // 调整日期，确保当天在最后  
        lastWeekDates.push(formatDate(date));
      }

      // 创建一个映射，将日期字符串映射到 num  
      const numByDateStr = {};
      data.forEach(item => {
        const formattedDate = formatDate(new Date(item.startDate)); // 格式化提供的日期  
        numByDateStr[formattedDate] = item.num;
      });

      // 根据 lastWeekDates 数组填充数据，确保空日期对应0  
      const trendNum = lastWeekDates.map(dateStr => numByDateStr[dateStr] || 0);       // 图表的配置选项
      const option = {
        title: {
          text: '近一周考核活动发布趋势',
          left: 'center', // 将标题左对齐
          top: '10px',  // 可以调整顶部位置
          // left: '45px',  // 可以调整顶部位置
        },
        tooltip: {
          trigger: 'axis',
          formatter: (params) => {
            const date = params[0].name;
            const value = params[0].value;
            return `${date}<br>${value}`;
          },
        },
        xAxis: {
          type: 'category',
          data: lastWeekDates,
          axisLine: {
            show: true,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#e9e9e9',
              type: 'dashed',
            },
          },
        },
        series: [{
          name: '发布数量',
          type: 'line',
          smooth: true,
          itemStyle: {
            color: '#1890ff',
          },
          areaStyle: {
            color: '#e7f4ff',
          },
          data: trendNum,
        }],
      };

      // 使用刚指定的配置项和数据显示图表。
      chartInstance.setOption(option);
      if (chartInstance) {
        chartInstance.resize(); // 窗口调整时更新图表大小
      }
    },