Uniapp Ucharts

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: 部署上线

完成开发后进行部署和监控。

Configuration API

配置 API

UniApp + uCharts 项目的配置文件 API 参考。

pages.json 配置

easycom 配置

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
    }
  }
}

pages 配置

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "default" | "custom",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black" | "white",
        "backgroundColor": "#f5f5f5",
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 50
      }
    }
  ]
}

globalStyle 配置

{
  "globalStyle": {
    "navigationBarTextStyle": "black" | "white",
    "navigationBarTitleText": "UniApp",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#f5f5f5"
  }
}

manifest.json 配置

基本配置

{
  "name": "uniapp-ucharts-project",
  "appid": "",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false
}

H5 配置

{
  "h5": {
    "router": {
      "mode": "hash" | "history",
      "base": "/"
    },
    "devServer": {
      "https": false,
      "port": 8080
    }
  }
}

微信小程序配置

{
  "mp-weixin": {
    "appid": "your-appid",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "enhance": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true
  }
}

App 配置

{
  "app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "distribute": {
      "android": {
        "permissions": []
      },
      "ios": {}
    }
  }
}

uni.scss 配置

/* uni.scss */
/* 自定义变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;

App.vue 配置

<style lang="scss">
/* 全局样式 */
page {
  background-color: #f5f5f5;
}
</style>

main.js 配置

Vue 2

import App from './App'

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()

Vue 3

import { createSSRApp } from 'vue'
import App from './App'

export function createApp() {
  const app = createSSRApp(App)
  return { app }
}

Integration API

UniApp 与 uCharts 整合 API

UniApp 与 uCharts 整合使用的 API 参考。

easycom 配置 API

{
  "easycom": {
    "autoscan": boolean,
    "custom": {
      "qiun-data-charts": "string"
    }
  }
}

pages.json API

{
  "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

{
  "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

// 页面跳转
uni.navigateTo({
  url: 'string',
  success: function,
  fail: function,
  complete: function
})

// 页面返回
uni.navigateBack({
  delta: number
})

网络请求 API

uni.request({
  url: 'string',
  method: 'GET' | 'POST' | 'PUT' | 'DELETE',
  data: object,
  header: object,
  success: function,
  fail: function,
  complete: function
})

存储 API

// 存储数据
uni.setStorage({
  key: 'string',
  data: any,
  success: function,
  fail: function
})

// 获取数据
uni.getStorage({
  key: 'string',
  success: function,
  fail: function
})

条件编译 API

// #ifdef 平台名称
// 平台特定代码
// #endif

// #ifndef 平台名称
// 非平台特定代码
// #endif

// #ifdef H5
// H5 平台代码
// #endif

// #ifdef MP-WEIXIN
// 微信小程序代码
// #endif

// #ifdef APP-PLUS
// App 平台代码
// #endif

Build Optimization

构建优化

优化 UniApp + uCharts 项目的构建和性能。

代码分割

使用条件编译减少代码体积：

<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 会自动引入，但可以优化：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.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 中配置打包选项：

{
  "mp-weixin": {
    "setting": {
      "minified": true,
      "postcss": true
    }
  },
  "h5": {
    "optimization": {
      "treeShaking": {
        "enable": true
      }
    }
  }
}

注意事项

1. 条件编译：使用条件编译减少代码体积 2. 数据优化：合理控制数据量，避免过大 3. 配置优化：合理配置图表选项，提高性能 4. 打包配置：正确配置打包选项 5. 性能测试：在不同平台测试性能

Custom Theme

自定义主题

在 UniApp 项目中自定义 uCharts 主题。

配置主题颜色

在图表配置中设置主题颜色：

<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 中定义主题变量：

/* uni.scss */
$chart-primary-color: #409EFF;
$chart-success-color: #67C23A;
$chart-warning-color: #E6A23C;
$chart-error-color: #F56C6C;

在组件中使用：

<script>
export default {
  data() {
    return {
      opts: {
        color: [
          '#409EFF', // 使用主题变量
          '#67C23A',
          '#E6A23C',
          '#F56C6C'
        ]
      }
    }
  }
}
</script>

条件编译主题

不同平台可以使用不同主题：

<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. 测试验证：在不同平台测试主题效果

Multi-Platform Deployment

多平台部署

UniApp + uCharts 项目支持多平台部署的策略和注意事项。

平台差异处理

使用条件编译处理平台差异：

<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 调用：

// 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 中配置各平台：

{
  "h5": {
    "router": {
      "mode": "hash"
    }
  },
  "mp-weixin": {
    "appid": "your-appid"
  },
  "app-plus": {
    "usingComponents": true
  }
}

注意事项

1. 条件编译：使用条件编译处理平台差异 2. API 统一：封装统一的 API 调用 3. 配置管理：正确配置各平台参数 4. 测试验证：在各平台测试功能 5. 文档记录：记录平台差异和注意事项

Easycom Configuration

Easycom 配置

easycom 是 UniApp 的自动引入机制，配置后可以自动引入 uCharts 组件，无需手动 import。

基本配置

在 pages.json 中配置 easycom：

{
  "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：组件路径

使用示例

配置后，可以直接使用组件，无需引入：

<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 示例

{
  "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 安装

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "qiun-data-charts": "@/node_modules/@qiun/ucharts/components/qiun-data-charts/qiun-data-charts.vue"
    }
  }
}

uni_modules 安装

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
    }
  }
}

禁用 easycom

如果不想使用 easycom，可以手动引入：

<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 是否生效：

<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 不会影响性能，按需加载组件

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

# 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

# Install uCharts package
npm install @qiun/ucharts

# Or using yarn
yarn add @qiun/ucharts

Import in Component:

// pages/chart/chart.vue
import uCharts from '@qiun/ucharts'

export default {
  onReady() {
    // Use uCharts here
  }
}

Example: Manual Installation

# 1. Download from DCloud plugin marketplace
# 2. Extract to project root
# 3. Ensure uni_modules/qiun-data-charts/ exists

UniApp 项目配置

1. 引入 uCharts

在页面中引入 uCharts 组件：

<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，实现组件自动引入：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "qiun-data-charts": "@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue"
    }
  },
  "pages": [
    // ... 页面配置
  ]
}

3. 验证安装

创建测试页面验证安装是否成功：

<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

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

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 配置

<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 配置

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 配置

{
  "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 配置

/* uni.scss */
/* 自定义全局变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;

manifest.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 → 编译器
• 确保启用相关编译选项

条件编译

使用条件编译处理平台差异：

<template>
  <view>
    <!-- #ifdef H5 -->
    <view>H5 平台特有内容</view>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <view>微信小程序特有内容</view>
    <!-- #endif -->
    
    <!-- #ifdef APP-PLUS -->
    <view>App 平台特有内容</view>
    <!-- #endif -->
  </view>
</template>

验证配置

创建测试页面验证配置是否正确：

<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. 性能优化：注意图表性能，避免过多图表

Manifest Configuration

manifest.json 配置

manifest.json 是 UniApp 的应用配置文件，需要正确配置以支持 uCharts 在不同平台运行。

基本配置

{
  "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 平台配置

{
  "h5": {
    "router": {
      "mode": "hash",
      "base": "/"
    },
    "devServer": {
      "https": false,
      "port": 8080
    },
    "publicPath": "/",
    "template": "index.html"
  }
}

微信小程序配置

{
  "mp-weixin": {
    "appid": "your-appid",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "enhance": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true,
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    }
  }
}

App 平台配置

{
  "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": {}
    }
  }
}

完整配置示例

{
  "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 兼容性

Navigation

导航和路由

在 UniApp 中使用 uCharts 组件进行页面导航和路由管理。

使用 UniApp 导航 API

页面跳转

// 保留当前页面，跳转到应用内的某个页面
uni.navigateTo({
  url: '/pages/chart/chart?type=line'
})

// 关闭当前页面，跳转到应用内的某个页面
uni.redirectTo({
  url: '/pages/chart/chart?type=bar'
})

// 返回上一页面
uni.navigateBack({
  delta: 1
})

使用按钮进行跳转

<template>
  <view>
    <button @click="goToChart">查看图表</button>
  </view>
</template>

<script>
export default {
  methods: {
    goToChart() {
      uni.navigateTo({
        url: '/pages/chart/chart?type=line'
      })
    }
  }
}
</script>

页面传参

传递参数

// 跳转并传递参数
uni.navigateTo({
  url: '/pages/chart/chart?type=line&title=折线图'
})

接收参数

<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

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#409EFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/chart/chart",
        "text": "图表"
      }
    ]
  }
}

图表页面导航示例

<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. 性能优化：避免频繁跳转导致性能问题

Pages Configuration

pages.json 配置

在 UniApp 项目中，pages.json 是页面配置文件，需要正确配置以使用 uCharts。

基本配置

{
  "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"
  }
}

图表页面配置

{
  "pages": [
    {
      "path": "pages/chart/chart",
      "style": {
        "navigationBarTitleText": "图表",
        "navigationBarBackgroundColor": "#409EFF",
        "navigationBarTextStyle": "white",
        "backgroundColor": "#f5f5f5"
      }
    }
  ]
}

下拉刷新配置

如果图表页面需要下拉刷新：

{
  "pages": [
    {
      "path": "pages/chart/chart",
      "style": {
        "navigationBarTitleText": "图表",
        "enablePullDownRefresh": true
      }
    }
  ]
}

页面中处理下拉刷新：

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

完整示例

{
  "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. 性能优化：合理配置下拉刷新和上拉加载

UniApp API Integration

UniApp API 与 uCharts 整合

在 UniApp 项目中使用 UniApp API 与 uCharts 组件配合使用。

网络请求

使用 uni.request 获取图表数据

// 获取图表数据
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 使用

<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

缓存图表数据

// 保存图表数据
uni.setStorage({
  key: 'chartData',
  data: this.chartData,
  success: () => {
    console.log('保存成功')
  }
})

// 获取缓存的图表数据
uni.getStorage({
  key: 'chartData',
  success: (res) => {
    this.chartData = res.data
  }
})

页面生命周期

配合 uCharts 使用

<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

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

动态更新图表

<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. 性能优化：合理使用缓存，避免频繁请求

App Platform

App 平台注意事项

在 App 平台（iOS/Android）使用 uCharts 时的特殊注意事项。

manifest.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 页面可能有限制。

<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 平台特定逻辑：

<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. 版本号：正确配置版本号和版本名称

H5 Platform

H5 平台注意事项

在 H5 平台使用 uCharts 时的特殊注意事项。

manifest.json 配置

{
  "h5": {
    "router": {
      "mode": "hash",
      "base": "/"
    },
    "devServer": {
      "https": false,
      "port": 8080
    },
    "publicPath": "/",
    "template": "index.html"
  }
}

Canvas 支持

H5 平台完全支持 Canvas，可以使用所有 uCharts 功能。

<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 平台可以使用媒体查询：

<style lang="scss" scoped>
.container {
  width: 100%;
  
  /* #ifdef H5 */
  @media (min-width: 768px) {
    max-width: 1200px;
    margin: 0 auto;
  }
  /* #endif */
}
</style>

条件编译

使用条件编译处理 H5 平台特定逻辑：

<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. 兼容性：注意不同浏览器的兼容性

Mini-Program Platform

小程序平台注意事项

在微信小程序等小程序平台使用 uCharts 时的特殊注意事项。

manifest.json 配置

{
  "mp-weixin": {
    "appid": "your-appid",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "enhance": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true
  }
}

Canvas 支持

小程序平台支持 Canvas，但需要注意性能限制。

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

条件编译

使用条件编译处理小程序平台特定逻辑：

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

性能优化

小程序平台需要注意性能：

<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

nvue Platform

nvue 平台注意事项

在 nvue 页面使用 uCharts 时的特殊注意事项。

manifest.json 配置

{
  "app-plus": {
    "nvueStyleCompiler": "uni-app",
    "nvue": {
      "flex-direction": "column"
    }
  }
}

Canvas 限制

nvue 平台对 Canvas 的支持可能有限，需要注意：

<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 平台样式有限制：

<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. 替代方案：考虑使用其他图表方案或条件编译

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

<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

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

{
  "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

/* uni.scss */
/* 自定义全局变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;

manifest.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

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

Manifest Configuration Template

manifest.json 配置模板

UniApp + uCharts 项目的 manifest.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. 平台配置：根据目标平台配置相应参数

Pages Configuration Template

pages.json 配置模板

UniApp + uCharts 项目的 pages.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：配置底部导航栏（可选）