ucharts

适用场景

当用户想要执行以下操作时，使用此技能：

• 在项目中安装和设置 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 时：

1. 根据用户的请求确定主题：

   • 安装/安装 → examples/guide/installation.md
   • 快速开始/快速开始 → examples/guide/quick-start.md
   • 图表类型/图表类型 → examples/charts/
   • 功能特性/功能特性 → examples/features/
   • API/API 文档 → api/

2. 从 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 - 蜡烛图
   • 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 - 图表自定义

3. 遵循相应示例文件中的具体说明，了解语法、结构和最佳实践

   重要说明：

   • uCharts 支持多个平台（uni-app、微信小程序、H5、APP）
   • 图表使用 canvas 进行渲染
   • 通过 options 对象进行配置
   • 每个示例文件都包含关键概念、代码示例和要点

4. 需要时参考 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

5. 使用 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: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
        series: [
          {
            name: 'Sales',
            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 参考：

1. 确定需要帮助的 API
2. 从 api/ 目录加载相应的 API 文件
3. 查找 API 签名、参数、返回类型和示例
4. 参考链接的示例文件，了解详细用法
5. 所有 API 文件都包含指向 examples/ 目录中相关示例文件的链接

最佳实践

1. 正确配置选项：正确设置图表选项
2. 正确格式化数据：使用正确的数据格式
3. 处理事件：使用图表事件实现交互
4. 使用方法：利用图表方法执行操作
5. 优化性能：优化图表渲染性能
6. 自定义外观：根据需要自定义图表外观
7. 遵循平台模式：遵循特定平台的最佳实践

资源

• 官方文档：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, 图表选项, 图表数据, 图表事件, 图表方法