柱状图API

目前柱状图只支持单轴,不支持双轴,在配置 yAxis时需要注意。

引入方式

import { ConsoleBarChart } from '@alicloud/console-chart';

示例 Demo

基本使用


水平柱状图


堆叠柱状图


镜面柱状图


分组柱状图


自定义数据列颜色


数据列配置

属性说明类型默认值说明
name数据列名称String--
yAxis坐标轴下标Number0-
data数据Array--
color自定义当前数据列颜色String主题color_24-
dodge分组名String-如使用需开启dodgeStack配置

配置 Config

通用配置

属性说明
padding配置绘图内边距
xAxis配置x轴
yAxis配置y轴
legend配置图例
guide配置辅助元素
tooltip配置提示信息
label配置图形文本
size配置自定义大小
style配置自定义样式

专属配置

grid: Boolean

是否显示网格线,默认开启

marginRatio: Number

数值范围为 0 至 1,用于调整分组中各个柱子的间距。

dodgeStack: Boolean

是否为分组柱状图。如开启该配置,需在数据列中配置dodge

horizontal: Boolean

是否水平展示柱状图。

stack: Boolean

是否为堆叠柱状图

facet: Boolean

是否使用镜面柱状图