HarmonyOS鸿蒙Next MPChart原生图表组件如何使用？折线图柱状图开发指南

解决方案

1. 安装MPChart

ohpm install @aspect/mpchart

2. 折线图实现

import {
  LineChart,
  LineChartModel,
  LineData,
  LineDataSet,
  EntryOhos,
  JArrayList,
  XAxis,
  YAxis,
  XAxisPosition,
  AxisDependency,
  ColorTemplate
} from '@aspect/mpchart'

@Entry
@Component
struct LineChartPage {
  private model: LineChartModel = new LineChartModel()

  aboutToAppear(): void {
    this.initChart()
  }

  initChart(): void {
    // 准备数据
    const values = new JArrayList<EntryOhos>()
    const dataPoints = [25.5, 26.0, 25.8, 26.2, 25.9, 26.1, 25.7]
    
    dataPoints.forEach((value, index) => {
      values.add(new EntryOhos(index, value))
    })
    
    // 创建数据集
    const dataSet = new LineDataSet(values, '水温')
    dataSet.setColor(0xFF36e27b)           // 线条颜色
    dataSet.setCircleColor(0xFF36e27b)     // 圆点颜色
    dataSet.setLineWidth(2)                // 线条宽度
    dataSet.setCircleRadius(4)             // 圆点半径
    dataSet.setDrawCircleHole(false)       // 不绘制空心圆
    dataSet.setDrawValues(false)           // 不显示数值
    dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER) // 平滑曲线
    dataSet.setDrawFilled(true)            // 绘制填充
    dataSet.setFillColor(0x3336e27b)       // 填充颜色（带透明度）
    
    // 创建数据对象
    const dataSets = new JArrayList<LineDataSet>()
    dataSets.add(dataSet)
    const lineData = new LineData(dataSets)
    
    // 配置X轴
    const xAxis = this.model.getXAxis()
    xAxis.setPosition(XAxisPosition.BOTTOM)
    xAxis.setDrawGridLines(false)
    xAxis.setTextColor(0xFF9eb7a8)
    xAxis.setTextSize(10)
    xAxis.setLabelCount(7)
    xAxis.setValueFormatter({
      getFormattedValue: (value: number) => {
        const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        return days[Math.floor(value)] || ''
      }
    })
    
    // 配置Y轴
    const leftAxis = this.model.getAxisLeft()
    leftAxis.setTextColor(0xFF9eb7a8)
    leftAxis.setTextSize(10)
    leftAxis.setDrawGridLines(true)
    leftAxis.setGridColor(0xFF1a3d2a)
    leftAxis.setAxisMinimum(24)
    leftAxis.setAxisMaximum(28)
    
    // 隐藏右侧Y轴
    this.model.getAxisRight().setEnabled(false)
    
    // 其他配置
    this.model.getLegend().setEnabled(false) // 隐藏图例
    this.model.getDescription().setEnabled(false) // 隐藏描述
    this.model.setTouchEnabled(true) // 启用触摸
    this.model.setDragEnabled(true)  // 启用拖拽
    this.model.setScaleEnabled(false) // 禁用缩放
    
    // 设置数据
    this.model.setData(lineData)
  }

  build() {
    Column() {
      Text('水温趋势')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.text_primary'))
        .width('100%')
        .margin({ bottom: 12 })
      
      LineChart({ model: this.model })
        .width('100%')
        .height(200)
        .backgroundColor(Color.Transparent)
    }
    .padding(16)
    .backgroundColor($r('app.color.surface'))
    .borderRadius(16)
  }
}

3. 柱状图实现

import {
  BarChart,
  BarChartModel,
  BarData,
  BarDataSet,
  BarEntry,
  JArrayList,
  XAxisPosition
} from '@aspect/mpchart'

@Entry
@Component
struct BarChartPage {
  private model: BarChartModel = new BarChartModel()

  aboutToAppear(): void {
    this.initChart()
  }

  initChart(): void {
    // 准备数据
    const values = new JArrayList<BarEntry>()
    const dataPoints = [12, 15, 18, 14, 20, 16]
    
    dataPoints.forEach((value, index) => {
      values.add(new BarEntry(index, value))
    })
    
    // 创建数据集
    const dataSet = new BarDataSet(values, '喂食次数')
    dataSet.setColor(0xFF36e27b)
    dataSet.setDrawValues(true)
    dataSet.setValueTextColor(0xFF9eb7a8)
    dataSet.setValueTextSize(10)
    
    // 创建数据对象
    const dataSets = new JArrayList<BarDataSet>()
    dataSets.add(dataSet)
    const barData = new BarData(dataSets)
    barData.setBarWidth(0.6)
    
    // 配置X轴
    const xAxis = this.model.getXAxis()
    xAxis.setPosition(XAxisPosition.BOTTOM)
    xAxis.setDrawGridLines(false)
    xAxis.setTextColor(0xFF9eb7a8)
    xAxis.setTextSize(10)
    xAxis.setValueFormatter({
      getFormattedValue: (value: number) => {
        const months = ['1月', '2月', '3月', '4月', '5月', '6月']
        return months[Math.floor(value)] || ''
      }
    })
    
    // 配置Y轴
    const leftAxis = this.model.getAxisLeft()
    leftAxis.setTextColor(0xFF9eb7a8)
    leftAxis.setDrawGridLines(true)
    leftAxis.setGridColor(0xFF1a3d2a)
    leftAxis.setAxisMinimum(0)
    
    this.model.getAxisRight().setEnabled(false)
    this.model.getLegend().setEnabled(false)
    this.model.getDescription().setEnabled(false)
    
    this.model.setData(barData)
  }

  build() {
    Column() {
      Text('月度喂食统计')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor($r('app.color.text_primary'))
        .width('100%')
        .margin({ bottom: 12 })
      
      BarChart({ model: this.model })
        .width('100%')
        .height(200)
        .backgroundColor(Color.Transparent)
    }
    .padding(16)
    .backgroundColor($r('app.color.surface'))
    .borderRadius(16)
  }
}

4. 动态更新数据

// 更新折线图数据
updateLineData(newValues: number[]): void {
  const values = new JArrayList<EntryOhos>()
  newValues.forEach((value, index) => {
    values.add(new EntryOhos(index, value))
  })

  const dataSet = new LineDataSet(values, '水温')
  // ... 配置样式

  const dataSets = new JArrayList<LineDataSet>()
  dataSets.add(dataSet)

  this.model.setData(new LineData(dataSets))
  this.model.notifyDataSetChanged() // 通知数据变化
  this.model.invalidate()           // 刷新图表
}