Skip to content

你正在查看 v1.0.1 文档。切换到最新版请访问:/

饼图快速开始

ts
import { BasePie } from '@ymhc/harmonycharts'; // 引入饼图组件
import type { BasePieConfig } from '@ymhc/harmonycharts'; // 引入配置类型

@Entry // 入口页面
struct Index { // 页面结构体
  @Prop basePieConfig: BasePieConfig = { // 组件配置(可响应)
    seriesName: 'Category Split', // 系列名称
    data: [ // 数据
      { name: 'Tech', value: 42, color: '#5B8FF9' },
      { name: 'Retail', value: 28, color: '#5AD8A6' },
      { name: 'Service', value: 18, color: '#F6BD16' },
      { name: 'Other', value: 12, color: '#E8684A' }
    ],
    radius: '60%', // 半径
    center: ['50%', '50%'], // 中心点
    tooltip: { show: true, trigger: 'item', confine: true }, // 点触发提示
    legend: { show: true } // 图例开关
  }; // 配置结束

  build() { // 页面构建
    Column() { // 纵向布局
      BasePie({ config: this.basePieConfig, chartHeight: 220 }) // 渲染饼图
    } // 布局结束
  } // 构建结束
}

HarmonyCharts 鸿蒙图表文档。