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:
- 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/
- 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
- 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
- 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
- Use templates from the
templates/ directory:
- templates/installation.md - Installation templates
- templates/basic-chart.md - Basic chart templates
- templates/configuration.md - Configuration templates
1. Understanding 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
2. Installation
Using npm:
```bash
npm install @qiun/ucharts
```
Using yarn:
```bash
yarn add @qiun/ucharts
```
Using pnpm:
```bash
pnpm add @qiun/ucharts
```
3. Basic Setup
```vue
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
{
name: 'Sales',
data: [35, 36, 31, 33, 13]
}
]
},
opts: {}
}
}
}
```
Doc mapping (one-to-one with official documentation)
examples/guide/ or examples/getting-started/ โ https://www.ucharts.cn/v2/#/guide/indexexamples/ โ https://www.ucharts.cn/v2/#/document/index