Skip to content

条形图

image

介绍

横向柱状图与柱状图类似,但柱子的方向是水平的。它同样用于展示不同类别之间的数量或比例关系,但更适用于类别名称较长或者需要并排显示多个类别的情况。横向柱状图可以更好地利用空间,使图表更加紧凑。

API

Props

参数说明类型默认值
默认状态支持变量绑定默认 / 隐藏默认
数据堆叠柱状图是否开启堆积Booleanfalse
数据源支持变量绑定DataSource-
y 轴(类目)类目的数据字段编码stringyear
x 轴(数值)数值系列的数据字段编码Array[{name:sale1},{name:sale2}]
图表画布宽度string500px
图表画布高度string300px
上边距绘图区域距离画布上边距string60px
下边距绘图区域距离画布下边距string60px
左边距绘图区域距离画布左边距string10%
右边距绘图区域距离画布右边距string10%
数值系列图表数值系列配置数值系列-
X 轴配置图表 X 轴配置X 轴配置-
标题图表标题配置标题-
Y 轴图表 Y 轴配置Y 轴-
柱条样式柱状图柱条样式配置柱条样式-
图例图表图例配置图例-
提示框图表提示框配置提示框-
唯一标识组件唯一标识string组件 key 值

Props 数值系列

参数说明类型默认值
字段编码数据字段编码stringvalue
系列名系列名称string数值
X 轴索引系列 X 轴索引string-
柱条颜色系列颜色,对填充、边框、标记等生效string-
显示标签系列是否显示标签booleanfalse
字号标签字号string12
颜色标签颜色string#FFF
自定义参数(series-bar)code

Props X 轴配置

参数说明类型默认值
显示 X 轴图表 X 轴是否显示booleantrue
位置X 轴位置string底部
显示轴线图表轴线是否显示booleantrue
线宽轴线线宽string1
轴线颜色轴线颜色string#333333
显示刻度标签图表是否显示刻度标签booleantrue
刻度数量刻度标签数量,参考值number5
字号刻度标签字号number12
字体粗细刻度标签字体粗细stringnormal
文字颜色刻度标签文字颜色string-
分隔线是否显示 X 轴分隔线booleantrue
分隔线颜色分隔线颜色string#CCCCCC
自定义参数(xAxis)code

Props 标题

参数说明类型默认值
显示标题图表标题是否显示booleanfalse
主标题图表主标题string主标题
副标题图表副标题string副标题
自定义参数(title)code

Props Y 轴

参数说明类型默认值
显示 Y 轴图表 Y 轴是否显示booleantrue
显示轴线图表轴线是否显示booleantrue
线宽轴线线宽string1
轴线颜色轴线颜色string#333333
显示刻度标签图表是否显示刻度标签booleantrue
字号刻度标签字号string12
字体粗细刻度标签字体粗细stringnormal
文字颜色刻度标签文字颜色string-
角度刻度标签倾斜角度string-
分隔线是否显示 Y 轴分隔线booleantrue
分隔线颜色分隔线颜色string#CCCCCC
显示指示器是否显示 Y 轴指示器booleantrue
指示器类型指示器类型阴影/直线阴影
自定义参数(yAxis)code

Props 柱条样式

参数说明类型默认值
柱条宽度柱条宽度stringauto
不同系列柱间距不同系列柱间距string20%
同系列柱间距同系列柱间距string30%
柱条背景柱条背景string-

Props 图例

参数说明类型默认值
显示图例图表图例是否显示booleantrue
图例位置图例显示位置自动 / 顶部居左 / 顶部居中 / 顶部居右 / 底部居左 / 底部居中 / 底部居右 / 左侧顶部 / 左侧居中 / 左侧底部 / 右侧顶部 / 右侧居中 / 右侧底部自动
布局方向图例排列方向水平 / 竖直水平
图例区域宽度stringauto
图例区域高度stringauto
支持滚动图例超出宽高后是否支持滚动booleanfalse
自定义参数(legend)code

Props 提示框

参数说明类型默认值
显示提示框图表提示框是否显示booleantrue
触发类型提示框触发类型数据项/坐标轴数据项
背景颜色提示框背景颜色stringrgba(50,50,50,0.7)
边框颜色提示框边框颜色string#333333
文字颜色提示框文字颜色string#FFFFFF
字号提示框文字字号string14
自定义参数(tooltip)code

Type

DataSource

js
[
  {
    year: "2018",
    sales1: "500",
    sales2: "600",
  },
  {
    year: "2019",
    sales1: "900",
    sales2: "100",
  },
  {
    year: "2020",
    sales1: "1200",
    sales2: "300",
  },
  {
    year: "2021",
    sales1: "2000",
    sales2: "900",
  },
  {
    year: "2022",
    sales1: "1800",
    sales2: "2100",
  },
  {
    year: "2023",
    sales1: "200",
    sales2: "900",
  },
];