Skip to content

柱状图快速开始

ts
import { BaseBar } from '@ymhc/harmonycharts'; // 引入柱状图组件
import type { BaseBarConfig } from '@ymhc/harmonycharts'; // 引入配置类型

@Entry
struct Index {
  @Prop baseBarConfig: BaseBarConfig = {
    categories: ['Mon', 'Tue', 'Wed', 'Thu'],
    series: [
      { name: 'Sales', data: [120, 200, 150, 80], color: '#5470C6' }
    ],
    grid: { top: 24, left: 16, right: 16, bottom: 28 },
    tooltip: { show: true, trigger: 'axis', confine: true },
    legend: { show: true }
  };

  build() {
    Column() {
      BaseBar({ config: this.baseBarConfig, chartHeight: 220 })
    }
  }
}

说明

  • 直接复制即可运行
  • 修改 seriescategories 即可替换数据

HarmonyCharts 鸿蒙图表文档。