![\"LSTM时序分析与预测\"](\"/assets/images/shygfx/LSTM.png\")
双线性内插法\n 确定最小亮度值\n 罗伯特梯度\n 索伯尔梯度\n 拉普拉斯算子\n 频率域平滑\n 频率域锐化\n HLS变换\n 主成分变换 （K-L变换/PCA变换）\n推帚式扫描仪(CCD固体扫描仪)\n三种运算符，分别是：
\n+、-、*、/。>、<、<=、>=、!=。&（与）、|（或）、~（非）。| 函数 | 参数 | 用途 | 示例 |
\n|
该系统融合物联网、WebGIS 及人工智能技术。采用 B/S 架构，前后端分离，以 Spring Boot 和 Vue 为核心框架，用 MySQL 存储属性数据、PostgreSQL（PostGIS 扩展）存储空间数据。功能上，实现湖泊信息实时管理与可视化（高德地图、AntV L7、ECharts），通过 EW-TOPSIS 法综合评价湖泊健康，基于 LSTM 模型预测健康状况并动态预警，集成 DeepSeek 模型提供专业解答，支持公众举报“四乱”现象，旨在实现湖泊健康监测、评价、预警及公众参与治理
\n
近年来，水华对于湖泊和水库水质的污染愈发严重，尤其是在城市湖泊中，由于人类活动的影响，水华问题日益严峻。传统的水华监测方法成本高、效率低，难以实现大范围、长时间的持续监测。因此，利用遥感技术对水华进行信息监测及分析，深入研究湖泊水华的时空变化规律及其驱动因素，对于解决水华问题、保护湖泊生态环境、提高城市居民生活质量具有重要的理论和实践意义。
\n本软件旨在为水华监测和分析提供一个综合的解决方案，能够实现以下功能：
\n(1)水华面积预测：利用经验模型或机器学习算法，根据遥感图像的光谱特征以及反射率信息预测水华面积，为水华风险评估提供数据支持。
\n(2)水华时空变化分析：通过时间序列遥感图像分析，追踪水华的时空分布变化，识别水华暴发和消退的趋势。
\n(3)水华影响评估：结合水华浓度信息和湖泊生态系统数据，评估水华对水质、生态系统和人类健康的影响。
\n(4)预警和决策支持：基于遥感监测和水华变化分析结果，提供水华预警信息和决策支持，为水环境管理提供科学依据。
![\"神经网络预测\"](\"/assets/images/shygfx/神经网络.png\")
你可以通过设置页面的 Frontmatter，在页面禁用功能与布局。
\n\n本页面就是一个示例，禁用了如下功能:
\n布局包括:
\n\n同时每个页面包含:
\n主题也带有以下元素:
\n\n你可以在主题选项和页面的 frontmatter 中自定义它们。
\n", "date_published": "2025-08-10T07:41:26.000Z", "date_modified": "2025-08-11T13:00:39.000Z", "authors": [], "tags": [ "指南" ] }, { "title": "Markdown 展示", "url": "https://giser.date/ArcGIS_Pro/markdown.html", "id": "https://giser.date/ArcGIS_Pro/markdown.html", "summary": "VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。 你需要创建并编写 Markdown，以便 VuePress 可以根据文件结构将它们转换为不同的页面。", "content_html": "VuePress 主要从 Markdown 文件生成页面。因此，你可以使用它轻松生成文档或博客站点。
\n你需要创建并编写 Markdown，以便 VuePress 可以根据文件结构将它们转换为不同的页面。
\n\n如果你是一个新手，还不会编写 Markdown，请先阅读 Markdown 介绍 和 Markdown 演示。
\nVuePress 通过 Frontmatter 为每个 Markdown 页面引入配置。
\nFrontmatter
\nFrontmatter 是 VuePress 中很重要的一个概念，请阅读 Frontmatter 介绍 了解详情。
\nVuePress 会使用 markdown-it 来解析 Markdown 内容，因此可以借助于 markdown-it 插件来实现 语法扩展 。
\n为了丰富文档写作，VuePress 对 Markdown 语法进行了扩展。
\n关于这些扩展，请阅读 VuePress 中的 Markdown 扩展。
\n通过 VuePress 插件，主题扩展了更多 Markdown 语法，提供更加丰富的写作功能。
\n此文字有脚注[1].
\n$$
\n\\frac {\\partial^r} {\\partial \\omega^r} \\left(\\frac {y^{\\omega}} {\\omega}\\right)
\n= \\left(\\frac {y^{\\omega}} {\\omega}\\right) \\left{(\\log y)^r + \\sum_{i=1}^r \\frac {(-1)^i r \\cdots (r-i+1) (\\log y)^{r-i}} {\\omega^i} \\right}
\n$$
支持为图片设置颜色模式和大小。
\n19th H2O
\n安全的在 Markdown 中使用 {{ variable }}。
\n自定义标题
\n提示容器
\n自定义标题
\n警告容器
\n自定义标题
\n危险容器
\n详情容器
\n我是居中的
\n我在右对齐
\n一个拥有 ID 的 单词。
\n你可以标记 重要的内容 。
\nVuePress Theme Hope 十分强大.
\n向 Mr.Hope 捐赠一杯咖啡。
\n这是脚注内容 ↩︎
\nmore 注释之前的内容被视为文章摘要。
The first H1 title in Markdown will be regarded as page title.
\nMarkdown 中的第一个 H1 标题会被视为页面标题。
\n你可以在 Markdown 的 Frontmatter 中设置页面标题。
\n这里是内容。
\n这里是内容。
\n", "image": "https://giser.date/assets/images/GIS.png", "date_published": "2022-01-12T00:00:00.000Z", "date_modified": "2025-08-22T10:07:57.000Z", "authors": [], "tags": [ "蔬菜" ] }, { "title": "Maven入门", "url": "https://giser.date/posts/Maven.html", "id": "https://giser.date/posts/Maven.html", "summary": "Maven入门 简介 这里是内容。 Maven的pom.xml 这里是内容。", "content_html": "\n这里是内容。
\n这里是内容。
\n", "date_published": "2022-01-09T00:00:00.000Z", "date_modified": "2025-08-22T10:07:57.000Z", "authors": [], "tags": [ "前端" ] }, { "title": "SQL快速入门（PostgreSQL版）", "url": "https://giser.date/posts/SQL.html", "id": "https://giser.date/posts/SQL.html", "summary": "SQL快速入门（PostgreSQL版） SQL是什么？ SQL（Structured Query Language，结构化查询语言）是一种专门用于管理和操作关系型数据库的标准化编程语言。它允许用户执行各种数据库操作，如查询数据、插入记录、更新数据、删除记录以及创建和修改数据库结构等。 PostgreSQL是一个功能强大的开源对象-关系型数据库系统，以...", "content_html": "\nSQL（Structured Query Language，结构化查询语言）是一种专门用于管理和操作关系型数据库的标准化编程语言。它允许用户执行各种数据库操作，如查询数据、插入记录、更新数据、删除记录以及创建和修改数据库结构等。
\nPostgreSQL是一个功能强大的开源对象-关系型数据库系统，以其可靠性、功能 robustness 和性能而闻名。它是SQL标准的一个实现，并提供了许多高级功能。
\n| 名字 | 描述 | 标准SQL |
\n|
这里是内容。
\n这里是内容。
\n", "date_published": "2022-01-10T00:00:00.000Z", "date_modified": "2025-08-22T10:07:57.000Z", "authors": [], "tags": [ "火龙果", "水果" ] }, { "title": "控制反转与依赖注入", "url": "https://giser.date/posts/spring/1.html", "id": "https://giser.date/posts/spring/1.html", "summary": "控制反转与依赖注入 SpringIOC 这里是内容。 标题 3 这里是内容。", "content_html": "\n这里是内容。
\n这里是内容。
\n", "date_published": "2022-01-01T00:00:00.000Z", "date_modified": "2025-08-22T10:07:57.000Z", "authors": [], "tags": [ "后端" ] }, { "title": "面向切面编程", "url": "https://giser.date/posts/spring/2.html", "id": "https://giser.date/posts/spring/2.html", "summary": "Spring AOP是Spring框架中非常重要的功能模块之一，该模块提供了面向切面的编程支持，这种编程思想在事务处理、日志记录、权限控制、缓存等场景中被广泛使用。", "content_html": "\nSpring AOP是Spring框架中非常重要的功能模块之一，该模块提供了面向切面的编程支持，这种编程思想在事务处理、日志记录、权限控制、缓存等场景中被广泛使用。
\n\nAOP（Aspect Oriented Programming）是一种面向切面的编程，它将应用程序的各个模块进行解耦，并把公共的代码抽取出来，通过切面进行统一处理。它与OOP的面向对象思想不同，AOP更关注应用程序的各个模块之间的关系，而不是对象之间的关系。
\n在OOP中，以类为基本单位进行模块化，而AOP则将应用程序的各个模块进行解耦，并把公共的代码抽取出来，通过切面进行统一处理。
\n这种横向的解耦，使得应用程序的各个模块之间更加松耦合，是传统的OOP无法实现的，因为后者实现的是父子关系的纵向复用，二者相辅相成，互为补充。
\n在AOP中，类与切面的关系如下：
\n
从上图可知，通过切面Aspect分别在业务1和业务2中加入了日志记录、性能统计、安全控制等功能操作。
\n| 通知类型 | 介绍 | 应用 | 注解 |
\n| :
这里是内容。
\n这里是内容。
\n这里是内容。
\n这里是内容。
\n", "date_published": "2022-01-04T00:00:00.000Z", "date_modified": "2025-08-22T10:07:57.000Z", "authors": [], "tags": [ "苹果", "水果" ] }, { "title": "Vue简介", "url": "https://giser.date/posts/vue3/1.html", "id": "https://giser.date/posts/vue3/1.html", "summary": "Vue简介 标题 2 这里是内容。 标题 3 这里是内容。", "content_html": "\n这里是内容。
\n这里是内容。
\n", "date_published": "2022-01-05T00:00:00.000Z", "date_modified": "2025-08-22T10:07:57.000Z", "authors": [], "tags": [ "前端" ] }, { "title": "基于 Vue 的前端组件化开发", "url": "https://giser.date/posts/vue3/2.html", "id": "https://giser.date/posts/vue3/2.html", "summary": "组件化是现代前端开发的核心思想之一。在 Vue 中，组件是可复用的 Vue 实例，具有名称，例如PostCard。我们可以通过创建新组件将这些组件作为自定义元素（类似于HTML中的一个标签）来使用。在实际应用中，组件常常被组织成一个层层嵌套的树状结构，如图所示： 组件树", "content_html": "\n组件化是现代前端开发的核心思想之一。在 Vue 中，组件是可复用的 Vue 实例，具有名称，例如PostCard。我们可以通过创建新组件将这些组件作为自定义元素（类似于HTML中的一个标签）来使用。在实际应用中，组件常常被组织成一个层层嵌套的树状结构，如图所示：
\n组件化开发是一种将 UI 拆分成独立、可复用的组件的开发方式。每个组件包含：
\n组件化的优势：
\n<template>\n <div>\n <PostCard />\n </div>\n</template>在 Vue 中，组件导出是组件开发的重要环节。组件必须正确导出才能被其他组件导入和使用。主要有以下几种导出方式：
\n\n完整的组件导出结构
\n实际开发中按需导出即可
\n<script>\nexport default {\n // 1. 组件名称\n name: 'ComponentName',\n // 2. 组件依赖:本组件中用到的其他组件\n components: {\n ChildComponent\n },\n // 3. 属性定义：显式声明它所接受的 props\n props: {\n // 属性验证确保组件接口的健壮性\n title: {\n type: String,\n required: true\n default: '默认标题'\n },\n posts: {\n type: Array,\n default: () => [] \n }\n },\n // 4. 数据属性\n data() {\n return {\n // 组件内部状态\n loading: false\n }\n },\n // 5. 计算属性\n computed: {\n // 常用来描述依赖响应式状态的复杂逻辑\n },\n // 6. 监听器\n watch: {\n // 监听属性变化\n },\n // 7. 生命周期钩子\n created() {\n // 组件实例创建后调用\n },\n mounted() {\n // 组件挂载到 DOM 后调用\n },\n // 8. 方法定义\n methods: {\n handleClick() {\n // 处理点击事件\n this.$emit('click');\n }\n }\n}\n</script>提示
\n在 Vue3.2 以后，当你使用 script setup 语法时，Vue 会自动将组件编译成一个有效的 Vue 组件对象。在编译过程中，Vue 会自动创建一个默认导出（default export），其中包含了模板、脚本和样式的所有内容，即使在源代码中没有明确的 export 语句。
\n本博客本质上就是一个基于 Vue 的单页面应用，下面为大家演示一个简单的博客文章卡片组件：
\n该博客文章卡片源码如下:
\n<template>\n <div class=\"post-card\">\n <!-- 文章卡片的图片部分，如果文章有图片则显示 -->\n <div class=\"post-card-image\" v-if=\"post.image\">\n <!-- 使用v-bind动态绑定图片的src和alt属性 -->\n <img :src=\"post.image\" :alt=\"post.title\" />\n </div>\n <!-- 文章卡片的内容部分 -->\n <div class=\"post-card-content\">\n <!-- 文章标题 -->\n <h3 class=\"post-card-title\">{{ post.title }}</h3>\n <!-- 文章摘要，如果存在则显示 -->\n <p class=\"post-card-excerpt\" v-if=\"post.excerpt\">{{ post.excerpt }}</p>\n <!-- 文章元信息区域 -->\n <div class=\"post-card-meta\">\n <!-- 文章发布日期 -->\n <span class=\"post-card-date\">{{ formatDate(post.date) }}</span>\n <!-- 文章作者，如果存在则显示 -->\n <span v-if=\"post.author\" class=\"post-card-author\"\n >by {{ post.author }}</span\n >\n </div>\n <!-- 阅读更多链接 -->\n <a :href=\"post.link\" class=\"post-card-link\">阅读更多</a>\n </div>\n </div>\n</template>\n\n<script>\n// 导出组件定义\nexport default {\n // 组件名称\n name: 'PostCard',\n // 组件接收的属性:父组件调用子组件时传入具体数据\n props: {\n post: {\n // Post属性类型为对象\n type: Object,\n // 本属性为必需\n required: true,\n // 自定义验证函数，验证必需的属性\n validator(value) {\n return typeof value.title === 'string' && value.title.length > 0;\n }\n }\n },\n // 组件方法\n methods: {\n // 格式化日期的方法\n formatDate(dateString) {\n const options = { year: 'numeric', month: 'long', day: 'numeric' });\n return new Date(dateString).toLocaleDateString('zh-CN', options);\n }\n }\n}\n</script>\n<style>\n// 略\n</style>该示例通过复用多个 博客文章卡片 实现文章列表的简单展示。
\n该博客文章列表源码如下：
\n<template>\n <!-- 根元素：使用div容器包装整个博客文章列表 -->\n <div class=\"post-list\">\n <h2 class=\"post-list-title\">博客文章</h2>\n <div class=\"post-list-container\">\n <!-- 使用v-for指令遍历posts数组，为每个文章创建一个PostCard组件 -->\n <!-- :key属性用于Vue的虚拟DOM diff算法，提高渲染性能 -->\n <!-- :post属性将单个文章数据传递给PostCard组件 -->\n <PostCard\n v-for=\"post in posts\"\n :key=\"post.id\"\n :post=\"post\"\n class=\"post-list-item\"\n />\n </div>\n </div>\n</template>\n\n<script>\n// 导入PostCard组件\nimport PostCard from \"./PostCard.vue\";\n\n// 默认导出Vue组件配置对象\nexport default {\n // 本组件名称\n name: \"PostList\",\n // 注册子组件，使PostCard可以在模板中使用\n components: {\n PostCard,\n },\n // 定义组件的数据属性\n data() {\n // 返回一个对象，包含所有PostCard组件所需的所有响应式数据\n return {\n // posts数组包含所有要显示的博客文章信息\n posts: [\n {\n id: 1, // 文章唯一标识符\n title: \"Vue组件化开发实践\",\n excerpt:\n \"深入探讨Vue中的组件化开发思想和实践方法，以及如何构建可复用的组件。\",\n date: \"2025-08-10\",\n author: \"带着黄昏出逃\",\n link: \"/posts/vue3/2.html\",\n },\n // 略\n ],\n };\n },\n};\n</script>Vue 组件之间可以通过以下方式进行通信：
\n通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一棵巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：
\n注意，虽然这里的Footer组件可能根本不需要这些 props，但为了使DeepChild能访问到它们，仍然需要定义并向下传递。如果组件链路非常长，可能会影响到更多这条路上的组件。这一问题被称为“prop 逐级透传”，显然是我们希望尽量避免的情况。
\n提示
\n具体如何解决该问题，我有空再说~
\n组件化开发是 Vue 的核心特性之一，它让前端开发变得更加模块化和可维护。通过将界面拆分为独立的组件，我们可以：
\n在实际项目中，合理地划分组件边界和设计组件接口是组件化开发的关键。
\n", "image": "https://giser.date/assets/images/vue/image.png", "date_published": "2022-01-06T00:00:00.000Z", "date_modified": "2026-09-07T08:31:55.000Z", "authors": [], "tags": [ "前端" ] }, { "title": "在Vue 3中使用ECharts进行数据可视化", "url": "https://giser.date/posts/vue3/3.html", "id": "https://giser.date/posts/vue3/3.html", "summary": "在Vue 3中使用ECharts进行数据可视化 在现代前端开发中，数据可视化是一个非常重要的功能。ECharts是一个由百度开发的强大的开源可视化库，它可以帮助我们轻松地创建各种图表。本文将介绍如何在Vue 3项目中使用ECharts，并结合一个油井产量趋势分析案例来展示其用法。 1.为什么选择ECharts？ ECharts提供了丰富的图表类型，包括...", "content_html": "\n在现代前端开发中，数据可视化是一个非常重要的功能。ECharts是一个由百度开发的强大的开源可视化库，它可以帮助我们轻松地创建各种图表。本文将介绍如何在Vue 3项目中使用ECharts，并结合一个油井产量趋势分析案例来展示其用法。
\nECharts提供了丰富的图表类型，包括折线图、柱状图、饼图、散点图等，具有以下优势：
\n首先，我们需要安装ECharts：
\n\n为了减小打包体积，我们可以按需引入ECharts组件：
\nimport { use, init } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { LineChart } from 'echarts/charts';\nimport { GridComponent, TooltipComponent } from 'echarts/components';\n\n// 注册所需组件\nuse([CanvasRenderer, LineChart, GridComponent, TooltipComponent]);// 创建图表实例\nconst chart = init(chartDom.value, null, { renderer: 'canvas' });\n\n// 设置图表配置\nconst option = {\n // 图表配置项\n};\n\n// 应用配置\nchart.setOption(option);下面是一个完整的油井产量趋势分析图表组件示例：
\n如上图所示，我们创建了一个交互式的折线图，可以：
\n<template>\n <!-- 图表容器，包含整个组件的UI -->\n <div class=\"oil-chart-container\">\n <!-- 图表控制区域，包含标题和选择器 -->\n <div class=\"chart-controls\">\n <h2>日产油量趋势分析</h2>\n <!-- 筛选控件组 -->\n <div class=\"filter-group\">\n <!-- 井号选择器标签 -->\n <label for=\"wellIdSelect\">选择井号ID：</label>\n <!-- 井号选择下拉框 -->\n <!-- 使用v-model进行双向数据绑定到selectedWellId -->\n <!-- @change监听选择变化事件，触发loadWellData方法 -->\n <select \n id=\"wellIdSelect\" \n v-model=\"selectedWellId\" \n @change=\"loadWellData\"\n class=\"well-select\"\n >\n <!-- 默认选项 -->\n <option value=\"\">-- 请选择井号 --</option>\n <!-- 使用v-for循环渲染井列表 -->\n <!-- :key提供Vue追踪列表的唯一标识 -->\n <!-- :value绑定选项的值为井号ID -->\n <option v-for=\"well in wellList\" :key=\"well.jhId\" :value=\"well.jhId\">\n <!-- 显示井号ID和井名 -->\n {{ well.jhId }} ({{ well.jh }})\n </option>\n </select>\n </div>\n <!-- 加载指示器，当isLoading为true时显示 -->\n <div class=\"loading-indicator\" v-if=\"isLoading\">\n <!-- 旋转动画span元素 -->\n <span class=\"spinner\"></span> 数据加载中...\n </div>\n <!-- 错误信息显示区域，当errorMessage有值时显示 -->\n <div v-if=\"errorMessage\" class=\"error-message\">{{ errorMessage }}</div>\n </div>\n <!-- 图表包装器 -->\n <div class=\"chart-wrapper\">\n <!-- 图表区域，通过ref引用DOM元素 -->\n <div ref=\"chartDom\" class=\"chart-area\"></div>\n </div>\n </div>\n</template><script setup>\n// 从Vue导入响应式API和生命周期钩子\nimport { ref, onMounted, watch, onUnmounted } from 'vue';\n\n// 从ECharts核心模块导入use和init函数\nimport { use, init } from 'echarts/core';\n\n// 从ECharts渲染器模块导入Canvas渲染器\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 从ECharts图表模块导入折线图\nimport { LineChart } from 'echarts/charts';\n\n// 从ECharts组件模块导入网格和提示框组件\nimport { GridComponent, TooltipComponent } from 'echarts/components';\n\n// 导入完整的ECharts库，用于图形相关功能\nimport * as echarts from 'echarts';\n\n// 导入axios用于HTTP请求\nimport axios from 'axios';\n\n// 注册ECharts所需组件，按需引入以减小打包体积\nuse([CanvasRenderer, LineChart, GridComponent, TooltipComponent]);\n\n// 创建响应式引用变量\n// 图表DOM元素引用\nconst chartDom = ref(null);\n// 图表实例引用\nconst chartInstance = ref(null);\n// 井列表数据\nconst wellList = ref([]);\n// 选中的井号ID\nconst selectedWellId = ref('');\n// 生产数据（包含日期和产量值）\nconst productionData = ref({ dates: [], values: [] });\n// 加载状态标识\nconst isLoading = ref(false);\n// 错误信息\nconst errorMessage = ref('');\n\n// 初始化图表函数\nconst initChart = () => {\n // 如果已有图表实例，则先销毁避免内存泄漏\n if (chartInstance.value) {\n chartInstance.value.dispose();\n }\n \n // 初始化图表实例，绑定到DOM元素，使用Canvas渲染器\n chartInstance.value = init(chartDom.value, null, { renderer: 'canvas' });\n\n // 图表配置项\n const option = {\n // 背景颜色设置为透明\n backgroundColor: 'transparent',\n \n // 标题配置\n title: { \n // 标题文本\n text: '日产油量变化趋势', \n // 标题位置居中\n left: 'center', \n // 标题文字样式\n textStyle: { color: '#333', fontSize: 16 } \n },\n \n // 提示框配置\n tooltip: {\n // 触发类型：坐标轴触发\n trigger: 'axis',\n // 背景颜色\n backgroundColor: 'rgba(255, 255, 255, 0.9)',\n // 边框颜色\n borderColor: '#ddd',\n // 边框宽度\n borderWidth: 1,\n // 文字样式\n textStyle: { color: '#333' },\n // 内容格式化函数\n formatter: (params) => {\n // 获取第一个数据项\n const param = params[0];\n // 返回格式化的提示内容\n return `日期: ${param.name}<br/>日产油量: ${param.value} 吨`;\n }\n },\n \n // 网格配置\n grid: { \n // 左右边距5%\n left: '5%', \n right: '5%', \n // 底部边距15%\n bottom: '15%', \n // 顶部边距15%\n top: '15%', \n // 是否包含坐标轴标签\n containLabel: true \n },\n \n // X轴配置\n xAxis: {\n // 类型：类目轴\n type: 'category',\n // 坐标轴两边不留白\n boundaryGap: false,\n // 数据（初始为空数组）\n data: [],\n // 坐标轴标签配置\n axisLabel: { \n // 标签旋转45度\n rotate: 45, \n // 显示间隔为0（全部显示）\n interval: 0, \n // 字体大小\n fontSize: 12 \n },\n // 坐标轴线配置\n axisLine: { \n // 线样式配置\n lineStyle: { color: '#eee' } \n }\n },\n \n // Y轴配置\n yAxis: {\n // 类型：数值轴\n type: 'value',\n // 轴名称\n name: '日产油量（吨）',\n // 名称文字样式\n nameTextStyle: { \n // 内边距设置\n padding: [0, 0, 0, 10] \n },\n // 是否显示轴线\n axisLine: { show: false },\n // 分割线配置\n splitLine: { \n // 线样式配置\n lineStyle: { color: '#f5f5f5' } \n }\n },\n \n // 数据区域缩放配置（用于处理大量数据）\n dataZoom: [\n // 内置型数据区域缩放组件\n { \n type: 'inside', \n start: 0, \n end: 100, \n filterMode: 'none' \n },\n // 滑动条型数据区域缩放组件\n { \n show: true, \n type: 'slider', \n bottom: 25, \n start: 0, \n end: 100, \n filterMode: 'none', \n height: 15 \n }\n ],\n \n // 系列列表（图表数据）\n series: [\n {\n // 系列名称\n name: '日产油量',\n // 图表类型：折线图\n type: 'line',\n // 标记点图形：圆形\n symbol: 'circle',\n // 标记点大小\n symbolSize: 4,\n // 是否启用平滑曲线\n smooth: true,\n // 图形样式\n itemStyle: { color: '#4e79a7' },\n // 区域填充样式\n areaStyle: {\n // 使用线性渐变色\n color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [\n { offset: 0, color: 'rgba(78, 121, 167, 0.6)' },\n { offset: 1, color: 'rgba(78, 121, 167, 0.1)' }\n ])\n },\n // 数据（初始为空数组）\n data: []\n }\n ]\n };\n\n // 设置图表配置项\n chartInstance.value.setOption(option);\n};\n\n// 更新图表数据函数\nconst updateChartData = () => {\n // 如果没有图表实例，则直接返回\n if (!chartInstance.value) return;\n \n // 更新图表的X轴数据和系列数据\n chartInstance.value.setOption({\n xAxis: { data: productionData.value.dates },\n series: [{ data: productionData.value.values }]\n });\n\n // 当没有数据时显示提示信息\n if (productionData.value.values.length === 0) {\n chartInstance.value.setOption({\n title: {\n // 提示文本\n text: '暂无数据',\n // 标题居中\n left: 'center',\n // 标题垂直居中\n top: 'center',\n // 文字样式\n textStyle: { color: '#999', fontSize: 16 }\n }\n });\n }\n};\n\n// 获取井列表函数\nconst loadWellList = async () => {\n // 开始加载，设置加载状态为true\n try {\n isLoading.value = true;\n // 清空错误信息\n errorMessage.value = '';\n \n // 发起HTTP请求获取井列表数据\n const response = await axios.get('https://xyd0916.github.io/lakes/%E4%BA%A7%E9%87%8F.json');\n \n // 检查响应数据格式是否正确\n if (response.data.code === 200 && response.data.data?.records) {\n // 使用Map进行去重处理\n const wellsMap = new Map();\n // 遍历数据，过滤并去重\n response.data.data.records.forEach(item => {\n // 确保井号ID存在且未重复\n if (item.jhId && !wellsMap.has(item.jhId)) {\n // 将井信息存入Map\n wellsMap.set(item.jhId, { jhId: item.jhId, jh: item.jh || '未知' });\n }\n });\n // 转换为数组并赋值给井列表\n wellList.value = Array.from(wellsMap.values());\n } else {\n // 设置错误信息\n errorMessage.value = '获取井列表失败：接口返回数据格式错误';\n }\n } catch (error) {\n // 错误处理\n console.error('获取井列表失败:', error);\n errorMessage.value = '获取井列表失败，请检查网络连接';\n } finally {\n // 无论成功与否，重置加载状态\n isLoading.value = false;\n }\n};\n\n// 加载选中井数据函数\nconst loadWellData = async () => {\n // 如果没有选择井号，则清空数据并更新图表\n if (!selectedWellId.value) {\n productionData.value = { dates: [], values: [] };\n updateChartData();\n return;\n }\n \n // 开始加载，设置加载状态为true\n try {\n isLoading.value = true;\n // 清空错误信息\n errorMessage.value = '';\n \n // 发起HTTP请求获取指定井的数据\n const response = await axios.get('https://xyd0916.github.io/lakes/%E4%BA%A7%E9%87%8F.json', {\n // 传递井号ID作为查询参数\n params: { jhId: selectedWellId.value }\n });\n \n // 检查响应数据格式是否正确\n if (response.data.code === 200 && response.data.data?.records) {\n // 过滤有效数据并按日期排序\n const sortedData = response.data.data.records\n // 过滤条件：日期存在且日产油量不为空且为有效数字\n .filter(item => item.rq && item.rcyl !== null && !isNaN(item.rcyl))\n // 按日期升序排序\n .sort((a, b) => new Date(a.rq) - new Date(b.rq));\n \n // 提取日期和产量数据\n productionData.value = {\n // 映射出日期数组\n dates: sortedData.map(item => item.rq),\n // 映射出产量数组并转换为数字\n values: sortedData.map(item => Number(item.rcyl))\n };\n \n // 更新图表数据\n updateChartData();\n } else {\n // 设置错误信息\n errorMessage.value = '获取井数据失败：接口返回数据格式错误';\n }\n } catch (error) {\n // 错误处理\n console.error('获取井数据失败:', error);\n errorMessage.value = '获取井数据失败，请重试';\n } finally {\n // 无论成功与否，重置加载状态\n isLoading.value = false;\n }\n};\n\n// 窗口大小变化处理函数\nconst handleResize = () => {\n // 调整图表大小以适应容器\n chartInstance.value?.resize();\n};\n\n// 组件挂载后执行的生命周期钩子\nonMounted(() => {\n // 初始化图表\n initChart();\n // 加载井列表数据\n loadWellList();\n // 添加窗口大小变化事件监听器\n window.addEventListener('resize', handleResize);\n});\n\n// 组件卸载前执行的生命周期钩子\nonUnmounted(() => {\n // 移除窗口大小变化事件监听器\n window.removeEventListener('resize', handleResize);\n // 销毁图表实例避免内存泄漏\n chartInstance.value?.dispose();\n});\n</script><style scoped>\n/* 图表容器样式 */\n.oil-chart-container {\n /* 宽度100% */\n width: 100%;\n /* 最小宽度600px */\n min-width: 600px;\n /* 内边距20px */\n padding: 20px;\n /* 盒模型设置 */\n box-sizing: border-box;\n /* 背景色白色 */\n background-color: #fff;\n /* 圆角8px */\n border-radius: 8px;\n /* 阴影效果 */\n box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);\n}\n\n/* 图表控制区域样式 */\n.chart-controls {\n /* 下边距20px */\n margin-bottom: 20px;\n}\n\n/* 控制区域标题样式 */\n.chart-controls h2 {\n /* 外边距设置 */\n margin: 0 0 15px 0;\n /* 文字颜色 */\n color: #333;\n /* 字体大小 */\n font-size: 18px;\n /* 字体粗细 */\n font-weight: 600;\n}\n\n/* 筛选控件组样式 */\n.filter-group {\n /* 弹性布局 */\n display: flex;\n /* 垂直居中对齐 */\n align-items: center;\n /* 元素间距10px */\n gap: 10px;\n /* 下边距15px */\n margin-bottom: 15px;\n}\n\n/* 筛选控件标签样式 */\n.filter-group label {\n /* 文字颜色 */\n color: #666;\n /* 字体大小 */\n font-size: 14px;\n}\n\n/* 下拉选择框样式 */\n.well-select {\n /* 内边距 */\n padding: 8px 12px;\n /* 边框样式 */\n border: 1px solid #ddd;\n /* 圆角 */\n border-radius: 4px;\n /* 字体大小 */\n font-size: 14px;\n /* 最小宽度 */\n min-width: 200px;\n /* 背景色 */\n background-color: #fff;\n /* 过渡动画 */\n transition: border-color 0.2s;\n}\n\n/* 下拉选择框焦点样式 */\n.well-select:focus {\n /* 去除默认轮廓 */\n outline: none;\n /* 边框颜色 */\n border-color: #4e79a7;\n}\n\n/* 加载指示器和错误信息样式 */\n.loading-indicator, .error-message {\n /* 文字颜色 */\n color: #666;\n /* 字体大小 */\n font-size: 14px;\n /* 弹性布局 */\n display: flex;\n /* 垂直居中对齐 */\n align-items: center;\n /* 元素间距 */\n gap: 8px;\n /* 上边距 */\n margin-top: 10px;\n}\n\n/* 错误信息特殊样式 */\n.error-message {\n /* 错误文字颜色 */\n color: #e74c3c;\n}\n\n/* 自定义加载动画 */\n.spinner {\n /* 宽度 */\n width: 16px;\n /* 高度 */\n height: 16px;\n /* 边框 */\n border: 2px solid #ddd;\n /* 上边框颜色 */\n border-top-color: #4e79a7;\n /* 圆形 */\n border-radius: 50%;\n /* 旋转动画 */\n animation: spin 1s linear infinite;\n}\n\n/* 旋转动画定义 */\n@keyframes spin {\n /* 旋转360度 */\n to { transform: rotate(360deg); }\n}\n\n/* 图表包装器样式 */\n.chart-wrapper {\n /* 宽度 */\n width: 100%;\n /* 高度 */\n height: 500px;\n /* 定位 */\n position: relative;\n}\n\n/* 图表区域样式 */\n.chart-area {\n /* 宽度 */\n width: 100%;\n /* 高度 */\n height: 100%;\n}\n</style>要在Vue中使用这个组件，我们需要在其他vue文件中引入它：
\n<script setup>\n// 使用 Vue 支持的组件引入语法\nimport OilProductionChart from \"@source/posts/vue3/components/ProductionChart.vue\" \n</script>\n\n<OilProductionChart />ECharts是一个功能强大的数据可视化库，在Vue 3项目中使用它可以创建出丰富多样的图表。通过按需引入、合理配置和优化，我们可以构建出高性能、美观的可视化界面。本文中的油井产量趋势分析案例展示了如何在实际项目中应用ECharts，希望能为你在项目中使用ECharts提供参考。
\n", "image": "https://giser.date/assets/images/vue/echarts.png", "date_published": "2022-01-07T00:00:00.000Z", "date_modified": "2025-08-19T04:16:02.000Z", "authors": [], "tags": [ "前端" ] }, { "title": "Element-plus快速入门", "url": "https://giser.date/posts/vue3/4.html", "id": "https://giser.date/posts/vue3/4.html", "summary": "Element-plus快速入门 标题 2 这里是内容。 标题 3 这里是内容。", "content_html": "\n这里是内容。
\n这里是内容。
\n", "date_published": "2022-01-08T00:00:00.000Z", "date_modified": "2025-08-22T10:07:57.000Z", "authors": [], "tags": [ "香蕉" ] } ] }