图表组件

项目使用 qiun-data-charts（基于 uCharts）实现数据可视化，支持微信小程序、H5、App 全平台。

安装

前往 DCloud 插件市场，点击「使用 HBuilderX 导入插件」，组件会自动放入 src/components/qiun-data-charts/。

基本使用

组件通过 easycom 自动注册，无需手动引入：

<template>
  <view class="chart-container">
    <qiun-data-charts type="area" :chartData="chartData" :opts="chartOpts" />
  </view>
</template>

必须指定容器尺寸，否则无法渲染：

.chart-container {
  width: 100%;
  height: 300px;  // 不能省略
}

数据格式

interface ChartData {
  categories: string[]    // X 轴标签
  series: SeriesItem[]    // 系列数据
}

interface SeriesItem {
  name: string            // 系列名称
  data: number[]          // 数据数组
}

饼图/环形图数据格式不同，series 中每项是 { name, data } 单个数值而非数组。

图表类型

类型	type 值	适用场景
折线图	line	数据趋势
面积图	area	趋势 + 量级
柱状图	column	类别对比
饼图	pie	占比分布
环形图	ring	占比分布（带中心空洞）
雷达图	radar	多维度对比

配置示例

面积图（项目首页使用）

const chartOpts = ref({
  padding: [20, 0, 20, 0],
  xAxis: {
    fontSize: 10,
    rotateLabel: true,
    rotateAngle: 30,
  },
  yAxis: {
    disabled: true,
  },
  extra: {
    area: {
      type: "curve",       // 曲线
      opacity: 0.2,        // 填充透明度
      addLine: true,       // 显示折线
      width: 2,
      gradient: true,      // 渐变填充
      activeType: "hollow",
    },
  },
})

柱状图

const columnOpts = {
  extra: {
    column: {
      width: 20,
      barBorderRadius: [4, 4, 0, 0],
      seriesGap: 2,
      categoryGap: 4,
    },
  },
}

数据更新

图表数据更新时需要深拷贝，确保触发重新渲染：

// ✅ 深拷贝触发更新
chartData.value = JSON.parse(JSON.stringify(newData))

// ❌ 直接修改可能不更新
chartData.value.categories = newCategories

参考资源

• uCharts 官方文档
• DCloud 插件市场 — 一键导入
• GitHub / Gitee 源码
• B站入门教程