McBarChart（柱状图）

Mc Charts

v2.8.4

快速搜集问题

指导

介绍
使用必看
更新日志
常见问题

图表文档

McLineChart（折线图）
McBarChart（柱状图）
McLineBarChart（折线与柱状组合图）
McHorBarChart（横向柱状图）
McPieChart（饼图）
McRadarChart（雷达图）
McGaugeChart（仪表盘）

McBarChart（柱状图）

温馨提示

由于本组件基于ArkTS封装，导致无法在浏览器页面实时预览，所以代码效果图是图片，想要实时预览即可复制代码到对应项目；如若给您带来不便，我们深感歉意；感谢使用。

#默认

- McBarChart（柱状图）作为图表中最常见之一的图表，可以通过以下代码实现系统默认的柱状图。需要注意的是：横向柱状图的xAxis代表就是yAxis，而yAxis代表是xAxis


import { McBarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State defOption: Options = new Options({
      title: {
        show: true,
        text: '基础属性',
        right: 20,
        top: 30
      },
      xAxis:{
        data:['周一','周二','周三','周四','周五','周六','周日']
      },
      yAxis:{
        name:'温度'
      },
      series:[
        {
          name:'最高气温',
          data:[11, 11, 15, 13, 12, 130, 10]
        }
      ]
  })
  build() {
    Row() {
      McBarChart({
        options: this.defOption
      })
    }
    .height('50%')
  }
}

Preview

基础属性

名称	描述	类型	默认值	必填	备注
grid	直角坐标系内绘图网格	Object	{}	非必填	用于设置上下左右四个边距，替代历史的cPaddingL、cPaddingT、cPaddingR、cPaddingB四个属性，不过最新版本也会兼容旧的使用方式
cPaddingT ^deprecated	图表内容区距离顶部位置	Number	20	非必填
cPaddingL ^deprecated	图表内容区距离左侧位置	Number	30	非必填
cPaddingB ^deprecated	图表内容区距离底部位置	Number	30	非必填
cPaddingR ^deprecated	图表内容区距离右侧位置	Number	30	非必填
color	调色盘颜色列表	String[]	['#296DFF', '#ff5495fd', '#ff1acffd', '#ff72e4fd', '#7B72F7', '#F85758', '#FFBF29', '#D1E9F9', '#F5FAFC', '#5A657A']	非必填
title	标题组件与功能配置	Object	{ ... }	非必填	详细默认值请查看title属性讲解
legend	图例样式与功能配置	Object	{ ... }	非必填	详细默认值请查看legend属性讲解
tooltip	提示层样式与功能配置	Object	{ ... }	非必填	详细默认值请查看tooltip属性讲解
xAxis	X轴样式与功能配置	Object	{ ... }	必填	详细默认值请查看xAxis属性讲解
yAxis	Y轴样式与功能配置		{ ... }	非必填	详细默认值请查看yAxis属性讲解，已支持多条y轴功能。
dataZoom	dataZoom 组件用于区域缩放，从而能自由关注细节的数据信息。	Object	{ ... }	非必填	详细默认值请查看dataZoom属性讲解
animation	是否开启动画。	Boolean	true	非必填	如果频繁更新数据建议将该属性设置为false
series	柱状区域样式与功能配置	Object[]	[ ... ]	必填	详细默认值请查看series属性讲解

#动态更新数据

- McCharts 组件整体使用@Observed装饰器和@ObjectLink装饰器来监控数据的变化，所以修改数据需要使用Option实例对象的setVal方法来实现


import { McBarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State defOption: Options = new Options({
    title: {
      show: true,
      text: '更新数据',
      right: 20,
      top: 30
    },
    xAxis: {
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        name:'温度'
    },
    series: [
        {
          name:'最高气温',
          data:[11, 11, 15, 13, 12, 130, 10]
        }
    ]
  })
  aboutToAppear() {
    setTimeout(() => {
      // 使用Option实例对象的setVal方法来实现，修改什么属性就传什么
      this.defOption.setVal({
        series: [
          {
            name:'最高气温',
            data:[110, 110, 150, 130, 102, 130, 210]
          }
        ]
      })
    }, 2000)
  }
  build() {
    Row() {
      McBarChart({
        options: this.defOption
      })
    }
    .height('50%')
  }
}

Preview

#xAxis属性

- McBarChart（柱状图）支持通过xAxis中的属性来设置X轴的相关样式与功能，其中包含：轴线颜色、刻度线的配置、字体大小、字体样式、字体颜色等等。详细也可以快速查看属性表


import { McBarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State xAxisOption: Options = new Options({
    title: {
      show: true,
      text: 'xAxis属性配置',
      right: 20,
      top: 30
    },
    xAxis:{
        axisLine: { // 轴线样式
            show: true, // 是否显示
            lineStyle: {
                color: '#ccc',
                width: 2
            }
        },
        axisTick: { // 刻度线配置
            show: true, // 是否显示
            length: 4, // 刻度的长度
            lineStyle: {
                color: '#ccc', // 刻度线颜色
                width: 2 // 刻度线宽度
            }
        },
        axisLabel: {  // x轴文本标签样式
            color: '#bf19ff',
            fontSize: 22,
            overflow: 'truncate',
            formatter: (name: string,
             index: number) => { // 自定义文本标签
                return name
            },
        },
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
    },
    yAxis:{
        name:'温度'
    },
    series:[
        {
          name:'最高气温',
          data:[11, 11, 15, 13, 12, 130, 10]
        }
    ]
  })
  build() {
    Row() {
      McBarChart({
        options: this.xAxisOption
      })
    }
    .height('50%')
  }
}

Preview

xAxis属性

名称	描述	类型	默认值	必填	备注
name	X轴线名称	String		非必填
nameGap	坐标轴名称与轴线之间的距离。	Number	5	非必填
nameLocation	名称位置	String	end	非必填	可选值：'end'(尾部) \| 'center'(中间) \| 'start'(头部)
nameTextStyle	X轴名称样式配置	Object	{ ... }	非必填
axisLine	X轴线配置	Object	{ ... }	非必填
axisTick	刻度线配置	Object	{ ... }	非必填
axisLabel	X轴文本标签样式配置	Object	{ ... }	非必填
splitLine	X轴分割线配置	Object	{ ... }	非必填
formatter ^deprecated	文本内容自定义函数	Function	null	非必填	该方法已经迁移到axisLabel中，请重新配置
boundaryGap	坐标轴两边是否留白策略	Boolean	true	非必填	可选值：true(是)、false(否)
data	X轴数据	<String\|Number>[]	[]	必填

#yAxis属性

- McBarChart（柱状图）支持通过yAxis中的属性来设置Y轴的相关样式与功能，其中包含：轴线颜色、刻度线的配置、字体大小、字体样式、字体颜色等等。详细也可以快速查看属性表


import { McBarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State yAxisOption: Options = new Options({
    title: {
      show: true,
      text: 'yAxis属性配置',
      right: 20,
      top: 30
    },
    xAxis:{
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
    },
    yAxis:{
        name: '单位/摄氏度', // 坐标名称
        nameTextStyle: { // 名称样式
          color: '#000'
        },
        nameGap: 10,
        axisLine: { // 轴线样式
          show: true, // 是否显示
          lineStyle: {
            color: '#ccc',
            width: 2
          }
        },
        axisTick: { // 刻度线配置
          show: false
        },
        splitLine: { // 坐标轴中的分隔线。
           show: false
        },
        axisLabel: {  // x轴文本标签样式
          color: '#bf19ff',
          formatter: (name: string,
           index: number) => { // 自定义文本标签
            return name + '°C'
          }
        }
    },
    series:[
        {
          name:'最高气温',
          data:[11, 11, 15, 13, 12, 130, 10]
        }
    ]
  })
  build() {
    Row() {
      McBarChart({
        options: this.yAxisOption
      })
    }
    .height('50%')
  }
}

Preview

yAxis属性

名称	描述	类型	默认值	必填	备注
name	Y轴线名称	String		非必填
nameGap	坐标轴名称与轴线之间的距离。	Number	5	非必填
nameLocation	名称位置	String	end	非必填	可选值：'end'(尾部) \| 'center'(中间) \| 'start'(头部)
nameTextStyle	Y轴名称样式配置	Object	{ ... }	非必填
position	轴线的位置	String	left	非必填	可选值：'left'(左边) \| 'right'(右边)
axisLine	Y轴线配置	Object	{ ... }	非必填
axisTick	刻度线配置	Object	{ ... }	非必填
axisLabel	文本标签样式配置	Object	{ ... }	非必填
splitLine	分割线配置	Object	{ ... }	非必填
formatter ^deprecated	文本内容自定义函数	Function	null	非必填	该方法已经迁移到axisLabel中，请重新配置
data	X轴数据	<String\|Number>[]	[]	必填

#双Y轴案例

- McBarChart（柱状图）支持通过yAxis中的属性可以设置多组数据用来实现多条y轴的功能


import { McBarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State yAxisOption: Options = new Options({
    title: {
      show: true,
      text: '双y轴',
      right: 20,
      top: 24
    },
    xAxis:{
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
    },
    yAxis: [
      {
        name: '白日温度',
      },
      {
        name: '夜晚温度',
        position: 'right',
        splitLine: {
          show: false
        }
      }
    ],
    series:[
      {
        name: '白日温度',
        data: [30, 28, 29, 29, 32, 27, 26]
      },
      {
        name: '夜晚温度',
        data: [11, 11, 15, 13, 12, 13, 10],
        yAxisIndex: 1
      }
    ]
  })
  build() {
    Row() {
      McBarChart({
        options: this.yAxisOption
      })
    }
    .height('50%')
  }
}

Preview

#Y轴限定范围

- McBarChart（柱状图）支持通过yAxis中的属性可以设置Y轴的最大值与最小值


import { McBarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State yAxisMinMaxDefOption: Options = new Options({
    title: {
      show: true,
      text: 'y轴限定值',
      right: 20,
      top: 30
    },
    xAxis:{
      data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
    },
    yAxis: {
      name: '单位/摄氏度',
      min: 10,
      max: 15
    },
    series: [
      {
        name: '最高气温',
        data: [11, 11, 15, 13, 12, 13, 10]
      }
    ]
  })
  build() {
    Row() {
      McBarChart({
        options: this.yAxisMinMaxDefOption
      })
    }
    .height('50%')
  }
}

Preview

#legend属性

- McBarChart（柱状图）支持通过legend中的属性来设置图例的相关样式与功能，其中包含：图例位置、不同系列图例的距离、字体大小、字体样式、字体颜色等等。详细也可以快速查看属性表


import { McBarChart, Options } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State legendOption: Options = new Options({
      xAxis:{
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
      },
      legend: {
        align: 'right',
        left: '10%',
        itemGap: 20,
        itemTextGap: 10,
        itemHeight: 10,
        textStyle: {
            color: '#000',
            fontWeight: '600',
            fontFamily: 'sans-serif',
            fontSize: 24
        }
      },
      series:[
        {
          name:'最高气温',
          data:[11, 11, 15, 13, 12, 130, 10]
        }
      ]
  })
  build() {
    Row() {
      McBarChart({
        options: this.legendOption
      })
    }
    .height('50%')
  }
}

Preview

legend属性

名称	描述	类型	默认值	必填	备注
show	控制图例显示与隐藏	Boolean	true	非必填	可选值：true(显示)、false(隐藏)
orient	图例的方向	String	'horizontal'	非必填	可以设置为 "horizontal" 或 "vertical"，分别表示水平和垂直方向。
left	图例距离左侧位置	String\|Number	auto	非必填
top	图例距离顶部位置	String\|Number	6%	非必填
right	图例距离右侧位置	String\|Number	auto	非必填
bottom	图例距离底部位置	String\|Number	auto	非必填
icon	图例项的icon	String	'roundRect'	非必填	可以设置为 "rect"、"circle" 或 "roundRect"，分别表示矩形、圆形和圆角矩形。
iconRadian	图例项的icon的圆角，只针对icon为roundRect	Number	2	非必填	当icon设置为 "roundRect" 时，此属性用于设置圆角的半径。
itemGap	每项图例之间的间隔	Number	10	非必填
itemTextGap	图形与文本的距离	Number	5	非必填
itemWidth	图形的宽度	Number	16	非必填
itemHeight	图形的高度	Number	8	非必填
align	图例标记和文本的对齐。纵向布局的图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局（orient 为 'vertical'）的时候为右对齐，即为 'right'	String	'auto'	非必填	可以设置为 "left" 或 "right"，分别表示左对齐和右对齐。
selectAble	图例项是否可选	Boolean	true	非必填	设置为 true 时，用户可以通过点击图例项来选择或取消选择相应的数据系列。
textUnselectedStyle	图例未选中状态的文字默认样式配置	Object	{ ... }	非必填	用于设置图例未选中状态下文字的样式，如颜色、字体大小等。
iconUnselectedStyle	图例未选中状态的图标默认样式配置	Object	{ ... }	非必填	用于设置图例未选中状态下图标的颜色样式。
textStyle	文本样式配置	Object	{ ... }	非必填

#tooltip属性

- McBarChart（柱状图）支持通过tooltip中的属性来设置提示层的相关样式与功能，其中包含：提示层的样式、提示层类型、提示线的配置等等。详细也可以快速查看属性表


import { McBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State tooltipOption: Options = new Options({
      xAxis:{
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
      },
      tooltip: {
        borderColor: '#f72659f5',
        borderWidth: 1,
        backgroundColor: '#fff',
        textStyle: { // 文本样式配置
          color: '#000'
        }
      },
      series:[
        {
          name:'最高气温',
          data:[11, 11, 15, 13, 12, 130, 10]
        }
      ]
  })

  build() {
    Row() {
      McBarChart({
        options: this.tooltipOption
      })
    }
    .height('50%')
  }
}

Preview

tooltip属性

名称	描述	类型	默认值	必填	备注
show	控制提示层显示与隐藏	Boolean	true	非必填	可选值：true(显示)、false(隐藏)
type	提示层显示类型	String	default	非必填	可选值：default（默认）、custom（自定义）。需要注意是自定义需要配合监控点击方法回调，通过回调信息自行显示内容与位置
axisPointer	指示器配置项	Object	{ ... }	非必填
backgroundColor	提示框背景颜色	String	rgba(50,50,50,0.7)	非必填
borderColor	提示框边框颜色	String	#333	非必填
borderWidth	提示框边框宽度	Number	0	非必填
padding	提示框内边距	Number	10	非必填
textStyle	文本样式配置	Object	{ ... }	非必填

#自定义tooltip属性

- McBarChart（柱状图）支持通过自定义来设置。设置自定义之后，tooltip中的部分属性会失效。


import { McBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State tooltipOption: Options = new Options({
      xAxis:{
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
      },
      series:[
        {
          name:'最高气温',
          data:[11, 11, 15, 13, 12, 130, 10]
        }
      ]
  })

  @Builder
  customTooltip($$: chartInterface.InterfaceObj) {
    if ($$.tooltipInfo.title) {
      Text($$.tooltipInfo.title)
    }
    ForEach($$.tooltipInfo.data, 
      (item: chartInterface.InterfaceObj, index) => {
      Text(item.name + '：' + item.num)
    })
  };

  build() {
    Row() {
      McBarChart({
        options: this.tooltipOption,
        customTooltip: this.customTooltip
      })
    }
    .height('50%')
  }
}

Preview

#dataZoom属性

- McBarChart（柱状图）支持通过dataZoom属性来实现区域缩放，可动态设置起始位置与结束位置。完美适配手动滑动与手动捏合缩放的交互。


import { McBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State dataZoomOption: Options = new Options({
    xAxis:{
      data: ['周一','周二','周三','周四','周五','周六','周日',
       '周一','周二','周三','周四','周五','周六','周日'] // 数据
    },
    dataZoom: {
      show: true,
      start: 3,
      end: 8
    },
    series: [
      {
        name: '最高气温',
        data: [11, 110, 15, 130, 12, 130, 10]
      },
      {
        name: '最低气温',
        data: [150, 13, 120, 101, 11, 13, 100]
      }
    ]
  })
  build() {
    Row() {
      McBarChart({
        options: this.seriesOption
      })
    }
    .height('50%')
  }
}

Preview

dataZoom属性

名称	描述	类型	默认值	必填	备注
show	是否开启区域滚动	Boolean	false	非必填	可选值：true(启动)、false(关闭)
start	滚动开始节点。	Number	0	非必填
end	滚动结束节点。	Number	6	非必填

#series属性

- McBarChart（柱状图）支持通过series中的属性来设置柱状区的相关样式与功能，其中包含：柱状颜色、柱状拐点样式、柱状文本标签配置等等。详细也可以快速查看属性表


import { McBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  const commonSeries = {
    backgroundBar: {
      show: true
    },
    label: {
        show: true,
        color: '#5387e0',
        fontWeight: '600',
        fontFamily: 'sans-serif',
        fontSize: 30,
        formatter: (params: chartInterface.InterfaceObj,
         index: number): string => {
          return params.name
        }
    }
  }
  @State seriesOption: Options = new Options({
      xAxis:{
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
      },
      series:[
        {
          name:'最高气温',
          color: '#ff2659f5', // 自定义颜色
          ...commonSeries,
          data:[11, 11, 15, 13, 12, 130, 10] // 数据
        },
        {
          name:'最低气温',
          ...commonSeries,
          data:[-11, -11, -15, -13, -12, -130, -10] // 数据
        }
      ]
  })
  build() {
    Row() {
      McBarChart({
        options: this.seriesOption
      })
    }
    .height('50%')
  }
}

Preview

series属性

名称	描述	类型	默认值	必填	备注
name	系列名称，用于tooltip的显示，legend 的图例筛选	String	空	必填
color	系列颜色	String	空	非必填
shapeType	柱状图形状类型	String	'normal'	非必填	可以设置为 "normal"、"leftEchelon" 或 "rightEchelon"，分别表示普通柱状图、左阶梯状柱状图和右阶梯状柱状图。
echelonOffset	阶梯状柱状图锐度偏移量	Number	10	非必填	用于设置阶梯状柱状图的锐度偏移量。
yAxisIndex	线条的Y轴索引	Number	0	非必填	可以设置为 0 或 1，表示线条对应哪个Y轴。
barStyle	柱状样式配置	Object	{ ... }	非必填
backgroundStyle	背景柱状图配置	Object	{ ... }	非必填	用于配置背景柱状图的显示、宽度和颜色。
label	系列文本标签样式配置	Object	{ ... }	非必填
stack	是否显示堆叠柱子	String	空	非必填	设置相同名称的会被堆叠计算
data	柱状图数据	Array<String\|Number\|Object>	[]	必填	可以包含数值或对象，例如 [100, 200, {value: 100, color: xxx}]。

#高亮柱状图

- McBarChart（柱状图）支持通过series中的属性来设置高亮指定的柱子


import { McBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State seriesOption: Options = new Options({
      title: {
        show: true,
        text: '高亮柱子',
        right: 20,
        top: 22
      },
      xAxis:{
        data: ['周一','周二','周三','周四','周五','周六','周日'] // 数据
      },
      series:[
        {
          name:'最高气温',
          data:[11, 11, 15, 13, 12,
           {color: '#fb7293', value: 38}, 10] // 数据
        },
        {
          name:'最低气温',
          data:[-11, -11, -15, -13, -12,
           {color: '#53e075', value: -20}, -10] // 数据
        }
      ]
  })
  build() {
    Row() {
      McBarChart({
        options: this.seriesOption
      })
    }
    .height('50%')
  }
}

Preview

#渐变色柱状图

- McBarChart（柱状图）支持通过series中的属性来设置渐变色的场景


import { McBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State seriesGradientOption: Options = new Options({
    title: {
      show: true,
      text: '渐变柱状图',
      right: 20,
      top: 30
    },
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日',
       '周一', '周二', '周三', '周四', '周五', '周六', '周日'] // 数据
    },
    series: [
      {
        name: '白天气温',
        gradient: {
          color: ['#53e075', '#7953e075']
        },
        data: [30, 31, 35, 31, 28, 31, 31,
         29, 30, 39, 18, 28, 37, 19] // 数据
      },
      {
        name: '夜间气温',
        gradient: {
          color: ['#fa6262', '#83fa6262']
        },
        data: [11, 11, 15, 13, 12, 13, 10,
         11, 11, 15, 13, 12, 13, 10] // 数据
      }
    ]
  })

  build() {
    Column() {
      Row() {
        McBarChart({
          options: this.seriesGradientOption
        })
      }
      .height('50%')
    }
  }
}

Preview

#圆角柱状图

- McBarChart（柱状图）支持通过series中的属性来设置圆角的场景


import { McBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State seriesRadiusOption: Options = new Options({
    title: {
      show: true,
      text: '圆角模式',
      right: 20,
      top: 30
    },
    xAxis: {
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日',
       '周一', '周二', '周三', '周四', '周五', '周六', '周日'] // 数据
    },
    series: [
      {
        name: '最高气温',
        barStyle: { // 柱子的样式配置
          width: 10,
          borderRadius: [4, 4]
        },
        data: [30, 31, 35, 31, 28, 31, 31,
         29, 30, 39, 18, 28, 37, 19] // 数据
      },
      {
        name: '最低气温',
        barStyle: { // 柱子的样式配置
          color: '#fa6262',
          borderRadius: [4, 4]
        },
        data: [11, 11, 15, 13, 12, 130, 100,
         11, 11, 15, 13, 12, 130, 100] // 数据
      }
    ]
  })

  build() {
    Column() {
      Row() {
        McBarChart({
          options: this.seriesRadiusOption
        })
      }
      .height('50%')
    }
  }
}

Preview

#堆叠模式

- McBarChart（柱状图）支持通过series中的属性来设置堆叠模式的场景


import { McBarChart, Options, chartInterface } from '@mcui/mccharts'

@Entry
@Component
struct Index {
  @State stackSeriesOption: Options = new Options({
    title: {
      show: true,
      text: '堆叠模式',
      right: 20,
      top: 30
    },
    xAxis:{
      data: ['周一','周二','周三','周四','周五','周六','周日',
       '周一','周二','周三','周四','周五','周六','周日'] // 数据
    },
    series:[
      {
        name:'最高气温',
        color: '#53e075', // 自定义颜色
        stack: 'stack',
        label: {
          position: 'center',
          offset: [0, 0],
          color: '#fff'
        },
        data: [30, 31, 35, 31, 28, 31, 31, 29, 30, 39, 18, 28, 37, 19] // 数据
      },
      {
        name:'最低气温',
        barStyle: { // 柱子的样式配置
          color: '#fa6262'
        },
        label: {
          position: 'center',
          offset: [0, 0],
          color: '#fff'
        },
        stack: 'stack',
        data: [11, 11, 15, 13, 12, 130, 100,
        11, 11, 15, 13, 12, 130, 100] // 数据
      }
    ]
  })

  build() {
    Column() {
      Row() {
        McBarChart({
          options: this.stackSeriesOption
        })
      }
      .height('50%')
    }
  }
}

Preview

McCharts

McCharts是什么？
为什么选择McCharts

资源

帮助

问题收集表
Gitee 问题