拼ui 一些业务逻辑x实现

2026-03-19 06:15:09 +08:00
parent f5c6f143c0
commit 49e45ac464
1118 changed files with 246518 additions and 5368 deletions
@@ -0,0 +1,111 @@
+# 折线图（Line）
+
+本章目标：把“折线图在 EasyChart 里到底怎么配置、数据怎么解释、哪些字段会影响渲染”的关键点一次讲清楚。
+
+---
+
+## 1. 适用场景
+
+- 趋势变化（时间序列/按类目变化）
+- 多条曲线对比（同一套 X 维度）
+- 需要平滑/阶梯/直线等线型表达
+
+---
+
+## 2. 最小可用配置（Checklist）
+
+1. `ChartProfile.coordinateSystem = Cartesian2D`
+2. 轴（Axis Settings）
+   - X：通常用 **Category**（填写 `labels`）或 **Value**（数值横轴）
+   - Y：通常用 **Value**
+3. Series（Series 面板）
+   - 添加 1 条 `Serie`
+   - `Serie.type = Line`
+   - `Serie.seriesData` 至少 2 个点（折线需要至少两点才能连线）
+
+---
+
+## 3. Inspector 对应字段（你在面板里看到的是什么）
+
+- **ChartProfile / Coordinate System**
+  - `coordinateSystem`
+
+- **Axis Settings**（与坐标系相关）
+  - Cartesian：`cartesian.xAxisId / cartesian.yAxisId`
+  - 轴列表：`axes[]`（每个 Axis 的 `axisType/labels/min/max/autoRange/...`）
+
+- **Series**（每条曲线）
+  - `series[i].type = Line`
+  - `series[i].settings`：实际类型为 `LineSettings`
+    - `stroke`：线条（线型/颜色/宽度/纹理等）
+    - `point`：点样式（开关/大小/纹理等）
+    - `hover`：悬停强调（开启后才会有“拾取半径/高亮”）
+    - `area`：面积填充（折线下方填充）
+  - `series[i].labelSettings`：数据点标签（是否显示、格式、小数位、偏移等）
+
+---
+
+## 4. SeriesData 字段解释（最关键，按运行时代码）
+
+折线图渲染时使用：
+
+- **X 坐标**：`SeriesData.x`
+- **Y 数值**：`SeriesData.value`
+- `SeriesData.y` 在折线图中 **不参与渲染**（不要把 y 当作折线的纵值）。
+
+两种常见写法：
+
+### 4.1 Category X + Value Y（最常用）
+
+- X 轴设为 `AxisType.Category`
+- `AxisConfig.labels = ["A","B","C",...]`
+- 数据点：
+  - `x = 类目索引`（0/1/2...，会按索引映射到 labels）
+  - `value = 数值`
+
+### 4.2 Value X + Value Y（数值横轴）
+
+- X 轴设为 `AxisType.Value`
+- 数据点：
+  - `x = 横轴数值`
+  - `value = 纵轴数值`
+
+> 额外说明：当你的轴维度是 **X=Value, Y=Category** 时，运行时会认为是“笛卡尔坐标转置”（transposed），会在渲染时交换 X/Y 的解释方式（用于横向布局的场景）。
+
+---
+
+## 5. 常用样式配置（LineSettings）
+
+- **线型**：`LineSettings.stroke.lineType`
+  - `Straight`：直线
+  - `Step`：阶梯线
+  - `Smooth`：平滑曲线
+
+- **线条粗细/颜色**：`LineSettings.stroke.width` / `LineSettings.stroke.color`
+
+- **点标记**：`LineSettings.point.show/size/textureFill`
+
+- **面积填充**：`LineSettings.area.show` + `LineSettings.area.textureFill`
+
+---
+
+## 6. 常见坑与排错（按现象）
+
+- **线断裂 / 不显示**
+  - 检查 `SeriesData.value` 是否出现 `NaN/Infinity`
+  - 折线至少 2 个有效点
+
+- **点不在标签上（Category X）**
+  - 检查 `x` 是否为 0..(labels.Count-1) 的索引
+  - 检查是否误把 `x` 写成了“类目字符串”（EasyChart 这里是索引，不是字符串）
+
+- **我填了 y，但图不对**
+  - 折线图纵值用的是 `value`，不是 `y`
+
+---
+
+## 7. 深入参考
+
+- 轴与范围、Series 与数据：`00-WorkflowAndLibrary.md`
+- 常用配方：`05-CommonRecipes.md`
+- FAQ：`06-FAQ.md`