UI组件库

# GeneralBar 图表

展示示例

显示代码

基础用法

基础的柱状图用法。
显示代码

柱状图样式配置

柱状图样式配置示例。
显示代码

横向柱状图

配置横向柱状图示例。
显示代码

# Attributes

参数 说明 类型 可选值 默认值
series 系列列表 object — —
grid 直角坐标系内绘图网格 object — —
xAxis 直角坐标系 grid 中的 x 轴 object — —
yAxis 直角坐标系 grid 中的 y 轴 object — —
tooltip 提示框组件 object — —
backgroundColor 背景色 color — transparent

# series

参数 说明 类型 可选值 默认值
name 系列名称，用于tooltip的显示，legend 的图例筛选 string — —
itemStyle 图形样式。 object — —
showBackground 是否显示柱条的背景色。 boolean — false
backgroundStyle 每一个柱条的背景样式。需要将 showBackground 设置为 true 时才有效。 object — —
barWidth 柱条的宽度，不设时自适应。 number / string — 自适应
data 系列中的数据内容数组。数组项通常为具体的数据项 Array — —

# series.itemStyle

参数 说明 类型 可选值 默认值
color 柱条的颜色 color — {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#7FFFFF'},{offset: 1, color: '#6699FF'}]}
barBorderRadius 圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。（数组顺时针左上，右上，右下，左下） number / Array — 0

# series.backgroundStyle

参数 说明 类型 可选值 默认值
color 柱条的颜色。 color — 'rgba(127,164,255,0.3)'

# grid

参数 说明 类型 可选值 默认值
left grid 组件离容器左侧的距离。 string / number — '10%'
top grid 组件离容器上侧的距离。 string / number — 60
right grid 组件离容器右侧的距离。 string / number — '10%'
bottom grid 组件离容器下侧的距离。 string / number — 60
width 图例组件的宽度。默认自适应 string / number — 'auto'
height 图例组件的高度。默认自适应。 string / number — 'auto'

# xAxis

参数 说明 类型 可选值 默认值
type 坐标轴类型。 string 'category' / 'value' 'category'
show 是否显示 x 轴。 boolean — true
min 坐标轴刻度最小值。 number — —
max 坐标轴刻度最大值。 number — —
splitNumber 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。 number — 5
axisLine 坐标轴轴线相关设置。 object — —
axisTick 坐标轴刻度相关设置。 object — —
axisLabel 坐标轴刻度标签的相关设置。 object — —
splitLine 坐标轴在 grid 区域中的分隔线。 object — —
data 单个类目名称。 Array — —

# xAxis.axisLine

参数 说明 类型 可选值 默认值
show 是否显示坐标轴轴线。 boolean — false
lineStyle 坐标轴线线配置。 object — 14

# xAxis.axisLine.lineStyle

参数 说明 类型 可选值 默认值
color 坐标轴线线的颜色。 color — 'rgba(255,255,255,0.1)'

# xAxis.axisTick

参数 说明 类型 可选值 默认值
show 是否显示坐标轴轴线。 boolean — false
lineStyle 坐标轴线线配置。 object — —

# xAxis.axisTick.lineStyle

参数 说明 类型 可选值 默认值
color 坐标轴线线的颜色。 color — 'rgba(255,255,255,0.1)'

# xAxis.axisLabel

参数 说明 类型 可选值 默认值
show 是否显示刻度标签。 boolean — true
interval 坐标轴刻度标签的显示间隔。 默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。 number — —
rotate 刻度标签旋转的角度。 number — 45
formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 string — —
color 刻度标签文字的颜色。 color — 'rgba(255,255,255,0.8)'
fontSize 文字的字体大小。 number — 14

# xAxis.splitLine

参数 说明 类型 可选值 默认值
show 是否显示分隔线。 boolean — false
lineStyle 线样式。 object — —

# xAxis.splitLine.lineStyle

参数 说明 类型 可选值 默认值
color 线的颜色。 color — 'rgba(255,255,255,0.1)'

# yAxis

参数 说明 类型 可选值 默认值
type 坐标轴类型。 string 'category' / 'value' 'value'
show 是否显示 y 轴。 boolean — true
min 坐标轴刻度最小值。 number — —
max 坐标轴刻度最大值。 number — —
splitNumber 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。 number — 5
axisLine 坐标轴轴线相关设置。 object — —
axisTick 坐标轴刻度相关设置。 object — —
axisLabel 坐标轴刻度标签的相关设置。 object — —
splitLine 坐标轴在 grid 区域中的分隔线。 object — —
data 单个类目名称。 Array — —

# yAxis.axisLine

参数 说明 类型 可选值 默认值
show 是否显示坐标轴轴线。 boolean — false
lineStyle 坐标轴线线配置。 object — —

# yAxis.axisLine.lineStyle

参数 说明 类型 可选值 默认值
color 坐标轴线线的颜色。 color — 'rgba(255,255,255,0.1)'

# yAxis.axisTick

参数 说明 类型 可选值 默认值
show 是否显示坐标轴轴线。 boolean — false
lineStyle 坐标轴线线配置。 object — —

# yAxis.axisTick.lineStyle

参数 说明 类型 可选值 默认值
color 坐标轴线线的颜色。 color — 'rgba(255,255,255,0.1)'

# yAxis.axisLabel

参数 说明 类型 可选值 默认值
show 是否显示刻度标签。 boolean — true
formatter 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 string — —
color 坐标轴线线配置。 color — 'rgba(255,255,255,0.8)'
fontSize 坐标轴线线配置。 number — 14

# yAxis.splitLine

参数 说明 类型 可选值 默认值
show 是否显示分隔线。 boolean — false
lineStyle 线样式。 object — —

# yAxis.splitLine.lineStyle

参数 说明 类型 可选值 默认值
color 线的颜色。 color — 'rgba(255,255,255,0.1)'

# tooltip

参数 说明 类型 可选值 默认值
show 是否显示提示框组件。 boolean — false
formatter 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。 string / function 模板变量有: {a}（系列名称）/ {b}（类目值）/ {c}（数值）/ {d} （无） —
backgroundColor 提示框浮层的背景颜色。 color — 'rgba(18,20,29,0.95)'
axisPointer 坐标轴指示器 object — —

# tooltip.axisPointer

参数 说明 类型 可选值 默认值
lineStyle 指示器样式。 object — —

# tooltip.axisPointer.lineStyle

参数 说明 类型 可选值 默认值
color 线的颜色。 color — '#FFF'

← RatioPie 比例饼图组件 →