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

4.3 KiB Raw Blame History