名称: ucharts 描述: 提供uCharts图表库的全面指导，包括图表类型、数据格式、图表配置和平台支持。当用户询问关于uCharts、需要创建图表、配置图表选项或在应用程序中使用uCharts时使用。许可证: 完整条款见LICENSE.txt

何时使用此技能

在以下情况使用此技能：

在项目中安装和设置uCharts
在uni-app应用程序中创建图表
在微信小程序中使用uCharts
在H5应用程序中使用uCharts
配置图表选项
使用不同图表类型
处理图表事件
自定义图表外观
理解uCharts API和方法
排查uCharts问题

如何使用此技能

此技能按照uCharts官方文档结构组织（https://www.ucharts.cn/v2/#/, https://www.ucharts.cn/v2/#/guide/index, https://www.ucharts.cn/v2/#/document/index）。使用uCharts时：

从用户请求中识别主题：
- 安装/安装 → examples/guide/installation.md
- 快速开始/快速开始 → examples/guide/quick-start.md
- 图表类型/图表类型 → examples/charts/
- 功能特性/功能特性 → examples/features/
- API/API 文档 → api/
从examples/目录加载相应的示例文件：

指南（使用指南）：
- examples/guide/intro.md - uCharts介绍
- examples/guide/installation.md - 安装指南
- examples/guide/quick-start.md - 快速开始指南
- examples/guide/configuration.md - 配置
- examples/guide/platform-support.md - 平台支持
图表（图表类型）：
- examples/charts/line.md - 折线图
- examples/charts/column.md - 柱状图
- examples/charts/area.md - 面积图
- examples/charts/pie.md - 饼图
- examples/charts/ring.md - 环形图
- examples/charts/radar.md - 雷达图
- examples/charts/funnel.md - 漏斗图
- examples/charts/gauge.md - 仪表盘图
- examples/charts/candle.md - K线图
- examples/charts/mix.md - 混合图
功能（功能特性）：
- examples/features/data-format.md - 数据格式
- examples/features/chart-events.md - 图表事件
- examples/features/chart-methods.md - 图表方法
- examples/features/chart-update.md - 图表更新
- examples/features/chart-customization.md - 图表自定义
遵循该示例文件中的具体指令，包括语法、结构和最佳实践

重要注意事项：
- uCharts支持多平台（uni-app、微信小程序、H5、APP）
- 图表使用canvas进行渲染
- 通过options对象进行配置
- 每个示例文件包含关键概念、代码示例和要点
在需要时参考api/目录中的API文档：
- api/chart-api.md - 图表组件API
- api/options-api.md - 选项API
- api/data-api.md - 数据API
- api/events-api.md - 事件API
- api/methods-api.md - 方法API
使用templates/目录中的模板：
- templates/installation.md - 安装模板
- templates/basic-chart.md - 基础图表模板
- templates/configuration.md - 配置模板

1. 理解uCharts

uCharts是一个高性能跨平台图表库，支持uni-app、微信小程序、H5、APP等。

关键概念：

图表组件：主图表组件
选项：图表配置选项
数据：图表数据格式
事件：图表事件
方法：图表方法
平台支持：多平台兼容性

2. 安装

使用npm：

npm install @qiun/ucharts

使用yarn：

yarn add @qiun/ucharts

使用pnpm：

pnpm add @qiun/ucharts

3. 基本设置

<template>
  <qiun-data-chart type="line" :chartData="chartData" :opts="opts" />
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        categories: ['周一', '周二', '周三', '周四', '周五'],
        series: [
          {
            name: '销售额',
            data: [35, 36, 31, 33, 13]
          }
        ]
      },
      opts: {}
    }
  }
}
</script>

文档映射（与官方文档一一对应）

examples/guide/ 或 examples/getting-started/ → https://www.ucharts.cn/v2/#/guide/index
examples/ → https://www.ucharts.cn/v2/#/document/index

示例和模板

此技能包含详细示例，按官方文档结构组织。所有示例都在examples/目录中（见上述映射）。

使用示例：

从用户请求中识别主题
从上述映射中加载相应的示例文件
遵循该文件中的指令、语法和最佳实践
根据具体用例调整代码示例

使用模板：

参考templates/目录中的模板以获取常见脚手架
根据具体需求和编码风格调整模板

API参考

详细API文档可在api/目录中找到，按官方uCharts API文档结构组织（https://www.ucharts.cn/v2/#/document/index）：

图表组件API（`api/chart-api.md`）

图表组件属性
图表组件事件
图表组件方法

选项API（`api/options-api.md`）

图表选项配置
选项属性
选项方法

数据API（`api/data-api.md`）

数据格式
数据结构
数据转换

事件API（`api/events-api.md`）

图表事件
事件处理程序
事件参数

方法API（`api/methods-api.md`）

图表方法
方法参数
方法返回值

使用API参考：

识别需要的API
从api/目录加载相应的API文件
查找API签名、参数、返回类型和示例
参考链接的示例文件以获取详细使用模式
所有API文件包含到examples/目录中相关示例文件的链接

最佳实践

正确配置选项：正确设置图表选项
正确格式化数据：使用正确的数据格式
处理事件：使用图表事件进行交互
使用方法：利用图表方法进行操作
优化性能：优化图表渲染性能
自定义外观：在需要时自定义图表外观
遵循平台模式：遵循平台特定的最佳实践

资源

官方文档：https://www.ucharts.cn/v2/#/
指南：https://www.ucharts.cn/v2/#/guide/index
文档：https://www.ucharts.cn/v2/#/document/index

关键词

uCharts, @qiun/ucharts, 图表, 折线图, 柱状图, 面积图, 饼图, 环形图, 雷达图, 漏斗图, 仪表盘, K线图, 混合图, 线图, 柱图, 饼图, 环形图, 雷达图, 漏斗图, 仪表盘图, 蜡烛图, 混合图, uni-app, 微信小程序, H5, APP, canvas, 图表选项, 图表数据, 图表事件, 图表方法

名称: ucharts 描述: 提供uCharts图表库的全面指导，包括图表类型、数据格式、图表配置和平台支持。当用户询问关于uCharts、需要创建图表、配置图表选项或在应用程序中使用uCharts时使用。 许可证: 完整条款见LICENSE.txt