OpenHarmony图表怎么设置样式

在 OpenHarmony（ArkUI） 中，图表样式的设置方式取决于你使用的是哪种图表方案。下面按常见情况给你说明。

一、使用官方 Charts 组件（OpenHarmony 3.2+，如 LineChart / BarChart）

OpenHarmony 提供了基础图表组件（部分版本在 @ohos/charts 或 sample 中）。

1️⃣ 基本结构

import { LineChart, LineChartModel } from '@ohos/charts'

@Entry
@Component
struct ChartExample {
  build() {
    Column() {
      LineChart({
        model: new LineChartModel()
          .setData([10, 20, 15, 30, 25])
          .setXAxisData(["Mon", "Tue", "Wed", "Thu", "Fri"])
      })
    }
  }
}

2️⃣ 常见样式设置方式

✅ 线条样式

LineChartModel()
  .setLineColor(Color.Blue)
  .setLineWidth(3)

✅ 点样式

.setPointColor(Color.Red)
.setPointRadius(5)

✅ 坐标轴样式

.setXAxisColor(Color.Gray)
.setYAxisColor(Color.Gray)
.setAxisWidth(1)

✅ 背景

.setBackgroundColor('#F5F5F5')

二、使用 Canvas 自定义图表（最灵活 ✅）

OpenHarmony 推荐方式之一。

示例：折线图样式设置

@Entry
@Component
struct CanvasChart {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private ctx: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  build() {
    Canvas(this.ctx)
      .width('100%')
      .height(300)
      .onReady(() => {
        this.ctx.strokeStyle = '#007DFF' // 线条颜色
        this.ctx.lineWidth = 3           // 线条宽度
        this.ctx.beginPath()
        this.ctx.moveTo(50, 250)
        this.ctx.lineTo(150, 150)
        this.ctx.lineTo(250, 200)
        this.ctx.stroke()
      })
  }
}

✅ 可完全控制：

• 颜色
• 线型（虚线 / 实线）
• 字体
• 动画

三、使用第三方图表库（如 ECharts / MPChart 移植）

ECharts（HarmonyOS 适配版）

option = {
  color: ['#007DFF'],
  lineStyle: {
    width: 2,
    type: 'solid'
  },
  xAxis: {
    axisLine: { lineStyle: { color: '#999' } }
  }
}

四、样式设置总结

如果你能告诉我：

• ✅ OpenHarmony 版本
• ✅ 使用的是 Charts / Canvas / 三方库
• ✅ 想要设置的图表类型（折线 / 柱状 / 饼图）

我可以直接给你完整可运行示例。