tmui-cli 2.0.0 → 2.0.2

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/02/345/237/272/347/241/200/351/205/215/347/275/256/02./345/235/220/346/240/207/350/275/264.md

@@ -0,0 +1,71 @@
+# 坐标轴
+
+适用于笛卡尔坐标系图表（折线、柱图、面积、K线）。
+
+## X 轴 xAxis
+
+```typescript
+{
+  xAxis: {
+    show: true,           // 是否显示，默认 true
+    grid: false,          // 是否显示竖向网格线，默认 false
+    gridWidth: 1,         // 网格线宽度
+    gridColor: '#edf2f7', // 网格线颜色（已适配暗色）
+    lineWidth: 1,         // 轴线宽度
+    lineColor: '#cfd8dc', // 轴线颜色（已适配暗色）
+    labelColor: '#6b7280',// 标签文字颜色（已适配暗色）
+    labelSize: 11,        // 标签字号
+    labelRotate: 0,       // 标签旋转角度（如 -45）
+    labelFormatter: '',   // 标签格式化，{value} 会被替换
+    axisName: '',         // 轴名称
+    autoInterval: true,   // 自动间隔（标签过密时自动跳显）
+    maxLabelLength: 0     // 标签最大长度，超出截断（0=不限）
+  }
+}
+```
+
+## Y 轴 yAxis
+
+```typescript
+{
+  yAxis: {
+    show: true,           // 是否显示，默认 true
+    grid: true,           // 是否显示横向网格线，默认 true
+    gridWidth: 1,         // 网格线宽度
+    gridColor: '#edf2f7', // 网格线颜色
+    lineWidth: 1,         // 轴线宽度
+    lineColor: '#cfd8dc', // 轴线颜色
+    labelColor: '#6b7280',// 标签文字颜色
+    labelSize: 11,        // 标签字号
+    tickCount: 5,         // 刻度数量
+    labelFormatter: '',   // 标签格式化，{value} 会被替换
+    axisName: ''          // 轴名称（显示在轴顶部）
+  }
+}
+```
+
+## 内边距 padding
+
+控制图表绘图区域与 canvas 边缘的距离。
+
+```typescript
+{
+  padding: {
+    top: 24,     // 默认 24
+    right: 16,   // 默认 16
+    bottom: 28,  // 默认 28
+    left: 36     // 默认 36
+  }
+}
+```
+
+## 坐标系 coord
+
+```typescript
+{
+  coord: {
+    type: 'rect',       // 'rect'（默认）或 'polar'
+    transposed: false   // 是否转置坐标系，设为 true 柱图变条形图
+  }
+}
+```

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/02/345/237/272/347/241/200/351/205/215/347/275/256/03./346/217/220/347/244/272/346/241/206.md

@@ -0,0 +1,37 @@
+# 提示框 Tooltip
+
+点击数据点时弹出的信息浮层。
+
+## 配置
+
+```typescript
+{
+  tooltip: {
+    show: true,              // 是否启用提示框，默认 true
+    showCrosshairs: true,    // 是否显示十字线（竖线），默认依据配置
+    crosshairsColor: '',     // 十字线颜色（优先级低于 activeStyle.crosshairColor）
+    formatter: ''            // 提示文本格式化，{title} {value} 会被替换
+  }
+}
+```
+
+## 格式化示例
+
+```typescript
+// 默认格式：显示字段名和值
+// 输出如：sales: 120
+
+// 自定义格式
+tooltip: {
+  formatter: '{title}: {value}元'
+}
+// 输出如：1月: 120元
+```
+
+## 提示框行为
+
+- 点击数据点 → 显示提示框 + 十字线
+- 再次点击同一点 → 隐藏提示框（切换）
+- 点击其他数据点 → 切换到新数据点
+- 点击空白区域 → 隐藏提示框
+- 提示框不拦截触摸事件（`pointer-events: none`），可以穿透点击

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/01./346/212/230/347/272/277/345/233/276.md

@@ -0,0 +1,76 @@
+# 折线图 Line
+
+## 效果
+
+<ViewMobile url="/pages/chart/line" />
+
+## 基本折线
+
+```typescript
+{
+  data: [
+    { month: '1月', value: 23 },
+    { month: '2月', value: 35 },
+    { month: '3月', value: 18 }
+  ],
+  series: [{ type: 'line', xField: 'month', yField: 'value' }]
+}
+```
+
+## 多系列折线
+
+```typescript
+{
+  data: [
+    { month: '1月', sales: 120, cost: 80 },
+    { month: '2月', sales: 200, cost: 110 }
+  ],
+  series: [
+    { type: 'line', xField: 'month', yField: 'sales', color: '#3b82f6' },
+    { type: 'line', xField: 'month', yField: 'cost', color: '#f59e0b' }
+  ]
+}
+```
+
+## 平滑曲线
+
+```typescript
+series: [{
+  type: 'line',
+  xField: 'month',
+  yField: 'value',
+  smooth: true,           // 启用平滑
+  smoothStrength: 0.6     // 平滑强度 0.15~1，默认 0.6
+}]
+```
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'line'` |
+| xField | string | - | X 轴字段名 |
+| yField | string | - | Y 轴字段名 |
+| color | string | 自动 | 线条颜色 |
+| smooth | boolean | false | 是否平滑曲线 |
+| smoothStrength | number | 0.6 | 平滑强度 |
+| showPoint | boolean | true | 是否显示数据点 |
+| lineWidth | number | 3 | 线条宽度 |
+| pointSize | number | 6 | 数据点大小 |
+| label | ChartLabelOptions | - | 数据标签配置 |
+| gradient | string[] | - | 渐变色数组 |
+
+## 数据标签
+
+```typescript
+series: [{
+  type: 'line',
+  xField: 'month',
+  yField: 'value',
+  label: {
+    show: true,
+    fontSize: 10,
+    color: '#6b7280'
+  }
+}]
+```

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/02./346/237/261/347/212/266/345/233/276.md

@@ -0,0 +1,89 @@
+# 柱状图 Bar
+
+## 效果
+
+<ViewMobile url="/pages/chart/bar" />
+
+## 基本柱图
+
+```typescript
+{
+  data: [
+    { city: '北京', gdp: 41610 },
+    { city: '上海', gdp: 44652 },
+    { city: '深圳', gdp: 32387 }
+  ],
+  series: [{ type: 'bar', xField: 'city', yField: 'gdp' }]
+}
+```
+
+## 分组柱图
+
+多个 `bar` 系列自动并排分组显示。
+
+```typescript
+{
+  data: [
+    { quarter: 'Q1', sales: 120, cost: 80 },
+    { quarter: 'Q2', sales: 200, cost: 110 }
+  ],
+  series: [
+    { type: 'bar', xField: 'quarter', yField: 'sales' },
+    { type: 'bar', xField: 'quarter', yField: 'cost' }
+  ]
+}
+```
+
+## 堆叠柱图
+
+```typescript
+series: [
+  { type: 'bar', xField: 'quarter', yField: 'sales', barMode: 'stack' },
+  { type: 'bar', xField: 'quarter', yField: 'cost', barMode: 'stack' }
+]
+```
+
+## 百分比堆叠
+
+```typescript
+series: [
+  { type: 'bar', xField: 'quarter', yField: 'sales', barMode: 'percentStack' },
+  { type: 'bar', xField: 'quarter', yField: 'cost', barMode: 'percentStack' }
+]
+```
+
+## 条形图（横向）
+
+通过 `coord.transposed` 转置坐标系。
+
+```typescript
+{
+  coord: { transposed: true },
+  series: [{ type: 'bar', xField: 'city', yField: 'gdp' }]
+}
+```
+
+## 渐变色柱图
+
+```typescript
+series: [{
+  type: 'bar',
+  xField: 'city',
+  yField: 'gdp',
+  gradient: ['0deg', '#3b82f6 0', '#8b5cf6 100']
+}]
+```
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'bar'` |
+| xField | string | - | 类目字段 |
+| yField | string | - | 数值字段 |
+| color | string | 自动 | 柱体颜色 |
+| barWidthRatio | number | 0.62 | 柱宽占比 0.2~1 |
+| barRadius | number | 4 | 圆角半径 |
+| barMode | string | `'group'` | `'group'` / `'stack'` / `'percentStack'` |
+| gradient | string[] | - | 渐变色数组 |
+| label | ChartLabelOptions | - | 数据标签 |

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/03./351/245/274/345/233/276/344/270/216/347/216/257/345/233/276.md

@@ -0,0 +1,119 @@
+# 饼图与环图 Pie
+
+## 效果
+
+<ViewMobile url="/pages/chart/pie" />
+
+## 基本饼图
+
+```typescript
+{
+  data: [
+    { name: '直接访问', value: 335 },
+    { name: '邮件营销', value: 310 },
+    { name: '联盟广告', value: 234 },
+    { name: '搜索引擎', value: 580 }
+  ],
+  series: [{
+    type: 'pie',
+    colorField: 'name',
+    angleField: 'value'
+  }]
+}
+```
+
+## 环形图
+
+设置 `pieInnerRadius` 大于 0 即为环形图。
+
+```typescript
+series: [{
+  type: 'pie',
+  colorField: 'name',
+  angleField: 'value',
+  pieInnerRadius: 50    // 内半径(px)
+}]
+```
+
+## 环形图中心文字
+
+```typescript
+series: [{
+  type: 'pie',
+  colorField: 'name',
+  angleField: 'value',
+  pieInnerRadius: 60,
+  pieCenterText: '总计',
+  pieCenterSubText: '1459'
+}]
+```
+
+## 进度环
+
+数据只有一条且 `pieInnerRadius > 0` 时自动切换为进度环模式。
+
+```typescript
+{
+  data: [{ progress: 75 }],
+  series: [{
+    type: 'pie',
+    angleField: 'progress',
+    pieInnerRadius: 40,
+    color: '#3b82f6',
+    pieRoundCap: true     // 端点圆角
+  }]
+}
+```
+
+## 玫瑰图
+
+```typescript
+series: [{
+  type: 'pie',
+  colorField: 'name',
+  angleField: 'value',
+  pieRoseType: 'radius'   // 'radius'(半径按值) 或 'area'(面积按值)
+}]
+```
+
+## 扇区间隙与圆角
+
+```typescript
+series: [{
+  type: 'pie',
+  colorField: 'name',
+  angleField: 'value',
+  pieInnerRadius: 40,
+  pieGap: 3,            // 扇区间隙角度
+  pieRoundCap: true     // 端头圆角（需 innerRadius > 0 且 pieGap > 0）
+}]
+```
+
+## 嵌套环图
+
+多个 `pie` 系列，通过 `pieOuterRadius` 和 `pieInnerRadius` 控制各层半径。
+
+```typescript
+series: [
+  { type: 'pie', colorField: 'name', angleField: 'value', pieInnerRadius: 60, pieOuterRadius: 80 },
+  { type: 'pie', colorField: 'name', angleField: 'count', pieInnerRadius: 85, pieOuterRadius: 110 }
+]
+```
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'pie'` |
+| colorField | string | - | 分类字段（也可用 xField） |
+| angleField | string | - | 数值字段（也可用 yField） |
+| color | string | 自动 | 指定颜色（进度环时） |
+| pieInnerRadius | number | 0 | 内半径，>0 为环形图 |
+| pieRadiusScale | number | 0.9 | 外半径占比 0.4~1 |
+| pieOuterRadius | number | 0 | 外半径像素值（优先于 pieRadiusScale） |
+| pieCenterText | string | '' | 中心主文字 |
+| pieCenterSubText | string | '' | 中心副标题 |
+| pieGap | number | 0 | 扇区间隙角度 |
+| pieRoundCap | boolean | false | 端头圆角 |
+| pieRoseType | string | '' | 玫瑰图模式 `'radius'` / `'area'` |
+| label | ChartLabelOptions | - | 标签配置 |

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/04./351/235/242/347/247/257/345/233/276.md

@@ -0,0 +1,38 @@
+# 面积图 Area
+
+折线图的变体，线下方填充颜色区域。
+
+## 效果
+
+<ViewMobile url="/pages/chart/line" />
+
+## 基本用法
+
+```typescript
+{
+  data: [
+    { month: '1月', value: 23 },
+    { month: '2月', value: 35 },
+    { month: '3月', value: 18 }
+  ],
+  series: [{
+    type: 'area',
+    xField: 'month',
+    yField: 'value',
+    areaOpacity: 0.3    // 填充区域透明度 0~1
+  }]
+}
+```
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'area'` |
+| xField | string | - | X 轴字段 |
+| yField | string | - | Y 轴字段 |
+| color | string | 自动 | 线条和填充颜色 |
+| smooth | boolean | false | 是否平滑 |
+| showPoint | boolean | true | 是否显示数据点 |
+| pointSize | number | 6 | 数据点大小 |
+| areaOpacity | number | 0.3 | 填充透明度 |

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/05./346/225/243/347/202/271/345/233/276.md

@@ -0,0 +1,36 @@
+# 散点图 Scatter
+
+## 效果
+
+<ViewMobile url="/pages/chart/scatter" />
+
+## 基本用法
+
+```typescript
+{
+  data: [
+    { height: 170, weight: 65 },
+    { height: 175, weight: 72 },
+    { height: 160, weight: 55 },
+    { height: 180, weight: 80 }
+  ],
+  series: [{
+    type: 'scatter',
+    xField: 'height',
+    yField: 'weight',
+    pointSize: 8
+  }]
+}
+```
+
+散点图使用独立的数值坐标轴（非类目轴），X 和 Y 轴都是线性刻度。
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'scatter'` |
+| xField | string | - | X 轴数值字段 |
+| yField | string | - | Y 轴数值字段 |
+| color | string | 自动 | 点颜色 |
+| pointSize | number | 6 | 点大小 |

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/06./351/233/267/350/276/276/345/233/276.md

@@ -0,0 +1,46 @@
+# 雷达图 Radar
+
+## 效果
+
+<ViewMobile url="/pages/chart/radar" />
+
+## 基本用法
+
+```typescript
+{
+  data: [
+    { skill: '攻击', warrior: 90, mage: 40 },
+    { skill: '防御', warrior: 80, mage: 30 },
+    { skill: '速度', warrior: 50, mage: 70 },
+    { skill: '魔法', warrior: 20, mage: 95 },
+    { skill: '体力', warrior: 85, mage: 45 }
+  ],
+  series: [
+    { type: 'radar', xField: 'skill', yField: 'warrior', color: '#3b82f6' },
+    { type: 'radar', xField: 'skill', yField: 'mage', color: '#ef4444' }
+  ]
+}
+```
+
+## 填充区域
+
+```typescript
+series: [{
+  type: 'radar',
+  xField: 'skill',
+  yField: 'warrior',
+  areaOpacity: 0.2    // 设置 > 0 则填充区域，网格变为多边形
+}]
+```
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'radar'` |
+| xField | string | - | 维度字段 |
+| yField | string | - | 数值字段 |
+| color | string | 自动 | 颜色 |
+| showPoint | boolean | true | 是否显示顶点 |
+| pointSize | number | 6 | 顶点大小 |
+| areaOpacity | number | 0 | 填充透明度，>0 时网格变为多边形 |

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/07./346/274/217/346/226/227/345/233/276.md

@@ -0,0 +1,35 @@
+# 漏斗图 Funnel
+
+## 效果
+
+<ViewMobile url="/pages/chart/funnel" />
+
+## 基本用法
+
+```typescript
+{
+  data: [
+    { stage: '浏览', count: 1000 },
+    { stage: '点击', count: 600 },
+    { stage: '加购', count: 300 },
+    { stage: '下单', count: 150 },
+    { stage: '支付', count: 100 }
+  ],
+  series: [{
+    type: 'funnel',
+    xField: 'stage',
+    yField: 'count'
+  }]
+}
+```
+
+如果数据从小到大排列（首条 < 末条），自动识别为**金字塔图**（底部宽、顶部窄）。
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'funnel'` |
+| xField | string | - | 阶段名字段 |
+| yField | string | - | 数值字段 |
+| label | ChartLabelOptions | - | 标签配置 |

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/08.K/347/272/277/345/233/276.md

@@ -0,0 +1,44 @@
+# K 线图（蜡烛图）
+
+## 效果
+
+<ViewMobile url="/pages/chart/kline" />
+
+## 基本用法
+
+数据需包含 `start`（开盘）、`end`（收盘）、`max`（最高）、`min`（最低）四个字段。
+
+```typescript
+{
+  data: [
+    { date: '12/01', start: 100, end: 108, max: 112, min: 98 },
+    { date: '12/02', start: 108, end: 103, max: 110, min: 101 },
+    { date: '12/03', start: 103, end: 115, max: 118, min: 102 },
+    { date: '12/04', start: 115, end: 110, max: 116, min: 107 }
+  ],
+  series: [{
+    type: 'k',
+    xField: 'date'
+  }]
+}
+```
+
+- 收盘 >= 开盘 → 涨（红色）
+- 收盘 < 开盘 → 跌（绿色）
+
+## 数据字段规范
+
+| 字段 | 说明 |
+|------|------|
+| xField 对应字段 | 时间/日期标签 |
+| start | 开盘价 |
+| end | 收盘价 |
+| max | 最高价 |
+| min | 最低价 |
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'k'` |
+| xField | string | - | 日期/时间字段 |

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/09./346/227/255/346/227/245/345/233/276.md

@@ -0,0 +1,45 @@
+# 旭日图 Sunburst
+
+展示层级数据的环形图，内层到外层表示从根到叶的层级关系。
+
+## 效果
+
+<ViewMobile url="/pages/chart/tree" />
+
+## 基本用法
+
+数据为树形结构，每个节点有 `name`、`value`（可选）、`children`（可选）。
+
+```typescript
+{
+  data: [
+    {
+      name: '前端',
+      children: [
+        { name: 'Vue', value: 40 },
+        { name: 'React', value: 35 },
+        { name: 'Angular', value: 15 }
+      ]
+    },
+    {
+      name: '后端',
+      children: [
+        { name: 'Java', value: 45 },
+        { name: 'Go', value: 25 },
+        { name: 'Python', value: 30 }
+      ]
+    }
+  ],
+  series: [{
+    type: 'sunburst',
+    yField: 'value'     // 数值字段名
+  }]
+}
+```
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'sunburst'` |
+| yField | string | `'value'` | 数值字段（或用 angleField） |

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/03/345/233/276/350/241/250/347/261/273/345/236/213/10./347/237/251/345/275/242/346/240/221/345/233/276.md

@@ -0,0 +1,50 @@
+# 矩形树图 Treemap
+
+用矩形面积表示层级数据的值大小。
+
+## 效果
+
+<ViewMobile url="/pages/chart/tree" />
+
+## 基本用法
+
+数据为树形结构，与旭日图格式相同。
+
+```typescript
+{
+  data: [
+    {
+      name: '技术',
+      children: [
+        { name: 'Vue3', value: 40 },
+        { name: 'React', value: 35 },
+        { name: 'Docker', value: 20 },
+        { name: 'K8s', value: 15 }
+      ]
+    },
+    {
+      name: '运营',
+      children: [
+        { name: 'SEO', value: 25 },
+        { name: '投放', value: 30 },
+        { name: '社媒', value: 18 }
+      ]
+    }
+  ],
+  series: [{
+    type: 'treemap',
+    yField: 'value'
+  }]
+}
+```
+
+- 顶层节点使用不同基色
+- 子节点颜色自动按深度变浅
+- 选中高亮时有描边指示
+
+## 系列配置项
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| type | string | - | 固定 `'treemap'` |
+| yField | string | `'value'` | 数值字段 |