uniapp数据分析图怎么画qiun-data-charts图表组件

qiun-data-charts 是一个专门为 uni-app 开发的图表组件，至于我为什么要出这篇文章，是因为我去网上搜索的时候想用qiun-data-charts去画数据分析图，但是却很少有说qiun-data-charts的，大多是echarts,ucharts

基础数据格式：

无论是折线图还是柱状图，数据格式都是统一的：

chartData: {
  categories: ["1月", "2月", "3月", "4月", "5月"],  // X轴分类
  series: [  // 数据系列（可以多条线/柱）
    {
      name: "系列名称",  // 图例名称
      data: [数值1, 数值2, 数值3, ...]  // 对应的数据
    }
  ]
}

折线图实现

基础

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="line"  // 关键：设置为line
      :chartData="lineData"
      :ontouch="true"  // 开启触摸交互
      background="none"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      lineData: {
        categories: ["1月", "2月", "3月", "4月", "5月", "6月"],
        series: [
          {
            name: "充电量",
            data: [35, 20, 45, 60, 50, 80]
          }
        ]
      }
    }
  }
}
</script>

<style>
.charts-box {
  width: 100%;
  height: 400rpx;  // 必须设置宽高
}
</style>

多条折线对比：

lineData: {
  categories: ["1月", "2月", "3月", "4月", "5月", "6月"],
  series: [
    {
      name: "充电站A",
      data: [35, 20, 45, 60, 50, 80]
    },
    {
      name: "充电站B", 
      data: [28, 35, 40, 55, 70, 65]
    },
    {
      name: "充电站C",
      data: [45, 30, 50, 65, 55, 90]
    }
  ]
}

带滚动条的折线图（数据过多时）

<qiun-data-charts 
  type="line"
  :chartData="lineData"
  :opts="{
    enableScroll: true,  // 开启滚动
    xAxis: {
      scrollShow: true,  // 显示滚动条
      itemCount: 5,      // 一屏显示多少个X轴标签
      disableGrid: true
    }
  }"
/>

柱状图实现

基础柱状图

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="column"  // 关键：设置为column
      :chartData="columnData"
      :ontouch="true"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      columnData: {
        categories: ["充电站A", "充电站B", "充电站C", "充电站D"],
        series: [
          {
            name: "充电量(度)",
            data: [1200, 850, 2100, 1600]
          }
        ]
      }
    }
  }
}
</script>

分组柱状图（多组对比）

columnData: {
  categories: ["1月", "2月", "3月", "4月"],
  series: [
    {
      name: "充电量",
      data: [1200, 1350, 1100, 1800]
    },
    {
      name: "收益",
      data: [2400, 2700, 2200, 3600]
    }
  ]
}

自定义样式柱状图

<qiun-data-charts 
  type="column"
  :chartData="columnData"
  :opts="{
    color: ['#15c38e', '#FFAD49'],  // 自定义颜色
    padding: [25, 15, 20, 5],
    xAxis: {
      disableGrid: true,
      fontSize: 12
    },
    yAxis: {
      gridType: 'dash',  // 虚线网格
      dashLength: 2
    },
    extra: {
      column: {
        type: 'group',  // 分组显示
        width: 40,      // 柱状宽度
        borderRadius: 4 // 圆角
      }
    }
  }"
/>

如果想调用接口：

动态数据更新

从接口获取数据

export default {
  data() {
    return {
      chartData: {
        categories: [],
        series: [{
          name: "充电量",
          data: []
        }]
      }
    }
  },
  methods: {
    async fetchData() {
      // 调用接口获取数据
      const res = await this.$u.api.getChartData()
      
      // 处理返回的数据
      this.chartData = {
        categories: res.data.map(item => item.date),  // 提取X轴
        series: [{
          name: "充电量",
          data: res.data.map(item => item.value)      // 提取数据
        }]
      }
      // 注意：数据更新后，图表会自动重新渲染
    }
  },
  onShow() {
    this.fetchData()
  }
}

完整示例：充电站数据看板

<template>
  <view>
    <!-- 折线图：充电趋势 -->
    <view class="chart-card">
      <view class="chart-title">近7天充电趋势</view>
      <qiun-data-charts 
        type="line"
        :chartData="trendData"
        :opts="lineOpts"
      />
    </view>
    
    <!-- 柱状图：充电站排行 -->
    <view class="chart-card">
      <view class="chart-title">充电站充电量排行</view>
      <qiun-data-charts 
        type="column"
        :chartData="rankData"
        :opts="columnOpts"
      />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      trendData: {
        categories: ["05-01", "05-02", "05-03", "05-04", "05-05", "05-06", "05-07"],
        series: [{
          name: "充电量(度)",
          data: [320, 450, 380, 520, 490, 680, 750]
        }]
      },
      rankData: {
        categories: ["充电站A", "充电站B", "充电站C", "充电站D", "充电站E"],
        series: [{
          name: "充电量(度)",
          data: [1250, 980, 1560, 720, 1890]
        }]
      },
      lineOpts: {
        color: ["#15c38e"],
        extra: {
          line: {
            width: 3,
            smooth: true  // 平滑曲线
          }
        }
      },
      columnOpts: {
        color: ["#FFAD49"],
        extra: {
          column: {
            width: 30,
            borderRadius: 4
          }
        }
      }
    }
  }
}
</script>

<style>
.chart-card {
  background: #fff;
  margin: 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.chart-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  padding-left: 20rpx;
  border-left: 8rpx solid #15c38e;
}
</style>

• "line" → 折线图
• "column" → 柱状图
• "pie" → 饼图
• "area" → 面积图