Back to Details

ucharts

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:
  • Install and set up uCharts in a project
  • Create charts in uni-app applications
  • Use uCharts in WeChat Mini Program
  • Use uCharts in H5 applications
  • Configure chart options
  • Use different chart types
  • Handle chart events
  • Customize chart appearance
  • Understand uCharts API and methods
  • Troubleshoot uCharts issues
当用户有以下需求时，可使用本技能：
  • 在项目中安装和配置uCharts
  • 在uni-app应用中创建图表
  • 在微信小程序中使用uCharts
  • 在H5应用中使用uCharts
  • 配置图表选项
  • 使用不同类型的图表
  • 处理图表事件
  • 自定义图表外观
  • 了解uCharts的API和方法
  • 排查uCharts相关问题

How to use this skill

如何使用本技能

This skill is organized to match the uCharts official documentation structure (https://www.ucharts.cn/v2/#/, https://www.ucharts.cn/v2/#/guide/index, https://www.ucharts.cn/v2/#/document/index). When working with uCharts:
  1. Identify the topic from the user's request:
    • Installation/安装 → 
      examples/guide/installation.md
    • Quick Start/快速开始 → 
      examples/guide/quick-start.md
    • Chart Types/图表类型 → 
      examples/charts/
    • Features/功能特性 → 
      examples/features/
    • API/API 文档 → 
      api/
  2. Load the appropriate example file from the 
    examples/
    directory:
    Guide (使用指南):
    • examples/guide/intro.md
      - Introduction to uCharts
    • examples/guide/installation.md
      - Installation guide
    • examples/guide/quick-start.md
      - Quick start guide
    • examples/guide/configuration.md
      - Configuration
    • examples/guide/platform-support.md
      - Platform support
    Charts (图表类型):
    • examples/charts/line.md
      - Line chart
    • examples/charts/column.md
      - Column chart
    • examples/charts/area.md
      - Area chart
    • examples/charts/pie.md
      - Pie chart
    • examples/charts/ring.md
      - Ring chart
    • examples/charts/radar.md
      - Radar chart
    • examples/charts/funnel.md
      - Funnel chart
    • examples/charts/gauge.md
      - Gauge chart
    • examples/charts/candle.md
      - Candle chart
    • examples/charts/mix.md
      - Mixed chart
    Features (功能特性):
    • examples/features/data-format.md
      - Data format
    • examples/features/chart-events.md
      - Chart events
    • examples/features/chart-methods.md
      - Chart methods
    • examples/features/chart-update.md
      - Chart update
    • examples/features/chart-customization.md
      - Chart customization
  3. Follow the specific instructions in that example file for syntax, structure, and best practices
    Important Notes:
    • uCharts supports multiple platforms (uni-app, WeChat Mini Program, H5, APP)
    • Charts use canvas for rendering
    • Configuration through options object
    • Each example file includes key concepts, code examples, and key points
  4. Reference API documentation in the 
    api/
    directory when needed:
    • api/chart-api.md
      - Chart component API
    • api/options-api.md
      - Options API
    • api/data-api.md
      - Data API
    • api/events-api.md
      - Events API
    • api/methods-api.md
      - Methods API
  5. Use templates from the 
    templates/
    directory:
    • templates/installation.md
      - Installation templates
    • templates/basic-chart.md
      - Basic chart templates
    • templates/configuration.md
      - Configuration templates
本技能的结构与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/
  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
      - 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
      - 图表自定义
  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. Understanding uCharts

1. 了解uCharts

uCharts is a high-performance cross-platform charting library that supports uni-app, WeChat Mini Program, H5, APP and more.
Key Concepts:
  • Chart Component: Main chart component
  • Options: Chart configuration options
  • Data: Chart data format
  • Events: Chart events
  • Methods: Chart methods
  • Platform Support: Multi-platform compatibility
uCharts是一款高性能跨平台图表库，支持uni-app、微信小程序、H5、APP等多个平台。
核心概念:
  • Chart Component: 主图表组件
  • Options: 图表配置选项
  • Data: 图表数据格式
  • Events: 图表事件
  • Methods: 图表方法
  • Platform Support: 多平台兼容性

2. Installation

2. 安装

Using npm:
bash
npm install @qiun/ucharts
Using yarn:
bash
yarn add @qiun/ucharts
Using pnpm:
bash
pnpm add @qiun/ucharts
使用npm安装:
bash
npm install @qiun/ucharts
使用yarn安装:
bash
yarn add @qiun/ucharts
使用pnpm安装:
bash
pnpm add @qiun/ucharts

3. Basic Setup

3. 基础配置

vue
<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>
vue
<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>

Doc mapping (one-to-one with official documentation)

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

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the 
examples/
directory (see mapping above).
To use examples:
  • Identify the topic from the user's request
  • Load the appropriate example file from the mapping above
  • Follow the instructions, syntax, and best practices in that file
  • Adapt the code examples to your specific use case
To use templates:
  • Reference templates in 
    templates/
    directory for common scaffolding
  • Adapt templates to your specific needs and coding style
本技能包含详细的示例，结构与官方文档一致。所有示例都位于
examples/
目录中（见上述映射关系）。
使用示例:
  • 从用户的请求中确定主题
  • 根据上述映射关系加载对应的示例文件
  • 遵循文件中的说明、语法和最佳实践
  • 根据具体需求调整代码示例
使用模板:
  • 参考
    templates/
    目录下的模板搭建基础框架
  • 根据具体需求和编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the 
api/
directory, organized to match the official uCharts API documentation structure (https://www.ucharts.cn/v2/#/document/index):
详细的API文档位于
api/
目录中，结构与uCharts官方API文档一致（https://www.ucharts.cn/v2/#/document/index）:

Chart Component API (
api/chart-api.md
)

图表组件API (
api/chart-api.md
)

  • Chart component props
  • Chart component events
  • Chart component methods
  • 图表组件属性
  • 图表组件事件
  • 图表组件方法

Options API (
api/options-api.md
)

配置项API (
api/options-api.md
)

  • Chart options configuration
  • Option properties
  • Option methods
  • 图表配置项说明
  • 配置项属性
  • 配置项方法

Data API (
api/data-api.md
)

数据API (
api/data-api.md
)

  • Data format
  • Data structure
  • Data transformation
  • 数据格式
  • 数据结构
  • 数据转换

Events API (
api/events-api.md
)

事件API (
api/events-api.md
)

  • Chart events
  • Event handlers
  • Event parameters
  • 图表事件
  • 事件处理器
  • 事件参数

Methods API (
api/methods-api.md
)

方法API (
api/methods-api.md
)

  • Chart methods
  • Method parameters
  • Method return values
To use API reference:
  1. Identify the API you need help with
  2. Load the corresponding API file from the 
    api/
    directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the 
    examples/
    directory
  • 图表方法
  • 方法参数
  • 方法返回值
使用API参考:
  1. 确定需要查询的API
  2. 从
    api/
    目录中加载对应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考关联的示例文件了解详细使用方式
  5. 所有API文件都包含指向
    examples/
    目录中相关示例文件的链接

Best Practices

最佳实践

  1. Configure options properly: Set up chart options correctly
  2. Format data correctly: Use proper data format
  3. Handle events: Use chart events for interactions
  4. Use methods: Leverage chart methods for operations
  5. Optimize performance: Optimize chart rendering performance
  6. Customize appearance: Customize chart appearance when needed
  7. Follow platform patterns: Follow platform-specific best practices
  1. 正确配置选项：合理设置图表配置项
  2. 规范数据格式：使用正确的数据格式
  3. 处理事件：利用图表事件实现交互
  4. 使用方法：借助图表方法执行操作
  5. 优化性能：优化图表渲染性能
  6. 自定义外观：根据需求自定义图表外观
  7. 遵循平台规范：遵循各平台的最佳实践

Resources

资源

Keywords

关键词

uCharts, @qiun/ucharts, chart, 图表, 折线图, 柱状图, 饼图, 环形图, 雷达图, 漏斗图, 仪表盘, K线图, 混合图, line chart, column chart, area chart, pie chart, ring chart, radar chart, funnel chart, gauge chart, candle chart, mixed chart, uni-app, WeChat Mini Program, H5, APP, canvas, chart options, chart data, chart events, chart methods
uCharts, @qiun/ucharts, chart, 图表, 折线图, 柱状图, 饼图, 环形图, 雷达图, 漏斗图, 仪表盘, K线图, 混合图, line chart, column chart, area chart, pie chart, ring chart, radar chart, funnel chart, gauge chart, candle chart, mixed chart, uni-app, 微信小程序, H5, APP, canvas, chart options, chart data, chart events, chart methods