vue2server2 1.0.21

package/frontEnd/src/pages/LineChartPage.vue

@@ -0,0 +1,573 @@
+<template>
+  <div class="page">
+    <!-- 年份选择工具栏，切换不同年份的趋势数据 -->
+    <div class="toolbar">
+      <el-select v-model="selectedYear" size="small" @change="onYearChange('hand')">
+        <el-option v-for="y in yearOptions" :key="y" :label="y + '年'" :value="y" />
+      </el-select>
+      <el-select v-model="selectedDate" size="small" style="margin-left:8px" @change="onDateChange('hand')">
+        <el-option v-for="d in xAxis" :key="d" :label="d" :value="d" />
+      </el-select>
+      <!-- 当前视图最后一条数据展示区 -->
+      <div class="info">
+        <span>最后数据：</span>
+        <strong>{{ lastLabel || '-' }}</strong>
+        <span>值：</span>
+        <strong>{{ lastValue === null ? '-' : lastValue }}</strong>
+      </div>
+    </div>
+
+    <!-- 折线图容器 -->
+    <div ref="chartRef" class="chart"></div>
+  </div>
+</template>
+
+<script>
+// 使用 ECharts 绘制折线图
+import * as echarts from 'echarts'
+// 调用后端接口获取指定年份的每日趋势数据
+import { getTrend } from '../api/mock'
+
+export default {
+  name: 'LineChartPage',
+  data() {
+    return {
+      /**
+       * ECharts 图表实例对象
+       * 用于执行 setOption、resize、dispose 等操作
+       */
+      chartInstance: null,
+
+      /**
+       * 当前选中的年份
+       * 初始化默认为当前系统年份
+       */
+      selectedYear: new Date().getFullYear(),
+
+      /**
+       * 可选年份列表
+       * 用于下拉框筛选数据，目前静态配置了 2020-2026 年
+       */
+      yearOptions: [  2025, 2026],
+
+      /**
+       * 固定视口宽度（单位：天）
+       * 核心配置项：决定了图表中一次性展示多少天的数据
+       * 配合 dataZoom 事件逻辑，强制保持视窗大小不变，仅允许左右平移
+       */
+      windowSize: 31,
+
+      /**
+       * 数据总点数
+       * 即 xAxis/series 数组的长度，用于计算 dataZoom 的百分比与索引映射
+       * 在 loadData/extendLeft/extendRight 时会更新此值
+       */
+      totalPoints: 0,
+
+      /**
+       * 当前视窗的数据区间状态
+       * @property {number} startValue - 视窗起始数据索引（包含）
+       * @property {number} endValue - 视窗结束数据索引（包含）
+       * 始终满足：endValue = startValue + windowSize - 1
+       * 用于在 slider（底部滑块）和 inside（鼠标拖拽）两种交互模式间同步状态
+       */
+      dataZoomState: { startValue: 0, endValue: 30 },
+
+      /**
+       * x轴数据缓存（日期字符串数组）
+       * 格式示例：['2023-01-01', '2023-01-02', ...]
+       * 会随着左右滑动触发的数据动态加载（拼接）而增长
+       */
+      xAxis: [],
+
+      /**
+       * y轴数据缓存（数值数组）
+       * 与 xAxis 一一对应
+       */
+      series: [],
+
+      /**
+       * 当前选中的具体日期
+       * 对应顶部日期下拉框的值，与图表视窗联动
+       */
+      selectedDate: '',
+      isExtendingRight: false,
+
+      /**
+       * 视窗最右侧（最新）数据的日期标签
+       * 用于顶部“最后数据”展示区
+       */
+      lastLabel: '',
+
+      /**
+       * 视窗最右侧（最新）数据的数值
+       * 用于顶部“最后数据”展示区
+       */
+      lastValue: null
+    }
+  },
+  watch: {
+    lastLabel(newVal) {
+      if (newVal) {
+        this.selectedYear = parseInt(newVal.slice(0, 4))
+        this.selectedDate = newVal
+      }
+    }
+  },
+  mounted() {
+    // 初始化时拉取默认年份的数据
+    // 判断当前年份的天数是否已经满足31天。如果不满足需要请求前一年的数据和当前年份数据合并
+    this.loadData()
+    window.addEventListener('resize', this.handleResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.handleResize)
+    if (this.chartInstance) {
+      this.chartInstance.dispose()
+      this.chartInstance = null
+    }
+  },
+  methods: {
+    /**
+     * 拉取指定年份的趋势数据，并初始化图表
+     * 含初次拼接相邻年份的数据
+     */
+    async loadData(year = this.selectedYear) {
+      const merged = await this.assembleInitialData(year)
+      const x = merged.map(i => i.label)
+      const y = merged.map(i => i.value)
+      this.xAxis = x
+      this.series = y
+      this.initChart(x, y, year)
+      this.selectedDate = x.length ? x[x.length - 1] : ''
+    },
+    /**
+     * 年份变化时重新加载数据
+     */
+    onYearChange(type) {
+      if (type === 'hand') {
+        if (this.chartInstance) {
+          this.chartInstance.dispose()
+          this.chartInstance = null
+        }
+        this.xAxis = []
+        this.series = []
+        this.totalPoints = 0
+        this.dataZoomState = { startValue: 0, endValue: this.windowSize - 1 }
+        this.lastLabel = ''
+        this.lastValue = null
+        this.loadData(this.selectedYear)
+      }
+
+    },
+    /**
+     * 初始化图表并应用固定 31 天视口窗口
+     *
+     * 参数说明：
+     * @param {string[]} xAxisData - 全年每日的类目轴标签数组，按天排列。
+     *   - 期望格式：YYYY-MM-DD（显示时可能裁剪为 MM-DD 以提升密度）
+     *   - 长度：与 seriesData 等长
+     * @param {number[]} seriesData - 与 xAxisData 一一对应的数值数据序列。
+     *   - 每个元素代表对应日期的数值
+     *   - 长度：与 xAxisData 等长
+     * @param {number} year - 当前选择的年份，用于设置图表标题与语义。
+     *
+     * 行为与步骤：
+     * 1) 销毁已有 ECharts 实例（若存在），避免内存泄漏与配置残留
+     * 2) 初始化新实例，并记录数据总长度 totalPoints
+     * 3) 设置初始 dataZoomState 区间为 [0, windowSize-1]，窗口宽度固定为 31 天
+     * 4) 构建并设置 option：
+     *    - title/tooltip：基本信息与提示
+     *    - grid：为密集标签与滑块预留空间
+     *    - dataZoom：包含 slider 与 inside，开启 zoomLock，禁止缩放，仅允许平移
+     *    - xAxis/yAxis：类目轴与数值轴，xAxis 的标签密度与格式已优化
+     *    - series：折线图数据（平滑）
+     * 5) 绑定 dataZoom 事件：根据用户拖动自动维持窗口固定宽度，并做边界约束
+     * 6) 调用 updateLastViewPoint：更新顶部“最后数据”展示（日期与值）
+     *
+     * 前置条件：
+     * - xAxisData.length === seriesData.length
+     * - windowSize <= xAxisData.length
+     *
+     * 副作用：
+     * - 更新 this.chartInstance / this.totalPoints / this.dataZoomState
+     * - 更新 lastLabel / lastValue（顶部展示区）
+     *
+     * 返回值：无（void）
+     */
+    // 初始化图表：根据所选年份定位初始视口结束位置，并绑定固定窗口 dataZoom 行为
+    initChart(xAxisData, seriesData, year) {
+      if (this.chartInstance) {
+        this.chartInstance.dispose()
+      }
+
+      this.chartInstance = echarts.init(this.$refs.chartRef)
+      this.totalPoints = xAxisData.length
+      let initialEnd = this.computeInitialWindowEnd(xAxisData, year)
+      const initialStart = Math.max(0, initialEnd - (this.windowSize - 1))
+      this.dataZoomState = { startValue: initialStart, endValue: initialEnd }
+
+      const option = {
+        // title: {
+        //   text: year + ' 年每日趋势'
+        // },
+        tooltip: {
+          trigger: 'axis'
+        },
+        grid: { left: 60, right: 60, bottom: 80, top: 60, containLabel: true },
+        // 仅在视口内展示 31 天数据，可通过底部滑动条左右滑动查看全年
+        // slider：底部可视化拖动条；inside：鼠标滚轮/手势缩放
+        // 通过 startValue/endValue 控制初始显示区间（0-30 共 31 天）
+        dataZoom: [
+          {
+            type: 'slider',                 // 底部滑块式数据缩放控件
+            zoomLock: true,                 // 锁定缩放，仅允许平移窗口
+            startValue: this.dataZoomState.startValue, // 初始窗口起始索引
+            endValue: this.dataZoomState.endValue      // 初始窗口结束索引
+          },
+          {
+            type: 'inside',                 // 内置交互式 dataZoom（滚轮/触摸）
+            zoomLock: true,                 // 锁定缩放，仅允许平移
+            zoomOnMouseWheel: false,        // 禁止滚轮缩放
+            moveOnMouseWheel: true,         // 允许滚轮左右平移视口
+            zoomOnPinch: false,             // 禁止触摸捏合缩放
+            startValue: this.dataZoomState.startValue, // 初始窗口起始索引（与 slider 同步）
+            endValue: this.dataZoomState.endValue      // 初始窗口结束索引（与 slider 同步）
+          }
+        ],
+        xAxis: {                             // 横轴：类目轴（日期）
+          type: 'category',                  // 使用类目轴
+          data: xAxisData,                   // 横轴数据（日期列表）
+          axisLabel: {                       // 坐标轴标签样式
+            interval: 0,                     // 强制显示所有标签
+            rotate: 45,                      // 标签旋转 45 度，避免重叠
+            fontSize: 10,                    // 标签字体大小
+            margin: 6,                       // 标签与轴线间距
+            showMinLabel: true,              // 显示首个标签
+            showMaxLabel: true,              // 显示最后一个标签
+            formatter: function (value) {    // 标签文本格式化
+              return typeof value === 'string' && value.length >= 10 ? value.slice(5) : value // 长日期仅保留“MM-DD”
+            }
+          }
+        },
+        yAxis: {                             // 纵轴：数值轴
+          type: 'value'                      // 数值类型
+        },
+        series: [
+          {
+            name: '值',                      // 序列名称
+            type: 'line',                    // 折线图
+            smooth: true,                    // 使用平滑曲线
+            showSymbol: true,
+            lineStyle: {
+              color: '#ff0000'
+            },
+            itemStyle: {
+              color: '#ff0000'
+            },
+            label: {
+              show: true,
+              position: 'top',
+              formatter: function (params) {
+                return params.value
+              }
+            },
+            data: seriesData                 // 序列数据
+          }
+        ]
+      }
+
+      this.chartInstance.setOption(option)
+
+      this.chartInstance.off('dataZoom')
+      this.chartInstance.on('dataZoom', async (params) => {
+        // 固定窗口宽度的核心逻辑：
+        // 1. 将 dataZoom 回调中的百分比或显式索引统一转换为 start/end 索引
+        // 2. 判断用户是“移动 start”还是“移动 end”，相应地调整另一端保持 windowSize 不变
+        // 3. 做边界约束，确保 0 <= start <= end <= totalPoints - 1
+        // 4. 若区间有变化，使用 dispatchAction 同步两个 dataZoom（slider 与 inside），silent 避免死循环
+        const raw = Array.isArray(params.batch) && params.batch.length ? params.batch[0] : params
+        const startPercent = typeof raw.start === 'number' ? raw.start : 0
+        const endPercentDefault = (this.dataZoomState.endValue / (this.totalPoints - 1)) * 100
+        const endPercent = typeof raw.end === 'number' ? raw.end : endPercentDefault
+        let start = Number.isFinite(raw.startValue)
+          ? raw.startValue
+          : Math.round((startPercent / 100) * (this.totalPoints - 1))
+        let end = Number.isFinite(raw.endValue)
+          ? raw.endValue
+          : Math.round((endPercent / 100) * (this.totalPoints - 1))
+
+        const prev = this.dataZoomState
+        const movedStart = Math.abs(start - prev.startValue)
+        const movedEnd = Math.abs(end - prev.endValue)
+
+        if (movedStart >= movedEnd) {
+          end = start + (this.windowSize - 1)
+        } else {
+          start = end - (this.windowSize - 1)
+        }
+
+        if (end > this.totalPoints - 1) {
+          end = this.totalPoints - 1
+          start = end - (this.windowSize - 1)
+        }
+        if (start < 0) {
+          start = 0
+          end = start + (this.windowSize - 1)
+        }
+
+        // 触达左边界时尝试向左扩展（不小于 yearOptions[0]）
+        const leftRes = await this.extendLeftIfNeeded(start, end)
+        start = leftRes.start
+        end = leftRes.end
+
+        // 触达右边界时尝试向右扩展（不超过“今天”）
+        const rightRes = await this.extendRightIfNeeded(start, end)
+        start = rightRes.start
+        end = rightRes.end
+
+        if (start !== prev.startValue || end !== prev.endValue) {
+          this.dataZoomState = { startValue: start, endValue: end }
+          this.chartInstance.dispatchAction({
+            type: 'dataZoom',
+            dataZoomIndex: 0,
+            startValue: start,
+            endValue: end,
+            silent: true
+          })
+          this.chartInstance.dispatchAction({
+            type: 'dataZoom',
+            dataZoomIndex: 1,
+            startValue: start,
+            endValue: end,
+            silent: true
+          })
+        }
+        this.updateLastViewPoint()
+      })
+      this.updateLastViewPoint()
+    },
+    /**
+     * 计算 YYYY-MM-DD 的“今天”标签（UTC）
+     */
+    todayLabel() {
+      const now = new Date()
+      const y = now.getUTCFullYear()
+      const m = String(now.getUTCMonth() + 1).padStart(2, '0')
+      const d = String(now.getUTCDate()).padStart(2, '0')
+      return `${y}-${m}-${d}`
+    },
+    /**
+     * 初次加载时的合并策略：
+     * - 选择小于当前年的年份：合并下一年全年，支持右滑
+     * - 选择当前年：无条件拼接上一年数据，便于左滑
+     */
+    async assembleInitialData(year) {
+      const nowYear = new Date().getFullYear()
+      const list = await getTrend(year)
+      if (year < nowYear) {
+        const next = await getTrend(year + 1)
+        const nextAll = Array.isArray(next) ? next : []
+        return [...list, ...nextAll]
+      }
+      if (year === nowYear) {
+        const prev = await getTrend(year - 1)
+        const prevAll = Array.isArray(prev) ? prev : []
+        return [...prevAll, ...list]
+      }
+      console.log(list)
+      return list
+    },
+    /**
+     * 计算初始视口结束索引：
+     * 若选择非当前年，则落在该年的最后一天或最后一个该年数据点
+     */
+    computeInitialWindowEnd(xAxisData, year) {
+      let end = Math.max(0, xAxisData.length - 1)
+      const nowYear = new Date().getFullYear()
+      if (year < nowYear) {
+        const target = `${year}-12-31`
+        let idx = xAxisData.lastIndexOf(target)
+        if (idx === -1) {
+          for (let i = xAxisData.length - 1; i >= 0; i--) {
+            const v = xAxisData[i]
+            if (typeof v === 'string' && v.slice(0, 4) === String(year)) {
+              idx = i
+              break
+            }
+          }
+        }
+        if (idx !== -1) end = idx
+      }
+      return end
+    },
+    /**
+     * 扩展左侧：
+     * 在起点触达时，将更早年份数据前置拼接，并保持窗口位置不变
+     */
+    async extendLeftIfNeeded(start, end) {
+      const minYear = Array.isArray(this.yearOptions) && this.yearOptions.length ? this.yearOptions[0] : 1970
+      if (start > 0 || !Array.isArray(this.xAxis) || this.xAxis.length === 0) return { start, end }
+      const firstLabel = this.xAxis[0]
+      const firstYear = this.parseYear(firstLabel)
+      if (!Number.isFinite(firstYear) || firstYear <= minYear) return { start, end }
+      const prevData = await getTrend(firstYear - 1)
+      const prevLen = Array.isArray(prevData) ? prevData.length : 0
+      if (prevLen <= 0) return { start, end }
+      const prevX = prevData.map(i => i.label)
+      const prevY = prevData.map(i => i.value)
+      this.appendData(prevX, prevY, 'left')
+      return { start: start + prevLen, end: end + prevLen }
+    },
+    /**
+     * 扩展右侧：
+     * 在末尾触达时，按需追加下一年或当前年剩余（不超过“今天”）
+     */
+    async extendRightIfNeeded(start, end) {
+      if (end < this.totalPoints - 1 || !Array.isArray(this.xAxis) || this.xAxis.length === 0) return { start, end }
+      if (this.isExtendingRight) return { start, end }
+      this.isExtendingRight = true
+      const nowYear = new Date().getFullYear()
+      const lastLabel = this.xAxis[this.xAxis.length - 1]
+      const lastYear = this.parseYear(lastLabel)
+      const today = this.todayLabel()
+      if (!this.canGrowRight(lastYear, lastLabel, nowYear, today)) { this.isExtendingRight = false; return { start, end } }
+      try {
+        const targetYear = Number.isFinite(lastYear) && lastYear < nowYear ? lastYear + 1 : nowYear
+        const nextData = await getTrend(targetYear)
+        const filtered = this.filterNewer(nextData, lastLabel, today)
+        if (filtered.length <= 0) return { start, end }
+        const nextX = filtered.map(i => i.label)
+        const nextY = filtered.map(i => i.value)
+        this.appendData(nextX, nextY, 'right')
+        return { start, end }
+      } finally {
+        this.isExtendingRight = false
+      }
+    },
+    /**
+     * 解析日期字符串中的年份
+     */
+    parseYear(label) {
+      return typeof label === 'string' ? parseInt(label.slice(0, 4), 10) : NaN
+    },
+    /**
+     * 判断是否还可以向右加载更多数据
+     * 条件：最后一条数据的年份小于当前年，
+     * 或者同年但日期小于今天
+     */
+    canGrowRight(lastYear, lastLabel, nowYear, today) {
+      return (Number.isFinite(lastYear) && lastYear < nowYear) ||
+        (Number.isFinite(lastYear) && lastYear === nowYear && typeof lastLabel === 'string' && lastLabel < today)
+    },
+    /**
+     * 过滤出新加载数据中，
+     * 晚于当前视图最后一条且早于等于今天的数据
+     */
+    filterNewer(data, lastLabel, today) {
+      return Array.isArray(data) ? data.filter(i => i.label > lastLabel && i.label <= today) : []
+    },
+    /**
+     * 将新数据拼接到现有数据序列中（左侧或右侧），并更新图表
+     */
+    appendData(nextX, nextY, direction) {
+      if (direction === 'left') {
+        this.xAxis = [...nextX, ...this.xAxis]
+        this.series = [...nextY, ...this.series]
+      } else {
+        this.xAxis = [...this.xAxis, ...nextX]
+        this.series = [...this.series, ...nextY]
+      }
+      this.totalPoints = this.xAxis.length
+      this.chartInstance.setOption({
+        xAxis: { data: this.xAxis },
+        series: [{ data: this.series }]
+      })
+    },
+    /**
+     * 日期下拉框变更时的处理逻辑：
+     * 定位视窗到选定日期
+     */
+    onDateChange(type) {
+      if (!type || type !== 'hand') {
+        return
+      }
+      const idx = this.xAxis.indexOf(this.selectedDate)
+      if (idx === -1) return
+      let end = idx
+      let start = end - (this.windowSize - 1)
+      if (start < 0) {
+        start = 0
+        end = start + (this.windowSize - 1)
+      }
+      if (end > this.totalPoints - 1) {
+        end = this.totalPoints - 1
+        start = end - (this.windowSize - 1)
+      }
+      this.dataZoomState = { startValue: start, endValue: end }
+      this.chartInstance.dispatchAction({
+        type: 'dataZoom',
+        dataZoomIndex: 0,
+        startValue: start,
+        endValue: end,
+        silent: true
+      })
+      this.chartInstance.dispatchAction({
+        type: 'dataZoom',
+        dataZoomIndex: 1,
+        startValue: start,
+        endValue: end,
+        silent: true
+      })
+      this.updateLastViewPoint()
+    },
+    /**
+     * 根据当前窗口区间更新顶部最后一条数据展示
+     */
+    updateLastViewPoint() {
+      const end = this.dataZoomState.endValue
+      if (Array.isArray(this.xAxis) && Array.isArray(this.series) && end >= 0 && end < this.series.length) {
+        this.lastLabel = this.xAxis[end]
+        this.lastValue = this.series[end]
+      } else {
+        this.lastLabel = ''
+        this.lastValue = null
+      }
+    },
+    /**
+     * 窗口尺寸变更时自适应
+     */
+    handleResize() {
+      if (this.chartInstance) {
+        this.chartInstance.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.page {
+  padding: 24px;
+}
+
+.toolbar {
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.title {
+  margin-bottom: 16px;
+}
+
+.info {
+  font-size: 14px;
+  margin-left: 12px;
+}
+
+.chart {
+  width: 100%;
+  height: 400px;
+}
+</style>