鸿蒙5莓创图表柱状图组件series属性全解析：打造高定制化柱状图

大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来深入讲解柱状图（Bar Chart）的series属性配置。通过掌握这些属性，你可以灵活控制柱状图的显示、样式、动画及交互效果。本文将逐一拆解所有属性，结合代码案例帮助大家快速上手！

1. show

作用：控制当前柱状图系列是否显示。类型：布尔值（Boolean）。默认值：true（默认显示）。可选值：true或false。场景：当需要动态隐藏某个数据系列时使用。代码案例：

series: [{
  show: false, // 隐藏此系列柱状图
  data: [100, 200, 300]
}]

2. name

作用：定义图例中显示的系列名称，用于区分不同数据系列。类型：字符串（String）。默认值：空字符串。场景：多系列柱状图中，通过名称区分不同数据组。代码案例：

series: [{
  name: '销量', // 图例显示为“销量”
  data: [100, 200, 300]
}]

3. stack

作用：数据堆叠配置，相同stack值的系列数据会垂直叠加。类型：字符串（String）。默认值：空字符串（不堆叠）。场景：多系列柱状图需要堆叠展示时使用（如累计数据）。代码案例：

series: [
  { stack: '总量', data: [100, 200] }, 
  { stack: '总量', data: [50, 80] } // 与上一系列堆叠
]

4. shapeType

作用：定义柱状图形状类型。类型：字符串（String）。默认值：'normal'（普通矩形）。可选值：'normal'（普通）、'leftEchelon'（左阶梯）、'rightEchelon'（右阶梯）。场景：需要特殊形状柱体（如阶梯状）时使用。代码案例：

series: [{
  shapeType: 'rightEchelon', // 右阶梯形状
  echelonOffset: 15,         // 控制阶梯锐度
  data: [100, 200, 300]
}]

5. echelonOffset

作用：阶梯状柱状图的锐度偏移量，数值越大阶梯越明显。类型：数字（Number）。默认值：10。场景：shapeType为leftEchelon或rightEchelon时调整阶梯效果。代码案例：

series: [{
  shapeType: 'leftEchelon',
  echelonOffset: 20, // 增大偏移量
  data: [100, 200]
}]

6. xAxisIndex / yAxisIndex

作用：指定当前系列关联的X轴/Y轴索引，用于多轴场景。类型：数字（Number）。默认值：0（关联第一个轴）。场景：多轴图表中为不同系列分配不同坐标轴。代码案例：

series: [{
  xAxisIndex: 1, // 使用第二个X轴
  yAxisIndex: 1, // 使用第二个Y轴
  data: [100, 200]
}]

7. data

作用：柱状图数据，支持数值或对象格式（自定义颜色）。类型：数组（Array）。默认值：空数组。场景：动态数据绑定或自定义单个柱体颜色。代码案例：

data: [
  100, 
  { value: 200, color: 'red' }, // 单独设置颜色
  300
]

8. backgroundStyle

作用：配置柱状图背景样式，用于对比实际值与背景参考值。子属性：

show：是否显示背景（默认false）。
width：背景宽度（'auto'、百分比或数值）。
color：背景颜色（默认浅灰色）。场景：展示目标值或参考线。代码案例：

backgroundStyle: {
  show: true,
  width: '80%',      // 背景宽度为柱体的80%
  color: 'rgba(0,0,0,0.1)'
}

9. label

作用：配置柱状图顶部标签，支持富文本格式化。子属性：

show：是否显示标签（默认false）。
position：标签位置（'top'、'center'、'bottom'）。
offset：标签偏移量（数组格式，如[0, -10]）。
formatter：格式化文本（支持字符串模板或函数）。
color：字体颜色。
fontSize：字体大小。场景：显示数值或自定义文本提示。代码案例：

label: {
  show: true,
  position: 'top',
  formatter: '{value} 件', // 显示“100 件”
  color: '#666',
  fontSize: 20
}

10. gradient

作用：为柱状图添加渐变颜色效果。子属性：

color：渐变颜色数组（如['#000', '#fff']）。
local：是否局部渐变（默认true，仅当前柱体渐变）。场景：增强视觉效果或突出特定数据。代码案例：

gradient: {
  color: ['#4facfe', '#00f2fe'], // 蓝到青渐变
  local: false // 整个系列统一渐变
}

11. barStyle

作用：定义柱状图基础样式，影响同一坐标系下的所有柱体。子属性：

width：柱体宽度（'auto'、百分比或数值）。
barGap：系列间间隙（默认'30%'）。
barCategoryGap：分类间间隙（默认'20%'）。
color：柱体颜色（支持字符串或数组）。
stroke：边框颜色。
borderRadius：圆角（false关闭，数值或数组）。场景：统一调整柱体布局和样式。代码案例：

barStyle: {
  width: '40%',
  color: ['#ff0000', '#00ff00'], // 不同系列不同颜色
  borderRadius: 10 // 圆角10像素
}

12. rLevel

作用：控制渲染优先级，数值高的系列会覆盖数值低的系列。类型：数字（Number）。默认值：0。场景：多系列叠加时控制显示层级。代码案例：

series: [
  { rLevel: 1, data: [100, 200] }, // 优先渲染
  { rLevel: 0, data: [50, 80] }
]

13. animationCurve / animationFrame

作用：控制柱状图动画曲线和帧数。

animationCurve：动画曲线（如'easeOutCubic'）。
animationFrame：动画帧数（默认30）。场景：自定义动画流畅度或速度。代码案例：

series: [{
  animationCurve: 'linear', // 线性动画
  animationFrame: 60       // 更高帧数
}]

好，这期讲到这里就结束了，希望大家通过这篇详解能轻松掌握莓创柱状图组件的series属性配置！如果遇到问题，欢迎在评论区留言交流。下期我们将深入讲解更多高级功能，敬请期待！

posted @ 2025-06-25 16:31 woo爷说前端阅读(10) 评论(0) 收藏举报

刷新页面返回顶部

woo爷说前端

为你专属的前端知识