v-charts 柱状图组件使用详解

原创于 2025-06-06 09:06:08 发布 · 325 阅读

8 ·

CC 4.0 BY-SA版权

v-charts 柱状图组件使用详解

v-charts 基于 Vue2.0 和 ECharts 封装的图表组件📈📊 项目地址: https://gitcode.com/gh_mirrors/vc/v-charts

一、v-charts 柱状图简介

v-charts 是基于 Vue 和 ECharts 封装的图表组件库，其中的柱状图组件(ve-histogram)提供了简单易用的数据可视化解决方案。柱状图是最常用的图表类型之一，适合展示不同类别数据之间的对比关系。

二、基础柱状图实现

1. 基本使用

实现一个基础柱状图非常简单，只需要准备数据并通过 ve-histogram 组件渲染即可：

<template>
  <ve-histogram :data="chartData"></ve-histogram>
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        columns: ['日期', '访问用户', '下单用户'],
        rows: [
          { '日期': '1/1', '访问用户': 1393, '下单用户': 1093 },
          { '日期': '1/2', '访问用户': 3530, '下单用户': 3230 }
        ]
      }
    }
  }
}
</script>

2. 数据结构说明

columns: 定义数据维度，第一个元素通常为横轴维度(如日期)，后续元素为指标(如访问用户数)
rows: 实际数据数组，每个对象对应一条数据记录

三、进阶配置

1. 指标维度控制

通过 settings 属性可以精确控制显示的指标和维度：

this.chartSettings = {
  metrics: ['访问用户', '下单用户'],  // 指定显示的指标
  dimension: ['日期']               // 指定维度
}

2. 双Y轴配置

当不同指标数值差异较大时，可以配置双Y轴：

this.chartSettings = {
  axisSite: { right: ['下单率'] },  // 下单率显示在右轴
  yAxisType: ['KMB', 'percent'],   // 左轴使用千分位，右轴使用百分比
  yAxisName: ['数值', '比率']       // 轴标题
}

3. 混合图表（柱状图+折线图）

this.chartSettings = {
  showLine: ['下单用户']  // 将下单用户显示为折线
}

4. 堆叠柱状图

this.chartSettings = {
  stack: { '用户': ['访问用户', '下单用户'] }  // 将两个指标堆叠显示
}

四、样式与交互配置

1. 显示数据标签

this.extend = {
  series: {
    label: { show: true, position: "top" }  // 在柱子上方显示数值
  }
}

2. 修改显示名称

this.chartSettings = {
  labelMap: { 'PV': '访问用户' },          // 修改提示框和图例中的名称
  legendName: { '访问用户': '访问用户总量' } // 修改图例显示名称
}

3. 数值轴配置

当横轴为连续数值时：

this.chartSettings = {
  xAxisType: 'value'  // 设置为数值轴
}

五、配置项详解

| 配置项 | 说明 | 类型 | 备注 | |--------|------|------|------| | dimension | 维度字段 | Array | 默认取columns第一项 | | metrics | 指标字段 | Array | 默认取columns剩余项 | | yAxisType | 坐标轴数据类型 | Array | 支持KMB(千分位)、percent(百分比)等 | | stack | 堆叠配置 | Object | 定义哪些指标需要堆叠 | | showLine | 显示为折线的指标 | Array | 实现混合图表效果 | | xAxisType | 横轴类型 | String | 'category'(分类)或'value'(数值) | | min/max | 坐标轴范围 | Array | 可设置固定值或'dataMin'/'dataMax' |