道

地球是一颗持续活动的行星，其内部蕴藏的巨大能量通过地壳运动不断释放与重新分配。理解这些能量释放的时空规律，不仅是地质学的核心命题，也是人类与自然环境对话的基础方式。每一次地壳振动都记录着行星演化的信息——它们何时发生、强度几何、深度何处、集中在哪些区域——这些维度共同构成了一幅动态的地球脉动图谱。

将这些分散的、碎片化的地质事件信息汇聚起来，从中辨识模式、发现关联、预判趋势，是人类认知自然力的朴素追求。这种追求超越了特定技术或工具的范畴，它关乎我们如何看待自身在复杂自然系统中的位置，以及如何从看似杂乱的现象中提炼出可用于决策的知识。对地震活动的系统性感知与记录，本质上是对不确定性世界的一种理性回应。

法

实现地震数据的系统化查询与分析，遵循以下步骤：

第一步：划定时间窗口。 任何地质活动的研究都应先确定考察的时间跨度。起止时间的设定决定了数据集的规模和分析的粒度。时间跨度过短可能遗漏关键事件，过长则数据量膨胀、信噪比降低。合理的策略是根据研究目标来选择：短期监测关注最近数周，趋势分析则可跨越数年。

第二步：设定震级阈值。 震级是衡量地震能量释放的核心指标。下限阈值用于过滤掉无实际研究意义的微震事件，上限阈值则用于聚焦特定能量范围。上下限的组合使用能够精准锁定目标强度区间，避免无效数据干扰后续分析。

第三步：可选的地理空间约束。 当研究聚焦于特定区域时，通过中心点坐标加搜索半径的方式划定圆形地理范围，确保只检索该区域内的事件。经纬度需分别遵循其数值范围约束（纬度 -90 至 90，经度 -180 至 180），半径值则直接决定空间覆盖的广度。

第四步：发起数据检索并校验结果。 将前几步确定的参数组合为查询条件，向数据源发起请求。返回的数据包含每个地震事件的震级、位置、深度、时间、类型等核心属性。需校验返回数据是否为空、参数是否合法、网络通信是否正常。

第五步：多维度统计与可视化。 对检索结果进行聚合分析，统计总数、极值、均值等宏观指标；通过散点图观察事件在时间轴上的分布趋势，通过柱状图了解不同震级区间的数量分布，通过深度-时间图分析震源深度的变化规律。

第六步：数据导出与存档。 将完整的查询结果以结构化格式导出，便于离线分析、报告归档或与其他系统对接。

设计原则

• 渐进过滤：从宽泛的时间范围开始，逐步收紧震级和空间条件，避免一次性过度约束导致零结果。
• 可复现性：每次查询的参数组合应清晰可追溯，确保分析结果可被反复验证。
• 用户可控性：所有筛选维度由用户主动设定，而非系统预设，以适应多样化的研究场景。

术

本工具涉及三个核心 npm 技术包，均在实际 TypeScript 文件中直接使用。

---

1. echarts

• 用途：数据可视化图表库，用于生成散点图、柱状图等统计图表。
• 官网：https://echarts.apache.org/
• npm：https://www.npmjs.com/package/echarts
• 版本：^6.0.0

在本项目中，echarts 负责三类图表的渲染：震级-时间散点图、震级分布柱状图、震源深度散点图。以下是图表生成的核心类型定义与实际代码片段：

import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts'

export type ChartType = 'magnitudeTime' | 'magnitudeDist' | 'depth'

export const chartConfigs: Record<
  ChartType,
  { title: string; generator: typeof generateMagnitudeTimeChart }
> = {
  magnitudeTime: { title: '震级时间分布', generator: generateMagnitudeTimeChart },
  magnitudeDist: { title: '震级分布统计', generator: generateMagnitudeDistributionChart },
  depth: { title: '震源深度分布', generator: generateDepthChart },
}

震级-时间分布图使用散点序列（type: 'scatter'），气泡大小与震级正相关（symbolSize: (data) => Math.max(10, data.mag * 5)），纵轴范围固定为 0 到 10 级。震级分布统计图使用柱状序列（type: 'bar'），以 8 个震级区间（0-2、2-3、3-4、4-5、5-6、6-7、7-8、8+）对数据进行分箱计数，每根柱子使用渐变色填充：

itemStyle: {
  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: colors[index!]! },
    { offset: 1, color: colors[index!]! + '80' },
  ]),
}

震源深度图使用散点序列并将纵轴反转（inverse: true），以符合"深度向下增大"的直觉。所有图表均通过解析图表主题色彩变量实现明暗主题的自适应——将 CSS 变量中的 OKLCH 颜色值转换为十六进制色码后注入图表配置：

export function oklchToHex(color: string): string {
  const parts = parseOklch(color)
  if (!parts) return color
  const { L, C, H } = parts
  const hRad = (H * Math.PI) / 180
  const a = C * Math.cos(hRad)
  const b = C * Math.sin(hRad)
  // ... OKLab 到线性 sRGB 再到 gamma 校正 sRGB 的完整转换
}

---

2. @vuepic/vue-datepicker

• 用途：日期选择器组件，提供日历式日期范围选择交互。
• GitHub：https://github.com/Vuepic/vue-datepicker
• npm：https://www.npmjs.com/package/@vuepic/vue-datepicker
• 版本：^13.0.0

在本项目中用于起始日期和结束日期的选择，配置了中文界面（通过 date-fns 的 zhCN locale）、年份优先选择模式、以及起始/结束日期之间的联动校验（起始日期不可晚于结束日期，结束日期不可早于起始日期）。核心调用方式：

import { VueDatePicker } from '@vuepic/vue-datepicker'
import { zhCN } from 'date-fns/locale'

// 组件中使用的关键配置：
// model-type="yyyy-MM-dd"
// :locale="zhCN"
// :min-date="minDate"       // 最早可追溯到 1900-01-01
// :max-date="today"          // 最晚为当天
// :year-first="true"
// :clearable="false"

---

3. date-fns

• 用途：现代 JavaScript 日期工具库，本项目中仅使用了其国际化（locale）模块来提供中文日期界面。
• 官网：https://date-fns.org/
• npm：https://www.npmjs.com/package/date-fns

仅使用了一行导入，为日期选择器提供中文本地化支持：

import { zhCN } from 'date-fns/locale'

---

技术架构概览（数据流）

用户设定参数（时间/震级/坐标/半径）
  → 构建 URLSearchParams 查询字符串
    → fetch() 请求 USGS FDSN Event API（GeoJSON 格式）
      → 返回 EarthquakeApiResponse（含 features 数组）
        → 统计计算（总数、最大震级、平均震级、最深深度）
        → echarts 图表渲染（散点图 / 柱状图）
        → JSON 数据导出（Blob + URL.createObjectURL 下载）