数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载折线图是 F2AntV 面向移动端的可视化图表库中最常用的几何标记Geometry之一用于通过连接各数据点形成的折线展示数据随时间或其他有序变量的变化趋势。本文以仓库中 基础折线图示例 为核心骨架结合 Line 组件 API 文档、示例源码 以及 底层实现带你从零构建基础折线图并逐级进阶到带数据点、平滑曲线、阶梯线以及支持手势平移的折线图最后深入源码理解 F2 折线图的映射与渲染原理。折线图与 F2 中的使用场景折线图是一种常用的统计图表通过连接各个数据点形成折线来展示数据的变化趋势。它特别适合展示连续数据随时间或其他有序变量的变化情况能够清晰地反映数据的趋势和波动。在 F2 中折线图由Line几何标记组件承担官方将其定位为用于绘制折线图、曲线图、阶梯线图等的图表类型并且继承自几何标记 Geometry。具体适用于以下典型场景展示时间序列数据的变化趋势例如站点访问量、气温逐日变化对比多个数据系列的走势通过color字段映射实现多系列折线分析数据的周期性和波动性例如量价数据的高低起伏预测和趋势分析从已有序列的走向推断后续形态。基础折线图最小可运行示例先看最精简的写法——这也是官方示例的骨架import { jsx, Canvas, Chart, Line, Axis, Tooltip } from antv/f2; const { props } ( Canvas context{context} Chart data{data} Axis fielddate / Axis fieldvalue / Line xdate yvalue / Tooltip / /Chart /Canvas );其中Canvas图表画布接收contextcanvas 2d 上下文与pixelRatioChart图表容器承载data数据Axis坐标轴分别声明 x 轴date字段与 y 轴value字段Line核心几何标记通过x/y指定数据映射字段Tooltip交互提示用于展示数据点详情。完整可运行版本官方演示代码 给出了更完整的可直接运行版本包括 49 条 2017-06-05 至 2017-07-24 的日度数值数据以及坐标轴刻度配置/** jsx jsx */ import { jsx, Canvas, Chart, Line, Axis, Tooltip } from antv/f2; const data [ { date: 2017-06-05, value: 116 }, { date: 2017-06-06, value: 129 }, // ... 其余数据点 { date: 2017-07-24, value: 60 }, ]; const context document.getElementById(container).getContext(2d); const LineChart ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fielddate tickCount{3} style{{ label: { align: between }, }} / Axis fieldvalue tickCount{5} / Line xdate yvalue / Tooltip / /Chart /Canvas ); const chart new Canvas(LineChart.props); chart.render();几个值得注意的细节pixelRatio{window.devicePixelRatio}保证移动端高分屏下线条清晰x 轴tickCount{3}限制刻度数量label.align: between让标签对齐到刻度区间之间类别轴常见做法y 轴tickCount{5}控制数值轴刻度密度通过new Canvas(LineChart.props)实例化并render()渲染。进阶用法四种常见变体官方进阶演示 列出了四种实用变体全部源码可在site/examples/line/line/demo/目录下找到。带点折线图突出每个数据值在Line之后并列声明一个Point几何标记即可数据点与折线共享相同的x/y字段映射/** jsx jsx */ import { jsx, Canvas, Chart, Line, Point, Axis, Tooltip } from antv/f2; const data [ { day: 周一, value: 300 }, { day: 周二, value: 400 }, // ... 周三到周日 { day: 周日, value: 900 }, ]; const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fieldday tickCount{3} style{{ label: { align: between } }} / Axis fieldvalue tickCount{5} / Line xday yvalue / Point xday yvalue / Tooltip / /Chart /Canvas ); const chart new Canvas(props); chart.render();完整代码见 with-point.jsx。数据点样式circle、hollowCircle、rect可在主题 shapes 配置 中查看默认点形状为圆形。平滑折线图更流畅的趋势展示通过shapesmooth让折线变为平滑曲线const scale { time: { type: timeCat, mask: MM/DD, tickCount: 3, range: [0, 1], }, tem: { tickCount: 5, min: 0, alias: 日均温度, }, }; const LineChart ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} scale{scale} Axis fieldtime style{{ label: { align: between } }} / Axis fieldtem / Line xtime ytem shapesmooth / Tooltip / /Chart /Canvas );完整代码见 smooth.jsx。这段示例还演示了scale的高级用法time字段使用timeCat时间类型序数比例尺mask: MM/DD控制时间标签格式range: [0, 1]让折线铺满绘图区tem字段设置min: 0与别名alias: 日均温度Tooltip 中会显示该别名。smooth是主题中内置的 shape 之一对应的默认样式在 theme.ts 中定义为{ smooth: true }折线组件的平滑渲染由 areaView 中调用的Smooth.smooth曲线插值逻辑完成见 areaView.tsx。阶梯折线图展示阶段性变化使用shape的对象形式按字段映射阶梯步进方式这是多系列 shape 映射的典型用法const data []; [ { time: 2016-08-01, tem: 15, type: start }, // ... 每个日期生成 type 分别为 start / middle / end 的三条数据 ].map((d) { data.push(d); data.push({ ...d, tem: d.tem 15, type: middle }); data.push({ ...d, tem: d.tem 30, type: end }); }); const { props } ( Canvas context{context} Chart data{data} Axis fieldtime tickCount{2} style{{ label: { align: between } }} / Axis fieldtem tickCount{5} max{60} / Line xtime ytem colortype shape{{ field: type, range: [step-start, step-middle, step-end], }} / /Chart /Canvas );完整代码见 step.jsx。这里通过数据构造将每个日期生成start/middle/end三条记录再以colortype映射出三条不同颜色的阶梯线shape的range则分别对应三种阶梯步进方式。三个阶梯 shape 的内置样式定义在 theme.tsshape 值内置样式step-startstep: start台阶先水平后垂直step-middlestep: middle台阶居中过渡step-endstep: end台阶先垂直后水平可平移折线图手势滑动浏览长序列当数据序列很长时可配合ScrollBar实现视口 平移的交互import { jsx, Canvas, Chart, Line, Point, Axis, ScrollBar } from antv/f2; fetch(https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json) .then((res) res.json()) .then((data) { const { props } ( Canvas context{context} animate{false} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fieldrelease tickCount{5} nice{false} / Axis fieldcount / Line xrelease ycount / Point xrelease ycount / ScrollBar modex range{[0.1, 0.3]} / /Chart /Canvas ); const chart new Canvas(props); chart.render(); });完整代码见 pan.jsx。关键点ScrollBar modex声明 x 方向滚动条range{[0.1, 0.3]}表示初始视口显示数据区间的 10%30%Axis fieldrelease tickCount{5} nice{false}关闭刻度取整nice避免平移时坐标轴刻度跳变animate{false}关闭进场动画保证滑动过程流畅数据通过fetch异步加载渲染放在.then回调中执行。深入源码F2 折线图的底层原理组件结构与默认配置Line组件由三部分组成见 components/line 目录index.tsx导出withLine(LineView)包装后的组件withLine.tsx继承Geometry的高阶组件负责数据映射与分段lineView.tsx纯渲染视图负责把映射结果绘制成polyline。在 withLine.tsx 中可以看到 Line 的默认配置getDefaultCfg() { return { geomType: line, sortable: true, // 数据按 x 排序后再连线 }; }同时LineProps接口声明了折线图特有属性见 withLine.tsx属性类型默认值说明connectNullsbooleanfalse是否连接空值点为true时跳过 NaN 点直接连线sizeZoomnumber \| (record) number1线条宽度的缩放比例支持按数据记录回调计算endView组件-动画结束后显示的自定义视图接收{ origin }空值处理与折线分段折线图在遇到数据中有NaN时会自动分段。核心逻辑是splitNulls方法withLine.tsx当connectNulls为false默认时遇到NaN点就把当前线段切断返回多条子折线这也是 空数据示例 中折线断开的根本原因当connectNulls为true时直接过滤掉NaN点把所有有效点连成一条线。此外当 y 字段映射的是数组如区间数据时splitPoints会把每条记录拆成上边界点与下边界点两组withLine.tsxconcatPoints再决定是否拼接闭合堆叠adjust: stack时只绘制上边界见 withLine.tsx。映射与渲染流程mapping()方法withLine.tsx完成核心的数据到图形属性的转换调用父类super.mapping()得到记录级数据极坐标雷达图场景下把首点追加到末尾以闭合图形coord.isPolar判断用context.px2hd(size)将主题中4px这类带单位的线宽换算成高清屏像素再乘以sizeZoomRatio返回每个子折线的points、topPoints、bottomPoints等映射结果。render()最后把映射结果连同裁剪区域传给视图层。在 lineView.tsx 中每个子折线最终被渲染为polyline并内置了默认动画update数据更新easing: linear时长 450ms动画属性为points折线顶点平滑过渡appear进场直角坐标系下用rect裁剪实现从左到右的擦除效果极坐标系下用sector扇形裁剪时长均为 450ms、缓动quadraticOut见 lineView.tsx。这也是 API 文档中描述的Line 组件默认使用从左到右的擦除效果的源码出处。若不需要动画可在Canvas上设置animate{false}如上述平移示例所示。Line 组件属性速查Line继承自 Geometry除x/y外常用属性汇总如下详见 line.zh.md属性类型默认值说明colorstring \| object \| array-颜色映射支持固定值、字段映射、[字段, 颜色数组]与{ field, range, callback }对象sizestring \| object \| array \| number-线宽映射格式同colorstyleobject-图形样式如stroke、lineWidth、lineDash、lineCap、lineJoin、shadowColor等shapestring \| objectline折线形态line/dash/smooth/step-start/step-middle/step-endadjuststring-数据调整stack/dodge/symmetricstartOnZerobooleanfalsey 轴是否从 0 开始viewClipbooleanfalse是否只显示两轴之间的部分animationobject \| false内置按appear/update/leave三阶段配置动画connectNullsbooleanfalse是否连接空值点sizeZoomnumber \| function1线条宽度缩放比例线条样式常用项lineWidth默认1主题中折线默认4px经px2hd换算、strokeOpacity0-1、lineCapbutt/round/square、lineJoinbevel/round/miter、lineDash如[5, 5]表示 5px 实线 5px 空白、shadowBlur阴影模糊等。默认折线线宽4px、圆角端点与圆角连接的配置可在 theme.ts 中查看。小结从基础折线到带点、平滑、阶梯与平移交互F2 的Line组件覆盖了移动端趋势图表的绝大多数需求。本文对应的五个可运行示例均位于 site/examples/line/line/demo 目录相关测试用例含多组快照回归可参考 packages/f2/test/components/line。实际项目中建议按数据形态选择 shape趋势平滑用smooth、阶段变化用阶梯、长序列加ScrollBar平移并结合scale与坐标轴配置控制刻度和标签密度即可快速产出适合移动端屏幕的高质量折线图。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐Altair 折线图line mark完全指南从基础绘制到交互式多系列与地理折线Altair 折线图line mark完全指南从基础绘制到交互式多系列与地理折线 导读 本文基于 Altair 官方用户指南中的折线图line mark数据可视化LogicFlow graphModel 完全指南画布运行时 Model 的属性、方法与实战LogicFlow graphModel 完全指南画布运行时 Model 的属性、方法与实战 graphModel 是 LogicFlow 整个画布对应的运行数据可视化前端bqplot基础绘图教程从折线图到柱状图实战bqplot基础绘图教程从折线图到柱状图实战 引言为什么选择bqplot 还在为Jupyter Notebook中的静态图表而烦恼吗想要创建交互式、动态上一篇TBB concurrent_bounded_queue 并发安全成员函数详解push / pop / emplace / abort 的阻塞语义与内部实现下一篇NipaPlay-Reload终极跨平台视频播放器打造你的二次元观影天堂创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 F2 折线图完全指南：从基础绘制到平滑、阶梯与平移交互的实战教程
数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载折线图是 F2AntV 面向移动端的可视化图表库中最常用的几何标记Geometry之一用于通过连接各数据点形成的折线展示数据随时间或其他有序变量的变化趋势。本文以仓库中 基础折线图示例 为核心骨架结合 Line 组件 API 文档、示例源码 以及 底层实现带你从零构建基础折线图并逐级进阶到带数据点、平滑曲线、阶梯线以及支持手势平移的折线图最后深入源码理解 F2 折线图的映射与渲染原理。折线图与 F2 中的使用场景折线图是一种常用的统计图表通过连接各个数据点形成折线来展示数据的变化趋势。它特别适合展示连续数据随时间或其他有序变量的变化情况能够清晰地反映数据的趋势和波动。在 F2 中折线图由Line几何标记组件承担官方将其定位为用于绘制折线图、曲线图、阶梯线图等的图表类型并且继承自几何标记 Geometry。具体适用于以下典型场景展示时间序列数据的变化趋势例如站点访问量、气温逐日变化对比多个数据系列的走势通过color字段映射实现多系列折线分析数据的周期性和波动性例如量价数据的高低起伏预测和趋势分析从已有序列的走向推断后续形态。基础折线图最小可运行示例先看最精简的写法——这也是官方示例的骨架import { jsx, Canvas, Chart, Line, Axis, Tooltip } from antv/f2; const { props } ( Canvas context{context} Chart data{data} Axis fielddate / Axis fieldvalue / Line xdate yvalue / Tooltip / /Chart /Canvas );其中Canvas图表画布接收contextcanvas 2d 上下文与pixelRatioChart图表容器承载data数据Axis坐标轴分别声明 x 轴date字段与 y 轴value字段Line核心几何标记通过x/y指定数据映射字段Tooltip交互提示用于展示数据点详情。完整可运行版本官方演示代码 给出了更完整的可直接运行版本包括 49 条 2017-06-05 至 2017-07-24 的日度数值数据以及坐标轴刻度配置/** jsx jsx */ import { jsx, Canvas, Chart, Line, Axis, Tooltip } from antv/f2; const data [ { date: 2017-06-05, value: 116 }, { date: 2017-06-06, value: 129 }, // ... 其余数据点 { date: 2017-07-24, value: 60 }, ]; const context document.getElementById(container).getContext(2d); const LineChart ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fielddate tickCount{3} style{{ label: { align: between }, }} / Axis fieldvalue tickCount{5} / Line xdate yvalue / Tooltip / /Chart /Canvas ); const chart new Canvas(LineChart.props); chart.render();几个值得注意的细节pixelRatio{window.devicePixelRatio}保证移动端高分屏下线条清晰x 轴tickCount{3}限制刻度数量label.align: between让标签对齐到刻度区间之间类别轴常见做法y 轴tickCount{5}控制数值轴刻度密度通过new Canvas(LineChart.props)实例化并render()渲染。进阶用法四种常见变体官方进阶演示 列出了四种实用变体全部源码可在site/examples/line/line/demo/目录下找到。带点折线图突出每个数据值在Line之后并列声明一个Point几何标记即可数据点与折线共享相同的x/y字段映射/** jsx jsx */ import { jsx, Canvas, Chart, Line, Point, Axis, Tooltip } from antv/f2; const data [ { day: 周一, value: 300 }, { day: 周二, value: 400 }, // ... 周三到周日 { day: 周日, value: 900 }, ]; const { props } ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fieldday tickCount{3} style{{ label: { align: between } }} / Axis fieldvalue tickCount{5} / Line xday yvalue / Point xday yvalue / Tooltip / /Chart /Canvas ); const chart new Canvas(props); chart.render();完整代码见 with-point.jsx。数据点样式circle、hollowCircle、rect可在主题 shapes 配置 中查看默认点形状为圆形。平滑折线图更流畅的趋势展示通过shapesmooth让折线变为平滑曲线const scale { time: { type: timeCat, mask: MM/DD, tickCount: 3, range: [0, 1], }, tem: { tickCount: 5, min: 0, alias: 日均温度, }, }; const LineChart ( Canvas context{context} pixelRatio{window.devicePixelRatio} Chart data{data} scale{scale} Axis fieldtime style{{ label: { align: between } }} / Axis fieldtem / Line xtime ytem shapesmooth / Tooltip / /Chart /Canvas );完整代码见 smooth.jsx。这段示例还演示了scale的高级用法time字段使用timeCat时间类型序数比例尺mask: MM/DD控制时间标签格式range: [0, 1]让折线铺满绘图区tem字段设置min: 0与别名alias: 日均温度Tooltip 中会显示该别名。smooth是主题中内置的 shape 之一对应的默认样式在 theme.ts 中定义为{ smooth: true }折线组件的平滑渲染由 areaView 中调用的Smooth.smooth曲线插值逻辑完成见 areaView.tsx。阶梯折线图展示阶段性变化使用shape的对象形式按字段映射阶梯步进方式这是多系列 shape 映射的典型用法const data []; [ { time: 2016-08-01, tem: 15, type: start }, // ... 每个日期生成 type 分别为 start / middle / end 的三条数据 ].map((d) { data.push(d); data.push({ ...d, tem: d.tem 15, type: middle }); data.push({ ...d, tem: d.tem 30, type: end }); }); const { props } ( Canvas context{context} Chart data{data} Axis fieldtime tickCount{2} style{{ label: { align: between } }} / Axis fieldtem tickCount{5} max{60} / Line xtime ytem colortype shape{{ field: type, range: [step-start, step-middle, step-end], }} / /Chart /Canvas );完整代码见 step.jsx。这里通过数据构造将每个日期生成start/middle/end三条记录再以colortype映射出三条不同颜色的阶梯线shape的range则分别对应三种阶梯步进方式。三个阶梯 shape 的内置样式定义在 theme.tsshape 值内置样式step-startstep: start台阶先水平后垂直step-middlestep: middle台阶居中过渡step-endstep: end台阶先垂直后水平可平移折线图手势滑动浏览长序列当数据序列很长时可配合ScrollBar实现视口 平移的交互import { jsx, Canvas, Chart, Line, Point, Axis, ScrollBar } from antv/f2; fetch(https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json) .then((res) res.json()) .then((data) { const { props } ( Canvas context{context} animate{false} pixelRatio{window.devicePixelRatio} Chart data{data} Axis fieldrelease tickCount{5} nice{false} / Axis fieldcount / Line xrelease ycount / Point xrelease ycount / ScrollBar modex range{[0.1, 0.3]} / /Chart /Canvas ); const chart new Canvas(props); chart.render(); });完整代码见 pan.jsx。关键点ScrollBar modex声明 x 方向滚动条range{[0.1, 0.3]}表示初始视口显示数据区间的 10%30%Axis fieldrelease tickCount{5} nice{false}关闭刻度取整nice避免平移时坐标轴刻度跳变animate{false}关闭进场动画保证滑动过程流畅数据通过fetch异步加载渲染放在.then回调中执行。深入源码F2 折线图的底层原理组件结构与默认配置Line组件由三部分组成见 components/line 目录index.tsx导出withLine(LineView)包装后的组件withLine.tsx继承Geometry的高阶组件负责数据映射与分段lineView.tsx纯渲染视图负责把映射结果绘制成polyline。在 withLine.tsx 中可以看到 Line 的默认配置getDefaultCfg() { return { geomType: line, sortable: true, // 数据按 x 排序后再连线 }; }同时LineProps接口声明了折线图特有属性见 withLine.tsx属性类型默认值说明connectNullsbooleanfalse是否连接空值点为true时跳过 NaN 点直接连线sizeZoomnumber \| (record) number1线条宽度的缩放比例支持按数据记录回调计算endView组件-动画结束后显示的自定义视图接收{ origin }空值处理与折线分段折线图在遇到数据中有NaN时会自动分段。核心逻辑是splitNulls方法withLine.tsx当connectNulls为false默认时遇到NaN点就把当前线段切断返回多条子折线这也是 空数据示例 中折线断开的根本原因当connectNulls为true时直接过滤掉NaN点把所有有效点连成一条线。此外当 y 字段映射的是数组如区间数据时splitPoints会把每条记录拆成上边界点与下边界点两组withLine.tsxconcatPoints再决定是否拼接闭合堆叠adjust: stack时只绘制上边界见 withLine.tsx。映射与渲染流程mapping()方法withLine.tsx完成核心的数据到图形属性的转换调用父类super.mapping()得到记录级数据极坐标雷达图场景下把首点追加到末尾以闭合图形coord.isPolar判断用context.px2hd(size)将主题中4px这类带单位的线宽换算成高清屏像素再乘以sizeZoomRatio返回每个子折线的points、topPoints、bottomPoints等映射结果。render()最后把映射结果连同裁剪区域传给视图层。在 lineView.tsx 中每个子折线最终被渲染为polyline并内置了默认动画update数据更新easing: linear时长 450ms动画属性为points折线顶点平滑过渡appear进场直角坐标系下用rect裁剪实现从左到右的擦除效果极坐标系下用sector扇形裁剪时长均为 450ms、缓动quadraticOut见 lineView.tsx。这也是 API 文档中描述的Line 组件默认使用从左到右的擦除效果的源码出处。若不需要动画可在Canvas上设置animate{false}如上述平移示例所示。Line 组件属性速查Line继承自 Geometry除x/y外常用属性汇总如下详见 line.zh.md属性类型默认值说明colorstring \| object \| array-颜色映射支持固定值、字段映射、[字段, 颜色数组]与{ field, range, callback }对象sizestring \| object \| array \| number-线宽映射格式同colorstyleobject-图形样式如stroke、lineWidth、lineDash、lineCap、lineJoin、shadowColor等shapestring \| objectline折线形态line/dash/smooth/step-start/step-middle/step-endadjuststring-数据调整stack/dodge/symmetricstartOnZerobooleanfalsey 轴是否从 0 开始viewClipbooleanfalse是否只显示两轴之间的部分animationobject \| false内置按appear/update/leave三阶段配置动画connectNullsbooleanfalse是否连接空值点sizeZoomnumber \| function1线条宽度缩放比例线条样式常用项lineWidth默认1主题中折线默认4px经px2hd换算、strokeOpacity0-1、lineCapbutt/round/square、lineJoinbevel/round/miter、lineDash如[5, 5]表示 5px 实线 5px 空白、shadowBlur阴影模糊等。默认折线线宽4px、圆角端点与圆角连接的配置可在 theme.ts 中查看。小结从基础折线到带点、平滑、阶梯与平移交互F2 的Line组件覆盖了移动端趋势图表的绝大多数需求。本文对应的五个可运行示例均位于 site/examples/line/line/demo 目录相关测试用例含多组快照回归可参考 packages/f2/test/components/line。实际项目中建议按数据形态选择 shape趋势平滑用smooth、阶段变化用阶梯、长序列加ScrollBar平移并结合scale与坐标轴配置控制刻度和标签密度即可快速产出适合移动端屏幕的高质量折线图。赞分享数据可视化前端【免费下载链接】F2An elegant, interactive and flexible charting library for mobile.项目地址https://gitcode.com/gh_mirrors/f2/F2点击查看免费下载相关推荐Altair 折线图line mark完全指南从基础绘制到交互式多系列与地理折线Altair 折线图line mark完全指南从基础绘制到交互式多系列与地理折线 导读 本文基于 Altair 官方用户指南中的折线图line mark数据可视化LogicFlow graphModel 完全指南画布运行时 Model 的属性、方法与实战LogicFlow graphModel 完全指南画布运行时 Model 的属性、方法与实战 graphModel 是 LogicFlow 整个画布对应的运行数据可视化前端bqplot基础绘图教程从折线图到柱状图实战bqplot基础绘图教程从折线图到柱状图实战 引言为什么选择bqplot 还在为Jupyter Notebook中的静态图表而烦恼吗想要创建交互式、动态上一篇TBB concurrent_bounded_queue 并发安全成员函数详解push / pop / emplace / abort 的阻塞语义与内部实现下一篇NipaPlay-Reload终极跨平台视频播放器打造你的二次元观影天堂创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考