series[i] ({type: ‘bar’, …})

将series子元素的type属性配置为bar，即可使用柱状图。

show

  1. /**
  2.  * @description 是否显示该柱状图
  3.  * @type {Boolean}
  4.  * @default show = true
  5.  */

name

  1. /**
  2.  * @description 图例标签名
  3.  * @type {String}
  4.  * @default name = ''
  5.  */

stack

  1. /**
  2.  * @description 数据堆叠
  3.  * 相同stack的series元素的data值将被叠加（后边的值将被叠加在前边的值上）
  4.  * @type {String}
  5.  * @default name = ''
  6.  */

shapeType

  1. /**
  2.  * @description 柱类型
  3.  * @type {String}
  4.  * @default shapeType = 'normal'
  5.  * @example shapeType = 'normal' | 'leftEchelon' | 'rightEchelon'
  6.  */

echelonOffset

  1. /**
  2.  * @description 梯形柱锐利偏移
  3.  * @type {Number}
  4.  * @default echelonOffset = 10
  5.  */

barWidth

  1. /**
  2.  * @description 柱宽度
  3.  * 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效
  4.  * 并且是对此坐标系中所有 'bar' 系列生效
  5.  * @type {String|Number}
  6.  * @default barWidth = 'auto'
  7.  * @example barWidth = 'auto' | '10%' | 20
  8.  */

barGap

  1. /**
  2.  * @description 柱间距
  3.  * 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效
  4.  * 并且是对此坐标系中所有 'bar' 系列生效
  5.  * @type {String|Number}
  6.  * @default barGap = '30%'
  7.  * @example barGap = '30%' | 30
  8.  */

barCategoryGap

  1. /**
  2.  * @description 柱类目间距
  3.  * 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效
  4.  * 并且是对此坐标系中所有 'bar' 系列生效
  5.  * @type {String|Number}
  6.  * @default barCategoryGap = '20%'
  7.  * @example barCategoryGap = '20%' | 20
  8.  */

xAxisIndex

  1. /**
  2.  * @description 柱状图x坐标系索引
  3.  * @type {Number}
  4.  * @default xAxisIndex = 0
  5.  * @example xAxisIndex = 0 | 1
  6.  */

yAxisIndex

  1. /**
  2.  * @description 柱状图y坐标系索引
  3.  * @type {Number}
  4.  * @default yAxisIndex = 0
  5.  * @example yAxisIndex = 0 | 1
  6.  */

data

  1. /**
  2.  * @description 构成柱状图的数据
  3.  * @type {Array}
  4.  * @default data = []
  5.  * @example data = [100, 200, 300]
  6.  */

backgroundBar

  1. /**
  2.  * @description 背景柱配置
  3.  * @type {Object}
  4.  */

backgroundBar.show

  1. /**
  2.  * @description 是否显示背景柱
  3.  * @type {Boolean}
  4.  * @default show = false
  5.  */

backgroundBar.width

  1. /**
  2.  * @description 背景柱宽度
  3.  * @type {String|Number}
  4.  * @default width = 'auto'
  5.  * @example width = 'auto' | '30%' | 30
  6.  */

backgroundBar.style

  1. /**
  2.  * @description 背景柱默认样式
  3.  * @type {Object}
  4.  * @default style = {Class Style的配置项}
  5.  */
  6. style: {
  7.   fill: 'rgba(200, 200, 200, .4)'
  8. }

label

  1. /**
  2.  * @description 柱标签配置
  3.  * @type {Object}
  4.  */

label.show

  1. /**
  2.  * @description 是否显示柱标签
  3.  * @type {Boolean}
  4.  * @default show = false
  5.  */

label.position

  1. /**
  2.  * @description 标签位置
  3.  * @type {String}
  4.  * @default position = 'top'
  5.  * @example position = 'top' | 'center' | 'bottom'
  6.  */

label.offset

  1. /**
  2.  * @description 标签位置偏移
  3.  * @type {Array}
  4.  * @default offset = [0, -10]
  5.  */

label.formatter

  1. /**
  2.  * @description 标签格式化
  3.  * @type {String|Function}
  4.  * @default formatter = null
  5.  * @example formatter = '{value}件'
  6.  * @example formatter = (dataItem) => (dataItem.value)
  7.  */

label.style

  1. /**
  2.  * @description 标签默认样式
  3.  * @type {Object}
  4.  * @default style = {Class Style的配置项}
  5.  */
  6. style: {
  7.   fontSize: 10
  8. }

gradient

  1. /**
  2.  * @description 柱渐变配置
  3.  * @type {Object}
  4.  */

gradient.color

  1. /**
  2.  * @description 渐变色 (Hex|rgb|rgba)
  3.  * @type {Array}
  4.  * @default color = []
  5.  */

gradient.local

  1. /**
  2.  * @description 局部渐变
  3.  * @type {Boolean}
  4.  * @default local = true
  5.  */

barStyle

  1. /**
  2.  * @description 柱默认样式
  3.  * @type {Object}
  4.  * @default style = {Class Style的配置项}
  5.  */
  6. style: {}

independentColor

  1. /**
  2.  * @description 独立配色模式
  3.  * 设置为true时，可以配置每一个柱的颜色
  4.  * @type {Boolean}
  5.  * @default independentColor = false
  6.  */

independentColors

  1. /**
  2.  * @description 独立配色颜色
  3.  * 仅在启用独立配色模式后生效
  4.  * 默认值与根配置下的color属性相同，用于分别设置每一个柱的颜色
  5.  * 设置二维颜色数组时，将自动应用渐变色独立配色
  6.  * @type {Array}
  7.  * @example independentColor = ['#fff', '#000']
  8.  * @example independentColor = [['#fff', '#000'], '#000']
  9.  */

rLevel

  1. /**
  2.  * @description 柱状图渲染级别
  3.  * 级别高者优先渲染
  4.  * @type {Number}
  5.  * @default rLevel = 0
  6.  */

animationCurve

  1. /**
  2.  * @description 柱状图缓动曲线
  3.  * @type {String}
  4.  * @default animationCurve = 'easeOutCubic'
  5.  */

animationFrame

  1. /**
  2.  * @description 柱状图缓动效果帧数
  3.  * @type {Object}
  4.  * @default style = {Class Style的配置项}
  5.  */