tmui-cli 2.0.1 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//351/200/211/346/213/251/345/231/250 xPicker.md"

@@ -0,0 +1,199 @@
+# 选择器 xPicker
+
+## 介绍
+
+组件采用数组id式选择，非索引。考虑到实际实用中多以id为交互提交数据。因此摒弃了传统的索引选项
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-picker/x-picker.uvue
+```
+
+## 使用
+
+```ts
+<x-picker></x-picker>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| list | `数据项同x-picker-view的PICKER_ITEM_INFO`<br> | `Array` | `() => [] as PICKER_ITEM_INFO[]` |
+| modelValue | `当前选中项的id值`<br> | `Array` | `() => [] as string[]` |
+| modelStr | `当前选中项的回显文本等同v-model:model-str`<br>`请不要更改此值，此值只对外输出显示。`<br>`如果空值，将内部首次递归渲染回显文本。如果你后台返回，就不会计算。`<br>`因此如果对性能有要求的请务必让后台在首次显示时先回显文本，`<br>`这样内部在第一次时不会递归计算回显文本，提高性能。`<br> | `string` | `""` |
+| modelShow | `当前打开的状态。`<br>`等同v-model:model-show`<br> | `boolean` | `false` |
+| title | `顶部标题`<br> | `string` | `""` |
+| cancelText | `取消按钮的文本`<br> | `string` | `""` |
+| confirmText | `确认按钮的文本`<br> | `string` | `""` |
+| lazyContent | `是否懒加载内部内容。`<br>`当前你的列表内容非常多，且影响打开的动画性能时，请务必`<br>`设置此项为true，以获得流畅视觉效果。如果选择数据较少没有必要打开`<br>`注意:由于要兼容微信,此属性从1.1.9开始必须打开,除非不用微信小程序可以关闭.`<br> | `boolean` | `false` |
+| cellUnits | `显示在顶部的单位名称`<br> | `Array` | `() => [] as string[]` |
+| unitsFontSize | `单位字体大小`<br> | `string` | `'12'` |
+| modelStrJoin | `自动同步modelstr拼接时的符号.`<br> | `string` | `","` |
+| zIndex | `层级`<br> | `number` | `1100` |
+| showClose | `是否显示关闭按钮`<br> | `boolean` | `false` |
+| disabled | `是否禁用弹出`<br> | `boolean` | `false` |
+| widthCoverCenter | `宽屏时是否让内容剧中显示`<br>`并限制其宽为屏幕宽，只展示中间内容以适应宽屏。`<br> | `boolean` | `false` |
+| customWrapStyle | `自定义容器背景层样式`<br> | `string` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| cancel | `-` | 取消时触发 |
+| confirm | `ids: string[]<br>` | 确认触发 |
+| change | `ids: string[]<br>` | 滑动变换时触发 |
+| update:modelShow | `-` | 变量控制打开状态<br>等同v-model:model-show |
+| update:modelStr | `-` | 等同v-model:model-str<br>只对外输出当前回选区的选中项的文本，不要外部改变此值。 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `插槽,默认触发打开选择器。你的默认布局可以放置在这里。` | label: string<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/picker
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">选择器 Picke</x-text>
+			<x-text color="#999999" class="text-size-b">
+				这是xPickerView封装的弹出式，详细可见xPickerView文档
+			</x-text>
+		</x-sheet>
+		<x-sheet>
+
+			<x-picker @change="change" v-model="(selecteds as string[])" v-model:model-str="(str as string)" :list="list">
+				<template v-slot:default="{label}">
+					<x-button :block="true">打开选项</x-button>
+				</template>
+			</x-picker>
+
+			<x-sheet :margin="['0','24']" color="#f5f5f5" dark-color="#333">
+				<x-text color="#999999">选中的值：{{selecteds.join(',')}}</x-text>
+				<x-text color="#999999">选中的值回显文本：{{str}}</x-text>
+			</x-sheet>
+			<x-button :block="true" @click="fuzhi">赋值</x-button>
+		</x-sheet>
+		
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">customWrapStyle定义外观</x-text>
+			
+		</x-sheet>
+		<x-sheet>
+			<x-picker customWrapStyle="margin:16px;width:auto;border-radius:16px;" @change="change" v-model="(selecteds as string[])" v-model:model-str="(str as string)" :list="list">
+				<template v-slot:default="{label}">
+					<x-button :block="true">打开选项({{label}})</x-button>
+				</template>
+			</x-picker>
+		</x-sheet>
+		
+		<view style="height: 50px;"></view>
+</template>
+
+<script setup lang="ts">
+	import type { PICKER_ITEM_INFO } from "@/uni_modules/tmx-ui"
+	const list = ref([
+		{
+			title: '江西',
+			id: "9-1",
+			children: [
+				{
+					title: '南昌',
+					id: "132",
+					children: [
+						{ title: '青山湖区', id: "1-2" } as PICKER_ITEM_INFO,
+						{ title: '高新区', id: "1-3", disabled: true } as PICKER_ITEM_INFO,
+						{ title: '红谷滩区', id: "1-4" } as PICKER_ITEM_INFO,
+					] as PICKER_ITEM_INFO[],
+
+				} as PICKER_ITEM_INFO,
+				{
+
+					title: '九江', id: "222",
+					children: [
+						{ title: '2青山湖区', id: "1-32" } as PICKER_ITEM_INFO,
+						{ title: '2高新区', id: "1-33" } as PICKER_ITEM_INFO,
+						{ title: '3红谷滩区', id: "1-34" } as PICKER_ITEM_INFO,
+					] as PICKER_ITEM_INFO[],
+				} as PICKER_ITEM_INFO,
+			] as PICKER_ITEM_INFO[],
+		} as PICKER_ITEM_INFO,
+		{
+			title: '安徽',
+			id: "10-13",
+			children: [
+				{
+					title: '5南昌',
+					id: "3",
+					children: [
+						{ title: '5青山湖区', id: "1-52" } as PICKER_ITEM_INFO,
+						{ title: '5高新区', id: "1-53" } as PICKER_ITEM_INFO,
+						{ title: '5红谷滩区', id: "1-54" } as PICKER_ITEM_INFO,
+					] as PICKER_ITEM_INFO[],
+
+				} as PICKER_ITEM_INFO,
+				{
+					title: '5南昌',
+					id: "36",
+					children: [
+						{ title: '6青山湖区', id: "61-52" } as PICKER_ITEM_INFO,
+						{ title: '6高新区', id: "61-53" } as PICKER_ITEM_INFO,
+						{ title: '6红谷滩区', id: "61-54" } as PICKER_ITEM_INFO,
+					] as PICKER_ITEM_INFO[],
+
+				} as PICKER_ITEM_INFO,
+			] as PICKER_ITEM_INFO[],
+		} as PICKER_ITEM_INFO,
+
+	] as PICKER_ITEM_INFO[])
+	
+	const selecteds = ref<string[]>([])
+	const str = ref<string>("")
+	const change = (ids : string[]) => {
+		console.log(ids)
+	}
+	const fuzhi = ()=> {
+		selecteds.value = ['10-13', '36', '61-53']
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//351/200/211/346/213/251/345/231/250/345/256/271/345/231/250 xPickerView.md"

@@ -0,0 +1,242 @@
+# 选择器容器 xPickerView
+
+## 介绍
+
+采用id作为索引为选中值。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.19 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-picker-view/x-picker-view.uvue
+```
+
+## 使用
+
+```ts
+<x-picker-view></x-picker-view>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| list | `数据`<br> | `Array` | `(): Array<PICKER_ITEM_INFO> => [] as Array<PICKER_ITEM_INFO>` |
+| listPro | `数据项,这是内部使用的以提高数据的转换性能。如果你确定你提供的是这个类型，可以赋值此值，避免转换时间。`<br>`格式类型为：X_PICKER_X_ITEM`<br>`数据如果超过1mb不要去转换，最后直接从后台提供string然后直接JSON.getArray<X_PICKER_X_ITEM>(data)赋值到值。`<br>`这样性能在安卓上可以提高到好多。`<br> | `Array` | `(): Array<X_PICKER_X_ITEM> => [] as Array<X_PICKER_X_ITEM>` |
+| modelValue | `当前选中项的id值`<br> | `Array` | `(): Array<string   number> => [] as Array<string   number>` |
+| modelStr | `当前选中项的标题文本`<br> | `string` | `''` |
+| modelStrJoin | `自动同步modelstr拼接时的符号.`<br> | `string` | `','` |
+| cellUnits | `显示在顶部的单位名称`<br> | `Array` | `(): Array<string> => [] as Array<string>` |
+| unitsFontSize | `单位名称字号`<br> | `string` | `'12'` |
+| fontSize | `项目的字体号大小`<br> | `string` | `'16'` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `ids: string[]<br>` | 选项变化时触发 |
+| update:modelStr | `-` | 等同v-model:model-str<br>只对外输出当前回选区的选中项的文本，不要外部改变此值。 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| label | `-` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/biaodan/picker-view
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">选择器容器 PickerView</x-text>
+		<x-text color="#999999" class="text-size-b">
+			组件采用数组id式选择，非索引。考虑到实际实用中多以id为交互提交数据。因此摒弃了传统的索引选项
+		</x-text>
+	</x-sheet>
+
+	<x-sheet>
+		<x-picker-view v-model:model-str="(selectedStr as string)" @change="change" v-model="(selecteds as string[])"
+			:list="list"></x-picker-view>
+		<x-sheet :margin="['0','24','0','0']" color="#f5f5f5" dark-color="#333">
+			<x-text color="#999999">选中的值：{{selecteds.join(',')}}</x-text>
+			<x-text color="#999999">选中项的文本：{{selectedStr}}</x-text>
+		</x-sheet>
+	</x-sheet>
+	<view style="height:50px"></view>
+
+</template>
+
+<script setup lang="ts">
+	import type { PICKER_ITEM_INFO } from "@/uni_modules/tmx-ui"
+	const list = ref([
+		{
+			"title": "1江西",
+			"id": "1",
+			"children": [
+				{
+					"title": "1南昌",
+					"id": "1-1",
+					"children": [
+						{
+							"title": "11青山湖区",
+							"id": "1-1-1"
+						} as PICKER_ITEM_INFO,
+						{
+							"title": "11高新区",
+							"id": "1-1-2"
+						} as PICKER_ITEM_INFO,
+						{
+							"title": "11红谷滩区",
+							"id": "1-1-3"
+						} as PICKER_ITEM_INFO
+					] as PICKER_ITEM_INFO[]
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "1九江",
+					"id": "1-2",
+					"disabled": true
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "1赣州",
+					"id": "1-3",
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "1吉安",
+					"id": "1-4"
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "1抚州",
+					"id": "1-5"
+				} as PICKER_ITEM_INFO
+			] as PICKER_ITEM_INFO[]
+		},
+		{
+			"title": "2湖南",
+			"id": "2",
+			"children": [
+				{
+					"title": "21长沙",
+					"id": "2-1",
+					"children": [
+						{
+							"title": "21雨花区",
+							"id": "2-1-2"
+						} as PICKER_ITEM_INFO,
+						{
+							"title": "21芙蓉区",
+							"id": "2-1-3"
+						} as PICKER_ITEM_INFO,
+						{
+							"title": "21开福区",
+							"id": "2-1-4"
+						} as PICKER_ITEM_INFO
+					] as PICKER_ITEM_INFO[]
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "2株洲",
+					"id": "2-2",
+					"disabled": true
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "2湘潭",
+					"id": "2-3"
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "2衡阳",
+					"id": "2-4"
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "2郴州",
+					"id": "2-5"
+				} as PICKER_ITEM_INFO
+			] as PICKER_ITEM_INFO[]
+		} as PICKER_ITEM_INFO,
+		{
+			"title": "3广东",
+			"id": "3",
+			"children": [
+				{
+					"title": "3广州",
+					"id": "3-1",
+					"children": [
+						{
+							"title": "31天河区",
+							"id": "3-1-2"
+						} as PICKER_ITEM_INFO,
+						{
+							"title": "31白云区",
+							"id": "3-1-3"
+						} as PICKER_ITEM_INFO,
+						{
+							"title": "31黄埔区",
+							"id": "3-1-4"
+						} as PICKER_ITEM_INFO
+					] as PICKER_ITEM_INFO[]
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "3深圳",
+					"id": "3-2",
+					"disabled": true
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "3珠海",
+					"id": "3-3"
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "3佛山",
+					"id": "3-4"
+				} as PICKER_ITEM_INFO,
+				{
+					"title": "3惠州",
+					"id": "3-5"
+				} as PICKER_ITEM_INFO
+			] as PICKER_ITEM_INFO[]
+		}
+	] as PICKER_ITEM_INFO[])
+
+	const selecteds = ref<string[]>(["2", "2-1", "2-1-2"])
+	const selectedStr = ref<string>("")
+
+	const change = (ids : string[]) => {
+		console.log(ids)
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/01/345/274/200/345/247/213/344/275/277/347/224/250/01./345/277/253/351/200/237/344/270/212/346/211/213.md

@@ -0,0 +1,95 @@
+# 快速上手
+
+## 平台兼容
+
+| Web/H5 | Harmony | andriod | IOS | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑ | ☑ | ☑ | 4.87+ | 1.1.21 |
+
+此图表为原生UTS 通过Skia绘制，格式采用Antv F2图表数据格式进行配置和渲染。因此它是一个
+轻量级图表。用于轻量级展示，操作时非常合适。
+
+本图表是基于我的Skiau而渲染的，拥有高可靠性的一款2d引擎，它是由谷歌维护。C库依赖，APP端绘制效果一致。
+
+**建议参考我的demo示例来使用**数据格式一定要定义类型我文档可能展示数据格式时没有写类型。以demo示例为准写配置，你们
+使用时一定要使用类型定义
+
+```ts
+import { ChartOptions, ChartSeriesOptions, ChartClickEvent } from "@/uni_modules/tmx-ui"
+```
+
+## 效果
+
+<ViewMobile url="/pages/chart/index" />
+
+## 基本用法
+
+```html
+<template>
+  <x-chart :options="chartOptions" />
+</template>
+
+<script lang="ts" setup>
+import { ChartOptions, ChartSeriesOptions, ChartClickEvent } from "@/uni_modules/tmx-ui"
+const chartOptions:ChartOptions = {
+  data: [
+    { month: '1月', value: 23 },
+    { month: '2月', value: 35 },
+    { month: '3月', value: 18 },
+    { month: '4月', value: 42 },
+    { month: '5月', value: 31 },
+    { month: '6月', value: 27 }
+  ],
+  series: [{ type: 'line', xField: 'month', yField: 'value' }]
+}
+</script>
+```
+
+## 组件属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| width | string | `'100%'` | 图表宽度，支持 CSS 单位 |
+| height | string | `'280px'` | 图表高度，支持 CSS 单位 |
+| options | ChartOptions | null | 图表配置，为 null 时显示示例图 |
+| preventScroll | boolean | false | 是否拦截触摸事件阻止页面滚动。需要平移交互时设为 true |
+| interactive | boolean | true | 是否启用交互（点击高亮、提示框）。设为 false 则纯展示，无选中效果 |
+
+## 组件事件
+
+| 事件 | 回调参数 | 说明 |
+|------|---------|------|
+| click | ChartClickEvent | 点击数据点时触发 |
+| reachEdge | ChartEdgeEvent | 平移到数据头部或尾部边缘时触发，用于动态加载更多数据 |
+
+```typescript
+import { ChartClickEvent, ChartEdgeEvent, ChartDatum } from '@/uni_modules/tmx-ui'
+
+// type ChartClickEvent = {
+//   seriesType: string,   // 图表类型：'line' | 'bar' | 'pie' 等
+//   dataIndex: number,    // 数据索引
+//   title: string,        // 数据标签（如 '4月'）
+//   record: ChartDatum,   // 当前点击的数据记录
+//   data: ChartDatum[]    // 完整数据数组
+// }
+
+// type ChartEdgeEvent = {
+//   direction: string,    // 'start' 滑到头部 | 'end' 滑到尾部
+//   start: number,        // 当前视口起点 0~1
+//   end: number,          // 当前视口终点 0~1
+//   total: number         // 当前总数据条数
+// }
+```
+
+## 组件方法
+
+通过 `ref` 调用：
+
+```html
+<x-chart ref="chartRef" :options="opts" />
+```
+
+| 方法 | 参数 | 说明 |
+|------|------|------|
+| setOptions | (options: ChartOptions) | 动态更新图表配置，会触发入场动画 |
+| redraw | 无 | 强制重绘当前图表 |

package/data/tmui4x/31./345/216/237/347/224/237/345/233/276/350/241/250/01/345/274/200/345/247/213/344/275/277/347/224/250/02./346/225/260/346/215/256/346/240/274/345/274/217.md

@@ -0,0 +1,61 @@
+# 数据格式
+
+## ChartOptions 结构
+
+```typescript
+type ChartOptions = {
+  data: ChartDatum[],              // 数据数组（必填）
+  series: ChartSeriesOptions[],    // 系列配置（必填）
+  padding?: ChartPadding,          // 内边距
+  coord?: ChartCoordOptions,       // 坐标系配置
+  xAxis?: ChartAxisOptions,        // X 轴配置
+  yAxis?: ChartAxisOptions,        // Y 轴配置
+  dataZoom?: DataZoomOptions,      // 数据缩放
+  title?: ChartTitleOptions,       // 标题
+  legend?: ChartLegendOptions,     // 图例
+  tooltip?: ChartTooltipOptions,   // 提示框
+  activeStyle?: ChartActiveStyle   // 高亮样式
+}
+```
+
+## 数据 data
+
+`data` 是一个 JSON 对象数组，每个对象是一条数据记录。字段名自由定义，通过 `series` 中的 `xField`、`yField` 等映射。
+
+```typescript
+// 单系列
+const data:UTSJSONObject[] = [
+  { month: '1月', sales: 120 },
+  { month: '2月', sales: 200 },
+  { month: '3月', sales: 150 }
+]
+
+// 多系列（同一数据，不同字段）
+const data:UTSJSONObject[] = [
+  { month: '1月', sales: 120, cost: 80, profit: 40 },
+  { month: '2月', sales: 200, cost: 110, profit: 90 },
+  { month: '3月', sales: 150, cost: 95, profit: 55 }
+]
+```
+
+## 系列 series
+
+`series` 是一个数组，每个元素定义一个数据系列的绑定和渲染方式。
+
+```typescript
+// 单系列折线
+series: [{ type: 'line', xField: 'month', yField: 'sales' }]
+
+// 多系列折线
+series: [
+  { type: 'line', xField: 'month', yField: 'sales', color: '#3b82f6' },
+  { type: 'line', xField: 'month', yField: 'cost', color: '#f59e0b' },
+  { type: 'line', xField: 'month', yField: 'profit', color: '#10b981' }
+]
+
+// 混合图（折线 + 柱图）
+series: [
+  { type: 'bar', xField: 'month', yField: 'sales' },
+  { type: 'line', xField: 'month', yField: 'profit' }
+]
+```

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/01./346/240/207/351/242/230/344/270/216/345/233/276/344/276/213.md

@@ -0,0 +1,45 @@
+# 标题与图例
+
+## 标题 title
+
+```typescript
+{
+  title: {
+    show: true,       // 是否显示，默认 false
+    text: '销售趋势'   // 标题文字
+  }
+}
+```
+
+## 图例 legend
+
+图例自动根据 `series` 生成，饼图根据数据的 `colorField` 生成。
+
+```typescript
+{
+  legend: {
+    show: true   // 是否显示，默认 true
+  }
+}
+```
+
+点击图例项可以切换对应系列的显示/隐藏。
+
+## 完整示例
+
+```typescript
+import { ChartOptions, ChartSeriesOptions, ChartClickEvent } from "@/uni_modules/tmx-ui"
+const options:ChartOptions = {
+  data: [
+    { month: '1月', sales: 120, cost: 80 },
+    { month: '2月', sales: 200, cost: 110 },
+    { month: '3月', sales: 150, cost: 95 }
+  ],
+  series: [
+    { type: 'line', xField: 'month', yField: 'sales' },
+    { type: 'line', xField: 'month', yField: 'cost' }
+  ],
+  title: { show: true, text: '收支分析' },
+  legend: { show: true }
+}
+```