柱状图/条形图

[配置项]

简介

柱状图是一种以长方形的长度为变量的统计图表。柱状图用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。

条形图是在柱状图的基础上，做了 x 轴和 y 轴的转置，在配置上和柱状图基本一致，只是 x 轴和 y 轴的配置需要对调，同时需要加上 direction 属性配置为 'horizontal'。

图表构成

柱状图由矩形图元、坐标轴及其他组件构成。

矩形图元为柱状图/条形图的基本要素，相关的绘制配置必不可少:

barChart.type: 图表类型，柱状体 / 条形图的类型为'bar'
barChart.data: 图表绘制的数据源
barChart.xField: 分类字段，映射图元的 x 坐标 / 宽度
barChart.yField: 数值字段，映射图元的高度 / y 坐标

坐标轴、提示信息等作为辅助图表展示的组件，属于可选配置，自带默认效果和功能:

barChart.axes: 坐标轴组件，默认显示并根据图表类型自动推断坐标系及数据映射逻辑，详情配置见VChart 坐标轴组件配置
barChart.tooltip: 提示信息，默认交互时显示，详细配置见VChart 提示信息组件配置
更多组件配置见VChart barChart 配置

快速上手

关键配置

direction 属性配置为 'horizontal'
xField 属性声明为数值字段
yField 属性声明为分类字段

柱状图/条形图特性

数据

数据结构

一个离散 字段，如: product
一个数值字段，如: sales

一组产品类别和销售额的数据定义如下：

data: [
  {
    name: 'bar',
    values: [
      {
        product: '数码产品',
        sales: 20
      },
      {
        product: '日用品',
        sales: 50
      },
      {
        product: '食品',
        sales: 80
      }
    ]
  }
];

数据正负值场景

在真实场景中，数据中通常会同时出现正数、负数，比如销量、营业额同上周的差异值。在这种场景下，我们需要通过坐标轴的零点进行正负数的区分。在 VChart 中，您无需针对这种数据场景做任何处理，坐标轴会根据数据范围做自适应处理，以最佳方式呈现。

图表布局

条形图

direction 属性配置为 'horizontal'即可得到一张条形图。

分组柱状图

分组柱状图可以看做不同的基础柱系列以间隔排列的方式组合在一起，每组柱系列代表一个类别。例如，您可以将一组产品拆分为不同的子类别，如颜色、大小、风格等。每个子类别都用不同的颜色表示，使用户能够更直观地比较数值的大小和差异。在 VChart 中，需要在xField中追加字段（此时xField以数组形式存在），该字段用于区分数据类别，即对同一维度的柱子进行拆分，拆分成若干组以间隔排列的方式展开。并且为了区分同一维度下间隔排列的柱子，需要指定barChart.seriedField字段，该字段默认映射柱子颜色。

堆叠柱状图

堆叠柱状图可以看做不同的基础柱系列以堆叠的方式组合在一起，每组柱系列代表一个类别。不同于分组柱状图，堆叠柱状图的优点是：不仅能展现同一维度下不同类别的数据差异，还能展现同一维度下不同类别的总和差异；缺点则是当类别过多且数值较小时，柱形的高度差异难以从视觉层面辨认。
在 VChart 中，如果需要展示堆叠柱状图，需要配置barChart.stack: true, 并且为了区分同一维度下堆叠在一起的柱子，需要指定barChart.seriedField字段，该字段默认映射柱子颜色。

百分比堆叠柱状图

在上节中我们提到堆叠柱状图的缺点是当类别过多且数值过小时，同一维度下的柱形高度差异难以辨认。针对这种场景，我们可以声明百分比堆叠柱状图，它可以帮助我们得到同一维度下归一化后的数值所映射的高度，帮助我们更好的辨别差异。
在 VChart 中，如果需要展示堆叠柱状图，需要配置barChart.stack: true 和 barChart.percent: true ，并且为了区分同一维度下堆叠在一起的柱子，需要指定barChart.seriedField字段，该字段默认映射柱子颜色。

图元及样式

线性渐变

通过 barChart.bar.style.fill: { gradient: 'linear' } 配置渐变颜色，可以得到渐变柱的效果。