鸿蒙Next ArkUI中如何实现饼状图

在鸿蒙Next的ArkUI中，想实现一个饼状图来展示数据，但不太清楚具体的实现方法。请问该如何使用ArkUI的组件或API来绘制饼状图？是否需要引入第三方库，还是有内置的解决方案？能否提供一个简单的示例代码？

2 回复

在鸿蒙Next ArkUI中，用@ohos/charts组件轻松画饼图！只需三步：

  1. 引入PieChart组件；
  2. 准备数据格式[{value: 30, name: '西瓜'}]；
  3. 设置颜色和动画。

代码示例：

PieChart({ data: myData })
  .options({ animation: true })

搞定！比切真饼还简单~ 🥧

更多关于鸿蒙Next ArkUI中如何实现饼状图的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next的ArkUI中，可以通过Canvas组件绘制饼状图。以下是实现步骤和示例代码：

  1. 创建Canvas组件：在布局中定义Canvas，设置宽高。
  2. 绘制饼状图：使用CanvasRenderingContext2D的绘图方法，通过计算角度和数据比例进行绘制。

示例代码（TypeScript）：

// 在ets文件中
@Entry
@Component
struct PieChart {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private data: number[] = [30, 50, 20] // 数据值
  private colors: string[] = ['#ff6384', '#36a2eb', '#ffce56'] // 对应颜色

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height(400)
        .onReady(() => {
          this.drawPieChart()
        })
    }
  }

  private drawPieChart() {
    const total = this.data.reduce((sum, value) => sum + value, 0)
    let startAngle = 0
    const radius = 80 // 饼图半径
    const centerX = 200 // 中心点X坐标
    const centerY = 200 // 中心点Y坐标

    this.data.forEach((value, index) => {
      const sliceAngle = (2 * Math.PI * value) / total
      
      // 绘制扇形
      this.context.beginPath()
      this.context.moveTo(centerX, centerY)
      this.context.arc(centerX, centerY, radius, startAngle, startAngle + sliceAngle)
      this.context.closePath()
      this.context.fillStyle = this.colors[index]
      this.context.fill()

      startAngle += sliceAngle
    })
  }
}

说明：

  • 通过arc方法绘制扇形，计算每个数据项对应的角度。
  • 使用fillStyle设置颜色，fill进行填充。
  • 可根据需求添加动画、图例或交互功能。

注意：实际开发中需根据数据动态计算位置和样式，确保适配不同屏幕。

回到顶部