uniapp-ucharts
Integrates uCharts data visualization into UniApp projects including easycom configuration, pages.json and manifest.json setup, platform-specific handling (H5, mini-program, App, nvue), and chart lifecycle management. Use when the user needs to add charts to a UniApp project, configure uCharts components, or handle cross-platform chart rendering.
Best use case
uniapp-ucharts is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. Integrates uCharts data visualization into UniApp projects including easycom configuration, pages.json and manifest.json setup, platform-specific handling (H5, mini-program, App, nvue), and chart lifecycle management. Use when the user needs to add charts to a UniApp project, configure uCharts components, or handle cross-platform chart rendering.
Integrates uCharts data visualization into UniApp projects including easycom configuration, pages.json and manifest.json setup, platform-specific handling (H5, mini-program, App, nvue), and chart lifecycle management. Use when the user needs to add charts to a UniApp project, configure uCharts components, or handle cross-platform chart rendering.
Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.
Practical example
Example input
Use the "uniapp-ucharts" skill to help with this workflow task. Context: Integrates uCharts data visualization into UniApp projects including easycom configuration, pages.json and manifest.json setup, platform-specific handling (H5, mini-program, App, nvue), and chart lifecycle management. Use when the user needs to add charts to a UniApp project, configure uCharts components, or handle cross-platform chart rendering.
Example output
A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.
When to use this skill
- Use this skill when you want a reusable workflow rather than writing the same prompt again and again.
When not to use this skill
- Do not use this when you only need a one-off answer and do not need a reusable workflow.
- Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/uniapp-ucharts/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How uniapp-ucharts Compares
| Feature / Agent | uniapp-ucharts | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Integrates uCharts data visualization into UniApp projects including easycom configuration, pages.json and manifest.json setup, platform-specific handling (H5, mini-program, App, nvue), and chart lifecycle management. Use when the user needs to add charts to a UniApp project, configure uCharts components, or handle cross-platform chart rendering.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
## When to use this skill Use this skill whenever the user wants to: - Integrate uCharts into UniApp projects - Configure UniApp projects to work with uCharts (pages.json, manifest.json, easycom) - Handle platform-specific behaviors when using uCharts in UniApp (H5, mini-program, App, nvue) - Use UniApp features (navigation, APIs, lifecycle) with uCharts components - Build cross-platform UniApp applications with uCharts charts - Configure easycom for automatic uCharts component import in UniApp - Handle navigation and routing with uCharts in UniApp - Optimize UniApp projects using uCharts - Deploy uCharts-based UniApp applications to multiple platforms ## How to use this skill This skill is organized to match UniApp integration patterns and the official UniApp plugin structure (https://ext.dcloud.net.cn/plugin?id=271). When working with uCharts in UniApp: 1. **Install and setup** uCharts in UniApp project: - Load `examples/getting-started/installation.md` for installation in UniApp - Load `examples/getting-started/project-setup.md` for UniApp project configuration - Load `examples/getting-started/easycom-config.md` for easycom configuration 2. **Integrate with UniApp features**: - Load `examples/integration/pages-config.md` for pages.json configuration - Load `examples/integration/manifest-config.md` for manifest.json configuration - Load `examples/integration/navigation.md` for navigation with uCharts - Load `examples/integration/uni-api.md` for using UniApp APIs with uCharts 3. **Handle platform-specific behaviors**: - Load `examples/platform-specific/h5.md` for H5 platform considerations - Load `examples/platform-specific/miniprogram.md` for mini-program considerations - Load `examples/platform-specific/app.md` for App platform considerations - Load `examples/platform-specific/nvue.md` for nvue considerations 4. **Advanced integration**: - Load `examples/advanced/custom-theme.md` for theme customization in UniApp - Load `examples/advanced/build-optimization.md` for build optimization - Load `examples/advanced/multi-platform.md` for multi-platform deployment 5. **Reference the API documentation** when needed: - `api/integration-api.md` - UniApp and uCharts integration API - `api/config-api.md` - Configuration API reference 6. **Use templates** for quick start: - `templates/basic-uniapp-project.md` - Basic UniApp project with uCharts - `templates/pages-template.md` - Pages configuration template - `templates/manifest-template.md` - Manifest configuration template **Important Notes**: - This skill focuses on UniApp integration, not uCharts API documentation - Always configure easycom in pages.json for automatic component import - Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code - Test on all target platforms (H5, mini-programs, App) before deployment - Use rpx units for responsive sizing in UniApp ## Examples and Templates ### Getting Started - **Installation**: `examples/getting-started/installation.md` - How to install uCharts in UniApp projects - **Project Setup**: `examples/getting-started/project-setup.md` - Setting up UniApp project with uCharts - **Easycom Config**: `examples/getting-started/easycom-config.md` - Configuring easycom for automatic component import ### Integration - **Pages Config**: `examples/integration/pages-config.md` - Configuring pages.json with uCharts - **Manifest Config**: `examples/integration/manifest-config.md` - Configuring manifest.json for uCharts - **Navigation**: `examples/integration/navigation.md` - Navigation and routing with uCharts - **UniApp API**: `examples/integration/uni-api.md` - Using UniApp APIs with uCharts components ### Platform-Specific - **H5**: `examples/platform-specific/h5.md` - H5 platform considerations with uCharts - **Mini-Program**: `examples/platform-specific/miniprogram.md` - Mini-program considerations with uCharts - **App**: `examples/platform-specific/app.md` - App platform considerations with uCharts - **nvue**: `examples/platform-specific/nvue.md` - nvue considerations with uCharts ### Advanced - **Custom Theme**: `examples/advanced/custom-theme.md` - Customizing themes in UniApp projects - **Build Optimization**: `examples/advanced/build-optimization.md` - Optimizing UniApp builds with uCharts - **Multi-Platform**: `examples/advanced/multi-platform.md` - Multi-platform deployment strategies ### Templates - **Basic Project**: `templates/basic-uniapp-project.md` - Basic UniApp project structure with uCharts - **Pages Template**: `templates/pages-template.md` - pages.json configuration template - **Manifest Template**: `templates/manifest-template.md` - manifest.json configuration template ## API Reference - **Integration API**: `api/integration-api.md` - UniApp and uCharts integration API reference - **Config API**: `api/config-api.md` - Configuration API reference for UniApp projects ## Best Practices 1. **Use easycom**: Configure easycom in pages.json for automatic uCharts component import 2. **Platform Testing**: Test on all target platforms (H5, mini-programs, App) before deployment 3. **Use rpx Units**: Use rpx for responsive sizing in UniApp, px for fixed sizes 4. **Canvas Support**: Ensure canvas is properly supported on target platforms 5. **Manifest Configuration**: Properly configure manifest.json for each platform 6. **Conditional Compilation**: Use conditional compilation (`#ifdef`, `#endif`) for platform-specific code 7. **Performance**: Optimize for each platform's specific requirements 8. **Data Format**: Ensure data format is compatible with uCharts requirements 9. **Lifecycle Management**: Properly handle UniApp page lifecycle with uCharts instances 10. **Memory Management**: Clean up chart instances in onUnload lifecycle ## Resources - **Official UniApp Plugin**: https://ext.dcloud.net.cn/plugin?id=271 - **UniApp Documentation**: https://uniapp.dcloud.net.cn/ - **UniApp API Reference**: https://uniapp.dcloud.net.cn/api/ ## Keywords uniapp, ucharts, uniapp charts, uniapp integration, uniapp configuration, easycom, pages.json, manifest.json, uni-app, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异, 图表, canvas, 图表组件, UniApp 图表, 跨平台图表, 小程序图表, App 图表
Related Skills
uniappx-uview-pro
Integrates uView Pro component library into UniAppX (uni-app-x) projects with TypeScript and Composition API, including easycom configuration, pages.json and manifest.json setup, and platform-specific handling. Use when the user needs to add uView Pro components to a UniAppX project, configure TypeScript .uts integration, or handle cross-platform styling.
uniappx-project
Provides per-component and per-API examples with platform compatibility details for uni-app-x (Vue 3 + TypeScript + Vite). Use when the user needs official uni-app-x built-in components, API references with examples, cross-platform compatibility checks, or conditional compilation guidance for uni-app-x projects.
uniappx-project-creator
Creates new uni-app-x projects with Vue 3 + TypeScript + Vite via CLI or HBuilderX, including tsconfig.json setup, manifest.json and pages.json configuration, and Composition API project templates. Use when the user wants to scaffold a new uni-app-x project, initialize TypeScript project files, or set up the uni-app-x development environment.
uniapp-uview
Integrates uView UI component library into UniApp projects including easycom configuration, pages.json and manifest.json setup, SCSS theming, and platform-specific handling (H5, mini-program, App, nvue). Use when the user needs to add uView UI components to a UniApp project, configure easycom auto-import, or handle cross-platform styling.
uniapp-project
Provides per-component and per-API examples with cross-platform compatibility details for uni-app, covering built-in components, uni-ui components, and APIs (network, storage, device, UI, navigation, media). Use when the user needs official uni-app components or APIs, wants per-component examples with doc links, or needs platform compatibility checks.
uniapp-project-creator
Creates new uni-app projects via the official CLI or HBuilderX with Vue 2/Vue 3 template selection, manifest.json and pages.json configuration, and directory structure setup. Use when the user wants to scaffold a new uni-app project, initialize project files with a single command, or set up the development environment.
uniapp-plugin
Browses, installs, configures, and manages plugins from the uni-app plugin market (ext.dcloud.net.cn) including component plugins, API plugins, and template plugins with dependency handling. Use when the user needs to find and install uni-app plugins, configure plugin settings, manage plugin dependencies, or integrate third-party components.
uniapp-native-plugin
Develops native Android and iOS plugins for uni-app including module creation, JavaScript-to-native communication, and plugin packaging for distribution. Use when the user needs to build custom native modules, extend uni-app with native capabilities (camera, Bluetooth, sensors), or create publishable native plugins.
uniapp-native-app
Packages uni-app projects as native Android APK/AAB and iOS IPA via offline packaging, covering manifest configuration, signing certificates, native plugin integration, and build distribution. Use when the user needs to package a uni-app as a native app, configure Android keystore or iOS provisioning, or set up offline build for distribution.
uniapp-mini
Guides uni-app mini program development including configuration, component usage, API compatibility, and conditional compilation for WeChat, Alipay, Baidu, and other mini program platforms. Use when the user wants to build uni-app mini programs, configure mini program settings, or handle platform-specific differences.
uniapp-cloud
Guides uniCloud cloud development in uni-app including project setup, cloud database CRUD operations, cloud function deployment, cloud storage file management, and datacom component data binding. Use when the user needs to integrate uniCloud services, work with cloud databases, create cloud functions, or manage cloud storage in a uni-app project.
uniapp-ad
Integrates uni-ad monetization into uni-app applications including banner, interstitial, rewarded video, and native ad types with event handling and placement configuration. Use when the user needs to add ad monetization, configure ad types, handle ad load/show/close/error events, or optimize ad revenue in a uni-app project.