mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -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. **性能测试**：在不同平台测试性能
|
||||
@@ -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. **测试验证**：在不同平台测试主题效果
|
||||
@@ -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. **文档记录**：记录平台差异和注意事项
|
||||
@@ -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 不会影响性能，按需加载组件
|
||||
@@ -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
|
||||
@@ -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. **性能优化**：注意图表性能，避免过多图表
|
||||
@@ -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 兼容性
|
||||
@@ -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. **性能优化**：避免频繁跳转导致性能问题
|
||||
@@ -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. **性能优化**：合理配置下拉刷新和上拉加载
|
||||
@@ -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. **性能优化**：合理使用缓存，避免频繁请求
|
||||
@@ -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. **版本号**：正确配置版本号和版本名称
|
||||
@@ -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. **兼容性**：注意不同浏览器的兼容性
|
||||
@@ -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
|
||||
@@ -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. **替代方案**：考虑使用其他图表方案或条件编译
|
||||
Reference in New Issue
Block a user