cnbugs/uni-halo
1
0
Fork 0
mirror of https://github.com/ialley-workshop-open/uni-halo.git synced 2026-09-12 16:40:40 +08:00
Code Issues Activity

refactor: 架构升级

Browse Source
This commit is contained in:
小莫唐尼
2026-08-31 07:58:23 +08:00
commit ba5b77568b
693 changed files with 118430 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.agents/bak-skills/uniapp-ucharts/LICENSE.txt
+202
View File
@@ -0,0 +1,202 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction,
and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by
the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all
other entities that control, are controlled by, or are under common
control with that entity. For the purposes of this definition,
"control" means (i) the power, direct or indirect, to cause the
direction or management of such entity, whether by contract or
otherwise, or (ii) ownership of fifty percent (50%) or more of the
outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity
exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications,
including but not limited to software source code, documentation
source, and configuration files.
"Object" form shall mean any form resulting from mechanical
transformation or translation of a Source form, including but
not limited to compiled object code, generated documentation,
and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or
Object form, made available under the License, as indicated by a
copyright notice that is included in or attached to the work
(an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object
form, that is based on (or derived from) the Work and for which the
editorial revisions, annotations, elaborations, or other modifications
represent, as a whole, an original work of authorship. For the purposes
of this License, Derivative Works shall not include works that remain
separable from, or merely link (or bind by name) to the interfaces of,
the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including
the original version of the Work and any modifications or additions
to that Work or Derivative Works thereof, that is intentionally
submitted to Licensor for inclusion in the Work by the copyright owner
or by an individual or Legal Entity authorized to submit on behalf of
the copyright owner. For the purposes of this definition, "submitted"
means any form of electronic, verbal, or written communication sent
to the Licensor or its representatives, including but not limited to
communication on electronic mailing lists, source code control systems,
and issue tracking systems that are managed by, or on behalf of, the
Licensor for the purpose of discussing and improving the Work, but
excluding communication that is conspicuously marked or otherwise
designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity
on behalf of whom a Contribution has been received by Licensor and
subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
copyright license to reproduce, prepare Derivative Works of,
publicly display, publicly perform, sublicense, and distribute the
Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of
this License, each Contributor hereby grants to You a perpetual,
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
(except as stated in this section) patent license to make, have made,
use, offer to sell, sell, import, and otherwise transfer the Work,
where such license applies only to those patent claims licensable
by such Contributor that are necessarily infringed by their
Contribution(s) alone or by combination of their Contribution(s)
with the Work to which such Contribution(s) was submitted. If You
institute patent litigation against any entity (including a
cross-claim or counterclaim in a lawsuit) alleging that the Work
or a Contribution incorporated within the Work constitutes direct
or contributory patent infringement, then any patent licenses
granted to You under this License for that Work shall terminate
as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the
Work or Derivative Works thereof in any medium, with or without
modifications, and in Source or Object form, provided that You
meet the following conditions:
(a) You must give any other recipients of the Work or
Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices
stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works
that You distribute, all copyright, patent, trademark, and
attribution notices from the Source form of the Work,
excluding those notices that do not pertain to any part of
the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its
distribution, then any Derivative Works that You distribute must
include a readable copy of the attribution notices contained
within such NOTICE file, excluding those notices that do not
pertain to any part of the Derivative Works, in at least one
of the following places: within a NOTICE text file distributed
as part of the Derivative Works; within the Source form or
documentation, if provided along with the Derivative Works; or,
within a display generated by the Derivative Works, if and
wherever such third-party notices normally appear. The contents
of the NOTICE file are for informational purposes only and
do not modify the License. You may add Your own attribution
notices within Derivative Works that You distribute, alongside
or as an addendum to the NOTICE text from the Work, provided
that such additional attribution notices cannot be construed
as modifying the License.
You may add Your own copyright statement to Your modifications and
may provide additional or different license terms and conditions
for use, reproduction, or distribution of Your modifications, or
for any such Derivative Works as a whole, provided Your use,
reproduction, and distribution of the Work otherwise complies with
the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise,
any Contribution intentionally submitted for inclusion in the Work
by You to the Licensor shall be under the terms and conditions of
this License, without any additional terms or conditions.
Notwithstanding the above, nothing herein shall supersede or modify
the terms of any separate license agreement you may have executed
with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade
names, trademarks, service marks, or product names of the Licensor,
except as required for reasonable and customary use in describing the
origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or
agreed to in writing, Licensor provides the Work (and each
Contributor provides its Contributions) on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
implied, including, without limitation, any warranties or conditions
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
PARTICULAR PURPOSE. You are solely responsible for determining the
appropriateness of using or redistributing the Work and assume any
risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory,
whether in tort (including negligence), contract, or otherwise,
unless required by applicable law (such as deliberate and grossly
negligent acts) or agreed to in writing, shall any Contributor be
liable to You for damages, including any direct, indirect, special,
incidental, or consequential damages of any character arising as a
result of this License or out of the use or inability to use the
Work (including but not limited to damages for loss of goodwill,
work stoppage, computer failure or malfunction, or any and all
other commercial damages or losses), even if such Contributor
has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing
the Work or Derivative Works thereof, You may choose to offer,
and charge a fee for, acceptance of support, warranty, indemnity,
or other liability obligations and/or rights consistent with this
License. However, in accepting such obligations, You may act only
on Your own behalf and on Your sole responsibility, not on behalf
of any other Contributor, and only if You agree to indemnify,
defend, and hold each Contributor harmless for any liability
incurred by, or claims asserted against, such Contributor by reason
of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following
boilerplate notice, with the fields enclosed by brackets "[]"
replaced with your own identifying information. (Don't include
the brackets!) The text should be enclosed in the appropriate
comment syntax for the file format. We also recommend that a
file or class name and description of purpose be included on the
same "printed page" as the copyright notice for easier
identification within third-party archives.
Copyright [yyyy] [name of copyright owner]
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
.agents/bak-skills/uniapp-ucharts/SKILL.md
+157
View File
@@ -0,0 +1,157 @@
---
name: uniapp-ucharts
description: A comprehensive skill for integrating and using uCharts with UniApp projects. This skill focuses on UniApp-specific integration, configuration, and platform-specific considerations when using uCharts in UniApp applications. Use this skill whenever the user needs to integrate uCharts into UniApp projects, configure UniApp-specific settings, or handle platform differences.
license: Complete terms in LICENSE.txt
---
## 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 图表
## 能力边界
### ✅ 适用场景
- 当你需要使用此技能对应的技术栈时
- 当项目需要遵循最佳实践时
- 当需要快速上手或深入理解核心概念时
### ⚠️ 需要注意
- 复杂业务逻辑需要结合具体场景调整
- 性能优化需要根据实际数据量评估
### ❌ 不适用场景
- 不相关的技术栈或框架
- 需要完全自定义的特殊场景
## 常见陷阱 (Gotchas)
1. **版本兼容性**：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异
2. **配置文件格式**：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查
3. **环境变量**：确保所有必要的环境变量已正确设置，敏感信息不要硬编码
4. **依赖冲突**：多版本共存时注意依赖冲突，使用 lock 文件锁定版本
5. **性能陷阱**：大数据量场景下注意性能优化，避免 N+1 查询等常见问题
## 使用流程
### Step 1: 环境准备
确保开发环境已安装必要的依赖和工具。
### Step 2: 配置初始化
根据项目需求进行基础配置。
### Step 3: 核心功能使用
按照示例代码实现核心功能。
### Step 4: 测试验证
运行测试确保功能正常。
### Step 5: 部署上线
完成开发后进行部署和监控。
.agents/bak-skills/uniapp-ucharts/api/config-api.md
+167
View File
@@ -0,0 +1,167 @@
# Configuration API
## 配置 API
UniApp + uCharts 项目的配置文件 API 参考。
### pages.json 配置
#### easycom 配置
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
#### pages 配置
```json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationStyle": "default" | "custom",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black" | "white",
"backgroundColor": "#f5f5f5",
"enablePullDownRefresh": true,
"onReachBottomDistance": 50
}
}
]
}
```
#### globalStyle 配置
```json
{
"globalStyle": {
"navigationBarTextStyle": "black" | "white",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### manifest.json 配置
#### 基本配置
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false
}
```
#### H5 配置
```json
{
"h5": {
"router": {
"mode": "hash" | "history",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
}
}
}
```
#### 微信小程序配置
```json
{
"mp-weixin": {
"appid": "your-appid",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true
}
}
```
#### App 配置
```json
{
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"distribute": {
"android": {
"permissions": []
},
"ios": {}
}
}
}
```
### uni.scss 配置
```scss
/* uni.scss */
/* 自定义变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;
```
### App.vue 配置
```vue
<style lang="scss">
/* 全局样式 */
page {
background-color: #f5f5f5;
}
</style>
```
### main.js 配置
#### Vue 2
```javascript
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
```
#### Vue 3
```javascript
import { createSSRApp } from 'vue'
import App from './App'
export function createApp() {
const app = createSSRApp(App)
return { app }
}
```
.agents/bak-skills/uniapp-ucharts/api/integration-api.md
+153
View File
@@ -0,0 +1,153 @@
# Integration API
## UniApp 与 uCharts 整合 API
UniApp 与 uCharts 整合使用的 API 参考。
### easycom 配置 API
```json
{
"easycom": {
"autoscan": boolean,
"custom": {
"qiun-data-charts": "string"
}
}
}
```
### pages.json API
```json
{
"pages": [
{
"path": "string",
"style": {
"navigationBarTitleText": "string",
"navigationStyle": "default" | "custom",
"navigationBarBackgroundColor": "string",
"navigationBarTextStyle": "black" | "white",
"enablePullDownRefresh": boolean,
"onReachBottomDistance": number
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black" | "white",
"navigationBarTitleText": "string",
"navigationBarBackgroundColor": "string",
"backgroundColor": "string"
}
}
```
### manifest.json API
```json
{
"name": "string",
"appid": "string",
"versionName": "string",
"versionCode": "string",
"transformPx": boolean,
"app-plus": {
"usingComponents": boolean,
"nvueStyleCompiler": "uni-app" | "weex"
},
"h5": {
"router": {
"mode": "hash" | "history",
"base": "string"
}
},
"mp-weixin": {
"appid": "string",
"setting": {
"urlCheck": boolean,
"es6": boolean,
"enhance": boolean,
"postcss": boolean,
"minified": boolean
},
"usingComponents": boolean
}
}
```
### UniApp API 与 uCharts 配合
#### 导航 API
```javascript
// 页面跳转
uni.navigateTo({
url: 'string',
success: function,
fail: function,
complete: function
})
// 页面返回
uni.navigateBack({
delta: number
})
```
#### 网络请求 API
```javascript
uni.request({
url: 'string',
method: 'GET' | 'POST' | 'PUT' | 'DELETE',
data: object,
header: object,
success: function,
fail: function,
complete: function
})
```
#### 存储 API
```javascript
// 存储数据
uni.setStorage({
key: 'string',
data: any,
success: function,
fail: function
})
// 获取数据
uni.getStorage({
key: 'string',
success: function,
fail: function
})
```
### 条件编译 API
```javascript
// #ifdef 平台名称
// 平台特定代码
// #endif
// #ifndef 平台名称
// 非平台特定代码
// #endif
// #ifdef H5
// H5 平台代码
// #endif
// #ifdef MP-WEIXIN
// 微信小程序代码
// #endif
// #ifdef APP-PLUS
// App 平台代码
// #endif
```
.agents/bak-skills/uniapp-ucharts/examples/advanced/build-optimization.md
+100
View File
@@ -0,0 +1,100 @@
# Build Optimization
## 构建优化
优化 UniApp + uCharts 项目的构建和性能。
### 代码分割
使用条件编译减少代码体积：
```vue
<template>
<view>
<!-- #ifdef H5 -->
<qiun-data-charts type="line" :opts="opts" :chartData="chartData" />
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
<!-- #endif -->
</view>
</template>
```
### 组件按需引入
虽然 easycom 会自动引入，但可以优化：
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
### 图表数据优化
```vue
<script>
export default {
data() {
return {
chartData: {},
opts: {
// 优化配置
enableScroll: false,
dataLabel: false,
legend: {
show: false
}
}
}
},
methods: {
// 数据采样，减少数据量
sampleData(data, maxPoints = 100) {
if (data.length <= maxPoints) {
return data
}
const step = Math.ceil(data.length / maxPoints)
return data.filter((_, index) => index % step === 0)
}
}
}
</script>
```
### 打包配置
在 manifest.json 中配置打包选项：
```json
{
"mp-weixin": {
"setting": {
"minified": true,
"postcss": true
}
},
"h5": {
"optimization": {
"treeShaking": {
"enable": true
}
}
}
}
```
### 注意事项
1. **条件编译**：使用条件编译减少代码体积
2. **数据优化**：合理控制数据量，避免过大
3. **配置优化**：合理配置图表选项，提高性能
4. **打包配置**：正确配置打包选项
5. **性能测试**：在不同平台测试性能
.agents/bak-skills/uniapp-ucharts/examples/advanced/custom-theme.md
+117
View File
@@ -0,0 +1,117 @@
# Custom Theme
## 自定义主题
在 UniApp 项目中自定义 uCharts 主题。
### 配置主题颜色
在图表配置中设置主题颜色：
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70]
}]
},
opts: {
color: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: {
show: true
}
}
}
}
}
</script>
```
### 使用 SCSS 变量
在 `uni.scss` 中定义主题变量：
```scss
/* uni.scss */
$chart-primary-color: #409EFF;
$chart-success-color: #67C23A;
$chart-warning-color: #E6A23C;
$chart-error-color: #F56C6C;
```
在组件中使用：
```vue
<script>
export default {
data() {
return {
opts: {
color: [
'#409EFF', // 使用主题变量
'#67C23A',
'#E6A23C',
'#F56C6C'
]
}
}
}
}
</script>
```
### 条件编译主题
不同平台可以使用不同主题：
```vue
<script>
export default {
data() {
return {
opts: {
// #ifdef H5
color: ['#409EFF', '#67C23A'],
// #endif
// #ifdef MP-WEIXIN
color: ['#07c160', '#ff976a'],
// #endif
// #ifdef APP-PLUS
color: ['#007AFF', '#34C759'],
// #endif
padding: [15, 15, 0, 15],
enableScroll: false
}
}
}
}
</script>
```
### 注意事项
1. **颜色配置**：使用合理的颜色搭配
2. **平台差异**：使用条件编译处理平台差异
3. **主题一致性**：保持应用主题一致性
4. **可读性**：确保图表颜色具有良好的可读性
5. **测试验证**：在不同平台测试主题效果
.agents/bak-skills/uniapp-ucharts/examples/advanced/multi-platform.md
+105
View File
@@ -0,0 +1,105 @@
# Multi-Platform Deployment
## 多平台部署
UniApp + uCharts 项目支持多平台部署的策略和注意事项。
### 平台差异处理
使用条件编译处理平台差异：
```vue
<template>
<view>
<!-- #ifdef H5 -->
<view>H5 平台内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>App 平台内容</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
opts: {
// #ifdef H5
// H5 平台配置
enableScroll: true,
// #endif
// #ifdef MP-WEIXIN
// 微信小程序配置
enableScroll: false,
// #endif
// #ifdef APP-PLUS
// App 平台配置
enableScroll: false,
// #endif
color: ['#409EFF'],
padding: [15, 15, 0, 15]
}
}
}
}
</script>
```
### 统一 API 封装
封装统一的 API 调用：
```javascript
// utils/api.js
export function request(url, options = {}) {
return new Promise((resolve, reject) => {
uni.request({
url,
...options,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
})
})
}
```
### 平台特定配置
在 manifest.json 中配置各平台：
```json
{
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "your-appid"
},
"app-plus": {
"usingComponents": true
}
}
```
### 注意事项
1. **条件编译**：使用条件编译处理平台差异
2. **API 统一**：封装统一的 API 调用
3. **配置管理**：正确配置各平台参数
4. **测试验证**：在各平台测试功能
5. **文档记录**：记录平台差异和注意事项
.agents/bak-skills/uniapp-ucharts/examples/getting-started/easycom-config.md
+196
View File
@@ -0,0 +1,196 @@
# Easycom Configuration
## Easycom 配置
easycom 是 UniApp 的自动引入机制，配置后可以自动引入 uCharts 组件，无需手动 import。
### 基本配置
在 `pages.json` 中配置 easycom：
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
### 配置说明
- `autoscan: true`：开启自动扫描
- `custom`：自定义规则
- `qiun-data-charts`：组件名称
- `@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue`：组件路径
### 使用示例
配置后，可以直接使用组件，无需引入：
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70]
}]
},
opts: {
color: ['#409EFF']
}
}
}
}
</script>
```
### 完整 pages.json 示例
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### 自定义组件路径
如果 uCharts 安装在不同位置，需要调整路径：
#### npm 安装
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/node_modules/@qiun/ucharts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
#### uni_modules 安装
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
}
}
```
### 禁用 easycom
如果不想使用 easycom，可以手动引入：
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
export default {
components: {
qiunDataCharts
},
data() {
return {
chartData: {},
opts: {}
}
}
}
</script>
```
### 验证配置
创建测试页面验证 easycom 是否生效：
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed'],
series: [{
name: '数据',
data: [120, 200, 150]
}]
},
opts: {
color: ['#409EFF']
}
}
}
}
</script>
```
如果图表正常显示且无报错，说明 easycom 配置成功。
## 注意事项
1. **路径必须正确**：确保组件路径与实际安装位置一致
2. **组件名称**：uCharts 组件名称为 `qiun-data-charts`
3. **重启项目**：修改 easycom 配置后需要重启项目
4. **优先级**：easycom 优先级高于手动引入
5. **性能**：easycom 不会影响性能，按需加载组件
.agents/bak-skills/uniapp-ucharts/examples/getting-started/installation.md
+226
View File
@@ -0,0 +1,226 @@
# Installation | 安装
## Instructions
This example demonstrates how to install uCharts in UniApp projects via DCloud plugin marketplace (plugin ID: 271).
### Key Concepts
- Installing uCharts via DCloud plugin marketplace
- Installing via npm
- Project structure setup
- Component import methods
- Easycom configuration
### Example: Install via DCloud Plugin Marketplace (Recommended)
**Official Plugin**: https://ext.dcloud.net.cn/plugin?id=271
```bash
# 1. Open HBuilderX
# 2. Go to Tools -> Plugin Installation
# 3. Search for "uCharts" or enter plugin ID: 271
# 4. Click "Import Plugin"
# 5. Plugin will be installed to uni_modules/qiun-data-charts directory
```
**Project Structure After Installation:**
```
project-root/
├── uni_modules/
│ └── qiun-data-charts/
│ ├── components/
│ │ └── qiun-data-charts/
│ └── ...
├── pages/
├── pages.json
└── manifest.json
```
### Example: Install via npm
```bash
# Install uCharts package
npm install @qiun/ucharts
# Or using yarn
yarn add @qiun/ucharts
```
**Import in Component:**
```javascript
// pages/chart/chart.vue
import uCharts from '@qiun/ucharts'
export default {
onReady() {
// Use uCharts here
}
}
```
### Example: Manual Installation
```bash
# 1. Download from DCloud plugin marketplace
# 2. Extract to project root
# 3. Ensure uni_modules/qiun-data-charts/ exists
```
## UniApp 项目配置
### 1. 引入 uCharts
在页面中引入 uCharts 组件：
```vue
<template>
<view class="chart-container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
}
}
</script>
```
### 2. 配置 easycom（推荐）
在 `pages.json` 中配置 easycom，实现组件自动引入：
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
// ... 页面配置
]
}
```
### 3. 验证安装
创建测试页面验证安装是否成功：
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70, 110, 130]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: {
show: false
},
xAxis: {
disableGrid: true
},
yAxis: {
gridType: 'dash',
dashLength: 2
}
}
}
}
}
</script>
<style scoped>
.container {
width: 100%;
height: 400px;
}
</style>
```
如果图表正常显示，说明安装成功。
## 目录结构
安装后的项目结构：
```
uniapp-project/
├── uni_modules/
│ └── qiun-data-charts/ # uCharts 插件
│ ├── components/ # 组件目录
│ └── ucharts/ # uCharts 核心文件
├── pages/ # 页面目录
├── static/ # 静态资源
├── App.vue # 应用入口
├── main.js # 主入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── uni.scss # 全局样式变量
```
### Example: Verify Installation
```vue
<!-- pages/index/index.vue -->
<template>
<view>
<qiun-data-charts type="line" :chartData="chartData" />
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [35, 36, 31, 33, 13]
}]
}
}
}
}
</script>
```
### Key Points
- Install via DCloud plugin marketplace for easiest integration
- Plugin ID: 271
- Component will be in `uni_modules/qiun-data-charts/components/qiun-data-charts/`
- Configure easycom in pages.json for automatic import
- Test installation by using the component in a page
- Ensure canvas is supported on target platforms
.agents/bak-skills/uniapp-ucharts/examples/getting-started/project-setup.md
+246
View File
@@ -0,0 +1,246 @@
# Project Setup
## UniApp 项目配置
配置 UniApp 项目以正确使用 uCharts。
### 项目结构
标准的 UniApp + uCharts 项目结构：
```
uniapp-project/
├── uni_modules/
│ └── qiun-data-charts/ # uCharts 插件
├── pages/ # 页面目录
│ ├── index/
│ │ └── index.vue
│ └── ...
├── components/ # 自定义组件
├── static/ # 静态资源
├── utils/ # 工具函数
├── App.vue # 应用入口
├── main.js # 主入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── uni.scss # 全局样式变量
```
### App.vue 配置
```vue
<template>
<view id="app">
<!-- 应用根组件 -->
</view>
</template>
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/* 全局样式 */
page {
background-color: #f5f5f5;
}
</style>
```
### main.js 配置
```javascript
import App from './App'
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
```
### pages.json 配置
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### uni.scss 配置
```scss
/* uni.scss */
/* 自定义全局变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;
```
### manifest.json 配置要点
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
}
```
## 开发环境配置
### HBuilderX 配置
1. **启用 Canvas 支持**：
- 确保项目支持 Canvas
- 检查平台是否支持 Canvas
2. **配置编译器**：
- 工具 → 选项 → HBuilderX → 编译器
- 确保启用相关编译选项
### 条件编译
使用条件编译处理平台差异：
```vue
<template>
<view>
<!-- #ifdef H5 -->
<view>H5 平台特有内容</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序特有内容</view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view>App 平台特有内容</view>
<!-- #endif -->
</view>
</template>
```
## 验证配置
创建测试页面验证配置是否正确：
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70, 110, 130]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: {
show: false
},
xAxis: {
disableGrid: true
},
yAxis: {
gridType: 'dash',
dashLength: 2
}
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
width: 100%;
height: 400px;
padding: 20rpx;
}
</style>
```
## 注意事项
1. **easycom 必须配置**：否则需要手动引入组件
2. **Canvas 支持**：确保目标平台支持 Canvas
3. **容器高度**：图表容器必须有明确的高度
4. **数据格式**：确保数据格式符合 uCharts 要求
5. **平台测试**：在不同平台测试图表功能
6. **性能优化**：注意图表性能，避免过多图表
.agents/bak-skills/uniapp-ucharts/examples/integration/manifest-config.md
+163
View File
@@ -0,0 +1,163 @@
# Manifest Configuration
## manifest.json 配置
`manifest.json` 是 UniApp 的应用配置文件，需要正确配置以支持 uCharts 在不同平台运行。
### 基本配置
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
}
```
### H5 平台配置
```json
{
"h5": {
"router": {
"mode": "hash",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
},
"publicPath": "/",
"template": "index.html"
}
}
```
### 微信小程序配置
```json
{
"mp-weixin": {
"appid": "your-appid",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
}
```
### App 平台配置
```json
{
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.INTERNET\"/>"
]
},
"ios": {}
}
}
}
```
### 完整配置示例
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"description": "UniApp + uCharts 项目",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app"
},
"h5": {
"router": {
"mode": "hash"
},
"devServer": {
"port": 8080
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true
}
}
```
## 关键配置说明
### usingComponents
所有平台都需要设置 `"usingComponents": true`，以支持组件使用。
### transformPx
建议设置为 `false`，使用 rpx 单位进行响应式布局。
### Canvas 支持
uCharts 依赖 Canvas，确保目标平台支持 Canvas：
- **H5**：完全支持 Canvas
- **小程序**：支持 Canvas，但可能有性能限制
- **App**：支持 Canvas，但 nvue 可能有限制
## 注意事项
1. **usingComponents**：必须设置为 true
2. **平台差异**：不同平台对 Canvas 的支持可能有差异
3. **AppID**：小程序平台需要配置对应的 AppID
4. **权限配置**：根据功能需求配置相应权限
5. **版本号**：正确配置版本号和版本名称
6. **Canvas 兼容性**：注意不同平台的 Canvas 兼容性
.agents/bak-skills/uniapp-ucharts/examples/integration/navigation.md
+165
View File
@@ -0,0 +1,165 @@
# Navigation
## 导航和路由
在 UniApp 中使用 uCharts 组件进行页面导航和路由管理。
### 使用 UniApp 导航 API
#### 页面跳转
```javascript
// 保留当前页面，跳转到应用内的某个页面
uni.navigateTo({
url: '/pages/chart/chart?type=line'
})
// 关闭当前页面，跳转到应用内的某个页面
uni.redirectTo({
url: '/pages/chart/chart?type=bar'
})
// 返回上一页面
uni.navigateBack({
delta: 1
})
```
#### 使用按钮进行跳转
```vue
<template>
<view>
<button @click="goToChart">查看图表</button>
</view>
</template>
<script>
export default {
methods: {
goToChart() {
uni.navigateTo({
url: '/pages/chart/chart?type=line'
})
}
}
}
</script>
```
### 页面传参
#### 传递参数
```javascript
// 跳转并传递参数
uni.navigateTo({
url: '/pages/chart/chart?type=line&title=折线图'
})
```
#### 接收参数
```vue
<template>
<view>
<qiun-data-charts
:type="chartType"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartType: 'line',
chartData: {},
opts: {}
}
},
onLoad(options) {
this.chartType = options.type || 'line'
this.loadChartData()
},
methods: {
loadChartData() {
// 根据 chartType 加载对应的图表数据
}
}
}
</script>
```
### TabBar 导航
#### 使用原生 TabBar
```json
{
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#409EFF",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/chart/chart",
"text": "图表"
}
]
}
}
```
### 图表页面导航示例
```vue
<template>
<view class="container">
<view class="nav-buttons">
<button @click="goToChart('line')">折线图</button>
<button @click="goToChart('bar')">柱状图</button>
<button @click="goToChart('pie')">饼图</button>
</view>
<qiun-data-charts
:type="chartType"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartType: 'line',
chartData: {},
opts: {}
}
},
methods: {
goToChart(type) {
uni.navigateTo({
url: `/pages/chart/chart?type=${type}`
})
}
}
}
</script>
```
## 注意事项
1. **路径格式**：路径必须以 `/` 开头
2. **参数传递**：URL 参数需要编码
3. **页面栈**：注意页面栈限制（最多 10 层）
4. **数据加载**：跳转后及时加载图表数据
5. **性能优化**：避免频繁跳转导致性能问题
.agents/bak-skills/uniapp-ucharts/examples/integration/pages-config.md
+152
View File
@@ -0,0 +1,152 @@
# Pages Configuration
## pages.json 配置
在 UniApp 项目中，`pages.json` 是页面配置文件，需要正确配置以使用 uCharts。
### 基本配置
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### 图表页面配置
```json
{
"pages": [
{
"path": "pages/chart/chart",
"style": {
"navigationBarTitleText": "图表",
"navigationBarBackgroundColor": "#409EFF",
"navigationBarTextStyle": "white",
"backgroundColor": "#f5f5f5"
}
}
]
}
```
### 下拉刷新配置
如果图表页面需要下拉刷新：
```json
{
"pages": [
{
"path": "pages/chart/chart",
"style": {
"navigationBarTitleText": "图表",
"enablePullDownRefresh": true
}
}
]
}
```
页面中处理下拉刷新：
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
onPullDownRefresh() {
// 刷新图表数据
this.loadChartData()
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
},
methods: {
loadChartData() {
// 加载图表数据
}
}
}
</script>
```
### 完整示例
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/chart/line",
"style": {
"navigationBarTitleText": "折线图"
}
},
{
"path": "pages/chart/bar",
"style": {
"navigationBarTitleText": "柱状图"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
## 注意事项
1. **easycom 配置**：必须在 pages.json 中配置 easycom
2. **路径正确性**：确保组件路径正确
3. **样式配置**：合理配置页面样式
4. **平台差异**：注意不同平台的配置差异
5. **性能优化**：合理配置下拉刷新和上拉加载
.agents/bak-skills/uniapp-ucharts/examples/integration/uni-api.md
+246
View File
@@ -0,0 +1,246 @@
# UniApp API Integration
## UniApp API 与 uCharts 整合
在 UniApp 项目中使用 UniApp API 与 uCharts 组件配合使用。
### 网络请求
#### 使用 uni.request 获取图表数据
```javascript
// 获取图表数据
uni.request({
url: 'https://api.example.com/chart-data',
method: 'GET',
data: {
type: 'line'
},
success: (res) => {
this.chartData = res.data
},
fail: (err) => {
console.error('请求失败', err)
}
})
```
#### 配合 uCharts 使用
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
onLoad() {
this.loadChartData()
},
methods: {
loadChartData() {
uni.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = {
categories: res.data.categories,
series: res.data.series
}
}
})
}
}
}
</script>
```
### 存储 API
#### 缓存图表数据
```javascript
// 保存图表数据
uni.setStorage({
key: 'chartData',
data: this.chartData,
success: () => {
console.log('保存成功')
}
})
// 获取缓存的图表数据
uni.getStorage({
key: 'chartData',
success: (res) => {
this.chartData = res.data
}
})
```
### 页面生命周期
#### 配合 uCharts 使用
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
onLoad() {
// 页面加载时获取数据
this.loadChartData()
},
onShow() {
// 页面显示时刷新数据
this.loadChartData()
},
onPullDownRefresh() {
// 下拉刷新
this.loadChartData()
setTimeout(() => {
uni.stopPullDownRefresh()
}, 1000)
},
methods: {
loadChartData() {
uni.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
}
}
}
</script>
```
### 条件编译
#### 平台特定 API
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
methods: {
loadChartData() {
// #ifdef H5
// H5 平台特定代码
fetch('/api/chart-data')
.then(res => res.json())
.then(data => {
this.chartData = data
})
// #endif
// #ifdef MP-WEIXIN
// 微信小程序特定代码
wx.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
// #endif
// #ifdef APP-PLUS
// App 平台特定代码
plus.net.XMLHttpRequest({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
// #endif
}
}
}
</script>
```
### 动态更新图表
```vue
<template>
<view>
<button @click="updateChart">更新图表</button>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
},
methods: {
updateChart() {
// 更新图表数据
uni.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
}
}
}
</script>
```
## 注意事项
1. **API 兼容性**：注意不同平台 API 的兼容性
2. **数据格式**：确保数据格式符合 uCharts 要求
3. **错误处理**：始终处理 API 调用的错误情况
4. **条件编译**：使用条件编译处理平台差异
5. **性能优化**：合理使用缓存，避免频繁请求
.agents/bak-skills/uniapp-ucharts/examples/platform-specific/app.md
+106
View File
@@ -0,0 +1,106 @@
# App Platform
## App 平台注意事项
在 App 平台（iOS/Android）使用 uCharts 时的特殊注意事项。
### manifest.json 配置
```json
{
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.INTERNET\"/>"
]
},
"ios": {}
}
}
}
```
### Canvas 支持
App 平台支持 Canvas，但 nvue 页面可能有限制。
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15]
}
}
}
}
</script>
```
### 条件编译
使用条件编译处理 App 平台特定逻辑：
```vue
<template>
<view>
<!-- #ifdef APP-PLUS -->
<view>App 平台特有内容</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
methods: {
loadChartData() {
// #ifdef APP-PLUS
// App 平台特定代码
plus.net.XMLHttpRequest({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
// #endif
}
}
}
</script>
```
### 注意事项
1. **Canvas 支持**：App 平台支持 Canvas，但 nvue 可能有限制
2. **权限配置**：根据功能需求配置相应权限
3. **性能优化**：App 平台需要注意性能优化
4. **打包配置**：正确配置打包参数
5. **版本号**：正确配置版本号和版本名称
.agents/bak-skills/uniapp-ucharts/examples/platform-specific/h5.md
+126
View File
@@ -0,0 +1,126 @@
# H5 Platform
## H5 平台注意事项
在 H5 平台使用 uCharts 时的特殊注意事项。
### manifest.json 配置
```json
{
"h5": {
"router": {
"mode": "hash",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
},
"publicPath": "/",
"template": "index.html"
}
}
```
### Canvas 支持
H5 平台完全支持 Canvas，可以使用所有 uCharts 功能。
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70, 110, 130]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false
}
}
}
}
</script>
<style scoped>
.container {
width: 100%;
height: 400px;
}
</style>
```
### 响应式布局
H5 平台可以使用媒体查询：
```vue
<style lang="scss" scoped>
.container {
width: 100%;
/* #ifdef H5 */
@media (min-width: 768px) {
max-width: 1200px;
margin: 0 auto;
}
/* #endif */
}
</style>
```
### 条件编译
使用条件编译处理 H5 平台特定逻辑：
```vue
<template>
<view>
<!-- #ifdef H5 -->
<view>H5 平台特有内容</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
methods: {
loadChartData() {
// #ifdef H5
// H5 平台特定代码
fetch('/api/chart-data')
.then(res => res.json())
.then(data => {
this.chartData = data
})
// #endif
}
}
}
</script>
```
### 注意事项
1. **Canvas 支持**：H5 平台完全支持 Canvas
2. **性能优化**：H5 平台可以使用更多 Web API 优化性能
3. **响应式设计**：可以使用媒体查询实现响应式布局
4. **调试工具**：可以使用浏览器开发者工具调试
5. **兼容性**：注意不同浏览器的兼容性
.agents/bak-skills/uniapp-ucharts/examples/platform-specific/miniprogram.md
+140
View File
@@ -0,0 +1,140 @@
# Mini-Program Platform
## 小程序平台注意事项
在微信小程序等小程序平台使用 uCharts 时的特殊注意事项。
### manifest.json 配置
```json
{
"mp-weixin": {
"appid": "your-appid",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true
}
}
```
### Canvas 支持
小程序平台支持 Canvas，但需要注意性能限制。
```vue
<template>
<view class="container">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false
}
}
}
}
</script>
<style scoped>
.container {
width: 100%;
height: 400rpx;
}
</style>
```
### 条件编译
使用条件编译处理小程序平台特定逻辑：
```vue
<template>
<view>
<!-- #ifdef MP-WEIXIN -->
<view>微信小程序特有内容</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
methods: {
loadChartData() {
// #ifdef MP-WEIXIN
// 微信小程序特定代码
wx.request({
url: 'https://api.example.com/chart-data',
success: (res) => {
this.chartData = res.data
}
})
// #endif
}
}
}
</script>
```
### 性能优化
小程序平台需要注意性能：
```vue
<template>
<view>
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
:canvas-id="canvasId"
/>
</view>
</template>
<script>
export default {
data() {
return {
canvasId: 'chart-canvas',
chartData: {},
opts: {
// 优化配置
enableScroll: false,
dataLabel: false
}
}
}
}
</script>
```
### 注意事项
1. **Canvas 性能**：小程序平台 Canvas 性能有限，注意优化
2. **数据量**：避免过大的数据量
3. **代码包大小**：注意小程序代码包大小限制
4. **AppID 配置**：必须在 manifest.json 中配置正确的 AppID
5. **URL 检查**：开发时可以关闭 urlCheck
.agents/bak-skills/uniapp-ucharts/examples/platform-specific/nvue.md
+91
View File
@@ -0,0 +1,91 @@
# nvue Platform
## nvue 平台注意事项
在 nvue 页面使用 uCharts 时的特殊注意事项。
### manifest.json 配置
```json
{
"app-plus": {
"nvueStyleCompiler": "uni-app",
"nvue": {
"flex-direction": "column"
}
}
}
```
### Canvas 限制
nvue 平台对 Canvas 的支持可能有限，需要注意：
```vue
<template>
<view class="container">
<!-- #ifndef APP-PLUS-NVUE -->
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
<!-- #endif -->
<!-- #ifdef APP-PLUS-NVUE -->
<view class="nvue-tip">nvue 平台可能不支持 Canvas 图表</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {
chartData: {},
opts: {}
}
}
}
</script>
<style scoped>
.container {
flex-direction: column;
padding: 20rpx;
}
.nvue-tip {
padding: 20rpx;
text-align: center;
color: #909399;
}
</style>
```
### 样式限制
nvue 平台样式有限制：
```vue
<style lang="scss" scoped>
.container {
/* nvue 支持的样式 */
flex-direction: column;
padding: 20rpx;
/* nvue 不支持的样式需要条件编译 */
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
}
</style>
```
### 注意事项
1. **Canvas 限制**：nvue 平台对 Canvas 的支持可能有限
2. **样式限制**：nvue 不支持所有 CSS 属性
3. **条件编译**：使用条件编译处理兼容性问题
4. **性能**：nvue 性能更好，但功能有限
5. **替代方案**：考虑使用其他图表方案或条件编译
.agents/bak-skills/uniapp-ucharts/templates/basic-uniapp-project.md
+206
View File
@@ -0,0 +1,206 @@
# Basic UniApp Project Template
## 基础 UniApp 项目模板
这是一个基础的 UniApp + uCharts 项目模板。
### 项目结构
```
uniapp-ucharts-project/
├── uni_modules/
│ └── qiun-data-charts/ # uCharts 插件
├── pages/
│ ├── index/
│ │ └── index.vue
│ └── ...
├── static/ # 静态资源
├── App.vue # 应用入口
├── main.js # 主入口文件
├── pages.json # 页面配置
├── manifest.json # 应用配置
└── uni.scss # 全局样式变量
```
### App.vue
```vue
<template>
<view id="app">
<!-- 应用根组件 -->
</view>
</template>
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
<style lang="scss">
/* 全局样式 */
page {
background-color: #f5f5f5;
}
</style>
```
### main.js
```javascript
import App from './App'
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
return {
app
}
}
// #endif
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
```
### pages.json
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
}
}
```
### uni.scss
```scss
/* uni.scss */
/* 自定义全局变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;
```
### manifest.json
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true
},
"h5": {
"router": {
"mode": "hash"
}
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false
},
"usingComponents": true
}
}
```
### pages/index/index.vue
```vue
<template>
<view class="container">
<view class="chart-wrapper">
<qiun-data-charts
type="line"
:opts="opts"
:chartData="chartData"
/>
</view>
</view>
</template>
<script>
export default {
data() {
return {
chartData: {
categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
series: [{
name: '数据',
data: [120, 200, 150, 80, 70, 110, 130]
}]
},
opts: {
color: ['#409EFF'],
padding: [15, 15, 0, 15],
enableScroll: false,
legend: {
show: false
},
xAxis: {
disableGrid: true
},
yAxis: {
gridType: 'dash',
dashLength: 2
}
}
}
}
}
</script>
<style lang="scss" scoped>
.container {
min-height: 100vh;
background-color: #f5f5f5;
padding: 20rpx;
}
.chart-wrapper {
width: 100%;
height: 400px;
background-color: #ffffff;
border-radius: 8rpx;
padding: 20rpx;
}
</style>
```
.agents/bak-skills/uniapp-ucharts/templates/manifest-template.md
+86
View File
@@ -0,0 +1,86 @@
# Manifest Configuration Template
## manifest.json 配置模板
UniApp + uCharts 项目的 manifest.json 配置模板。
### 完整模板
```json
{
"name": "uniapp-ucharts-project",
"appid": "",
"description": "UniApp + uCharts 项目",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false,
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.INTERNET\"/>"
]
},
"ios": {}
}
},
"h5": {
"router": {
"mode": "hash",
"base": "/"
},
"devServer": {
"https": false,
"port": 8080
},
"publicPath": "/",
"template": "index.html"
},
"mp-weixin": {
"appid": "",
"setting": {
"urlCheck": false,
"es6": true,
"enhance": true,
"postcss": true,
"minified": true
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
},
"mp-alipay": {
"usingComponents": true
},
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao": {
"usingComponents": true
},
"mp-qq": {
"usingComponents": true
},
"quickapp": {},
"vueVersion": "2"
}
```
### 使用说明
1. **appid**：小程序平台需要配置对应的 AppID
2. **usingComponents**：所有平台都需要设置为 true
3. **transformPx**：建议设置为 false，使用 rpx
4. **vueVersion**：指定 Vue 版本（2 或 3）
5. **平台配置**：根据目标平台配置相应参数
.agents/bak-skills/uniapp-ucharts/templates/pages-template.md
+74
View File
@@ -0,0 +1,74 @@
# Pages Configuration Template
## pages.json 配置模板
UniApp + uCharts 项目的 pages.json 配置模板。
### 完整模板
```json
{
"easycom": {
"autoscan": true,
"custom": {
"qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
}
},
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#409EFF",
"navigationBarTextStyle": "white"
}
},
{
"path": "pages/chart/line",
"style": {
"navigationBarTitleText": "折线图",
"enablePullDownRefresh": true
}
},
{
"path": "pages/chart/bar",
"style": {
"navigationBarTitleText": "柱状图"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "UniApp",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#f5f5f5"
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#409EFF",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png"
},
{
"pagePath": "pages/chart/chart",
"text": "图表",
"iconPath": "static/tab-chart.png",
"selectedIconPath": "static/tab-chart-current.png"
}
]
}
}
```
### 使用说明
1. **easycom 配置**：必须配置，用于自动引入 uCharts 组件
2. **pages 配置**：配置所有页面路径和样式
3. **globalStyle**：配置全局样式
4. **tabBar**：配置底部导航栏（可选）