图表组件

项目使用 qiun-data-charts（基于 uCharts）实现数据可视化，组件已内置在 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",
    },
  },
})

数据更新

更新时需深拷贝触发重新渲染：

chartData.value = JSON.parse(JSON.stringify(newData))

参考资源

• uCharts 官方文档
• DCloud 插件市场