HarmonyOS 鸿蒙Next横向柱状图series属性解析

HarmonyOS 鸿蒙Next横向柱状图series属性解析 大家好，欢迎回来鸿蒙5莓创图表组件的专场，我们这一期来讲解McHorBarChart（横向柱状图）组件中series属性的详细用法。series属性是控制柱状图数据系列的核心配置项，掌握好这些属性可以让你轻松创建各种样式的柱状图效果。

1. name属性

作用：定义数据系列的名称，这个名称会显示在图例(legend)中，也会在tooltip提示框中显示。

类型：String

默认值：空字符串

必填：是

场景：当需要显示多个数据系列时，必须为每个系列设置不同的名称以便区分；在需要图例交互或tooltip提示时也需要设置。

代码示例：

series: [
  {
    name: '最高气温',
    data: [11, 11, 15, 13, 12, 130, 10]
  },
  {
    name: '最低气温',
    data: [1, 2, 5, 3, 2, 30, 0]
  }
]

2. color属性

作用：设置柱状图的颜色，可以是单一颜色或渐变色。

类型：String | Array

默认值：使用全局调色盘颜色

可选值：

  • 十六进制颜色值，如’#296DFF’
  • RGB颜色值，如’rgb(41, 109, 255)’
  • 渐变色数组，如[’#53e075’, ‘#7953e075’]

场景：需要自定义柱状图颜色时使用；当需要突出显示某个系列时；实现渐变效果时。

代码示例：

// 单一颜色
series: [
  {
    name: '最高气温',
    color: '#ff2659f5',
    data: [11, 11, 15, 13, 12, 130, 10]
  }
]

// 渐变色
series: [
  {
    name: '最高气温',
    gradient: {
      color: ['#53e075', '#7953e075']
    },
    data: [30, 31, 35, 31, 28, 31, 31]
  }
]

3. shapeType属性

作用：控制柱状图的形状类型，可以创建普通柱状图或阶梯状柱状图。

类型：String

默认值：‘normal’

可选值：

  • ‘normal’：普通柱状图
  • ‘leftEchelon’：左阶梯状柱状图
  • ‘rightEchelon’：右阶梯状柱状图

场景：需要创建特殊形状的柱状图时；在数据可视化中强调变化趋势时。

代码示例：

series: [
  {
    name: '阶梯状柱状图',
    shapeType: 'leftEchelon',
    data: [11, 11, 15, 13, 12, 130, 10]
  }
]

4. echelonOffset属性

作用：当shapeType设置为阶梯状时，控制阶梯的锐度偏移量。

类型：Number

默认值：10

场景：调整阶梯状柱状图的视觉效果；需要更平缓或更尖锐的阶梯效果时。

代码示例：

series: [
  {
    name: '阶梯状柱状图',
    shapeType: 'leftEchelon',
    echelonOffset: 15, // 更大的值会使阶梯更明显
    data: [11, 11, 15, 13, 12, 130, 10]
  }
]

5. yAxisIndex属性

作用：指定该数据系列关联的Y轴索引，用于多Y轴场景。

类型：Number

默认值：0

可选值：0或1（对应配置的yAxis数组中的索引）

场景：当图表需要显示多个Y轴时；不同数据系列的单位或量纲不同时。

代码示例：

yAxis: [
  {name: '温度(℃)'},
  {name: '湿度(%)'}
],
series: [
  {
    name: '温度',
    yAxisIndex: 0,
    data: [11, 11, 15, 13, 12, 130, 10]
  },
  {
    name: '湿度',
    yAxisIndex: 1,
    data: [30, 35, 40, 45, 50, 55, 60]
  }
]

6. barStyle属性

作用：配置柱状图的样式，包括宽度、圆角、颜色等。

类型：Object

默认值：{}

子属性详解：

6.1 width

作用：设置柱子的宽度。

类型：Number

默认值：自动计算

场景：需要固定柱子宽度时；图表数据点较多需要缩小柱子时。

6.2 borderRadius

作用：设置柱子的圆角半径。

类型：Array | Number

默认值：0

可选值：

  • 单一数值：四个角使用相同圆角
  • 数组：[左上, 右上, 右下, 左下]
  • 简写数组：[左上和右下, 右上和左下]

场景：创建圆角柱状图时；需要美化柱子外观时。

6.3 color

作用：覆盖系列级别的颜色设置，单独设置柱子的颜色。

类型：String

默认值：继承series.color

场景：需要单独设置柱子颜色时。

完整代码示例：

series: [
  {
    name: '圆角柱状图',
    barStyle: {
      width: 10,
      borderRadius: [0, 4, 4, 0], // 左上和右下无圆角，右上和左下4px圆角
      color: '#fa6262'
    },
    data: [11, 11, 15, 13, 12, 130, 10]
  }
]

7. backgroundStyle属性

作用：配置背景柱状图的显示和样式。

类型：Object

默认值：{show: false}

子属性详解：

7.1 show

作用：是否显示背景柱状图。

类型：Boolean

默认值：false

场景：需要显示背景参考线时；强调数据与目标的对比时。

7.2 width

作用：背景柱子的宽度。

类型：Number

默认值：与主柱子相同

7.3 color

作用：背景柱子的颜色。

类型：String

默认值：‘rgba(180, 180, 180, 0.2)’

完整代码示例：

series: [
  {
    name: '销售完成率',
    backgroundStyle: {
      show: true,
      width: 15,
      color: 'rgba(200, 200, 200, 0.3)'
    },
    data: [80, 92, 75, 88, 90, 83, 78]
  }
]

8. label属性

作用：配置柱状图上显示的文本标签。

类型：Object

默认值：{show: false}

子属性详解：

8.1 show

作用：是否显示文本标签。

类型：Boolean

默认值：false

8.2 color

作用：文本标签的颜色。

类型：String

默认值：’#000’

8.3 fontSize

作用：文本标签的字体大小。

类型：Number

默认值：12

8.4 fontWeight

作用：文本标签的字体粗细。

类型：String

默认值：‘normal’

可选值：‘normal’ | ‘bold’ | ‘lighter’ | ‘bolder’ | 100-900

8.5 fontFamily

作用：文本标签的字体家族。

类型：String

默认值：‘sans-serif’

8.6 position

作用：文本标签的位置。

类型：String

默认值：‘top’（横向柱状图为’right’）

可选值：‘top’ | ‘bottom’ | ‘left’ | ‘right’ | ‘inside’ | ‘center’

8.7 offset

作用：文本标签的偏移量。

类型：Array

默认值：[0, 0]

8.8 formatter

作用：自定义文本标签内容。

类型：String | Function

默认值：显示数据值

可选值：

  • ‘seriesLabel’：显示系列名称和数据值
  • 函数：自定义格式函数

完整代码示例：

series: [
  {
    name: '销售额',
    label: {
      show: true,
      color: '#fff',
      fontSize: 14,
      fontWeight: 'bold',
      position: 'center',
      offset: [0, 0],
      formatter: (params) => {
        return `¥${params.value}万`
      }
    },
    data: [120, 200, 150, 80, 70, 110, 130]
  }
]

9. stack属性

作用：设置堆叠柱状图，相同stack值的系列会堆叠在一起。

类型：String

默认值：空（不堆叠）

场景：需要显示堆叠柱状图时；展示部分与整体的关系时。

代码示例：

series: [
  {
    name: '产品A',
    stack: 'total',
    data: [120, 132, 101, 134, 90, 230, 210]
  },
  {
    name: '产品B',
    stack: 'total',
    data: [220, 182, 191, 234, 290, 330, 310]
  }
]

10. data属性

作用：设置柱状图的数据。

类型：Array<String | Number | Object>

默认值：[]

必填：是

数据格式说明：

  • 简单数组：[11, 11, 15, 13, 12, 130, 10]
  • 对象数组：[{value: 11, color: ‘#ff0000’}, {value: 15, itemStyle: {…}}]

场景：任何柱状图都必须设置的数据；需要单独设置某个柱子的样式时。

代码示例：

// 简单数据
series: [
  {
    name: '简单数据',
    data: [11, 11, 15, 13, 12, 130, 10]
  }
]

// 复杂数据
series: [
  {
    name: '复杂数据',
    data: [
      11, 
      {value: 15, color: '#ff0000'},
      {value: 13, itemStyle: {borderColor: '#000', borderWidth: 2}},
      12, 
      130, 
      10
    ]
  }
]

实际应用案例

下面我们通过一个完整的实际案例来展示如何综合运用这些属性：

@Entry
@Component
struct SalesChart {
  @State options: Options = new Options({
    title: {
      show: true,
      text: '2023年季度销售报告',
      left: 'center',
      top: 10
    },
    legend: {
      show: true,
      top: 40
    },
    xAxis: {
      data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
      name: '销售额 (万元)'
    },
    series: [
      {
        name: '线上销售',
        stack: 'total',
        barStyle: {
          borderRadius: [4, 4, 0, 0]
        },
        label: {
          show: true,
          position: 'inside',
          color: '#fff',
          formatter: 'seriesLabel'
        },
        gradient: {
          color: ['#4facfe', '#00f2fe']
        },
        data: [320, 332, 301, 334]
      },
      {
        name: '线下销售',
        stack: 'total',
        barStyle: {
          borderRadius: [0, 0, 4, 4]
        },
        label: {
          show: true,
          position: 'inside',
          color: '#fff',
          formatter: 'seriesLabel'
        },
        gradient: {
          color: ['#b8cbb8', '#b8cbb8', '#b465da']
        },
        data: [120, 132, 101, 134]
      },
      {
        name: '目标',
        type: 'line',
        symbol: 'diamond',
        symbolSize: 12,
        lineStyle: {
          width: 3,
          color: '#ff9800'
        },
        itemStyle: {
          color: '#ff9800'
        },
        data: [450, 464, 402, 468]
      }
    ]
  })

  build() {
    Row() {
      McHorBarChart({options: this.options})
    }
    .height('50%')
    .width('100%')
  }
}

这个案例展示了：

  • 堆叠柱状图的使用
  • 渐变色的应用
  • 圆角柱子的设置
  • 标签的灵活配置
  • 混合图表（柱状图+折线图）的实现

好，这期讲到这里就结束了，希望大家通过这篇文章能够全面掌握McHorBarChart组件的series属性配置，在实际开发中灵活运用这些属性创建出各种精美的柱状图效果。如果有任何问题，欢迎在评论区留言讨论，我们下期再见！


更多关于HarmonyOS 鸿蒙Next横向柱状图series属性解析的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

在HarmonyOS鸿蒙Next中，横向柱状图的series属性主要配置数据系列。关键属性包括：

  1. data：数组类型，定义柱状图数据项
  2. stack：可选，相同stack值的系列会堆叠显示
  3. xAxisIndex/yAxisIndex：指定使用的坐标轴索引
  4. type：固定为'bar'表示柱状图
  5. barWidth：控制柱条宽度比例
  6. label：配置数据标签显示
  7. itemStyle：设置柱条样式（颜色、边框等）
  8. showBackground：是否显示柱条背景

示例配置：

series: [{
  type: 'bar',
  data: [10, 20, 30],
  barWidth: '60%',
  itemStyle: { color: '#5470c6' }
}]

更多关于HarmonyOS 鸿蒙Next横向柱状图series属性解析的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感谢分享这篇关于HarmonyOS鸿蒙Next横向柱状图series属性的详细解析！内容非常全面，涵盖了name、color、shapeType等核心属性的用法和实际应用场景。特别是提供的代码示例很实用，能帮助开发者快速理解如何配置各种柱状图效果。

对于想实现复杂数据可视化的开发者来说，这篇教程很好地展示了如何通过组合不同属性来创建堆叠柱状图、渐变效果、圆角柱子等高级特性。实际应用案例部分尤其有价值，演示了如何将多个属性综合运用到一个完整的销售报表图表中。

这些配置项在HarmonyOS应用开发中非常实用，能帮助开发者快速构建专业的数据可视化界面。

回到顶部