【鸿蒙优选三方库】@ohos/mpchart：让 HarmonyOS 应用的数据可视化开箱即用

鸿蒙开源三方库

43人浏览 · 2026-08-11 10:16:03

鸿蒙开源三方库 · 2026-08-11 10:16:03 发布

【鸿蒙优选三方库】@ohos/mpchart：让 HarmonyOS 应用的数据可视化开箱即用

想在鸿蒙应用里做出漂亮的数据走势图？@ohos/mpchart 提供线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等全套常用图表，让业务数据汇总、走势分析、报表可视化一键搞定。

包名：@ohos/mpchart
当前版本：v4.0.0-rc.2
协议：Apache License 2.0
安装：ohpm install @ohos/mpchart
仓库：https://gitcode.com/CPF-ApplicationTPC/ohos_mpchart

一、它解决了什么问题？

App 里要展示数据图表时，常见选择是：

自己画：用 Canvas 自定义，工作量大、交互（缩放/高亮/手势）都要从头写；
找三方库：但鸿蒙生态里高质量、覆盖全图表类型的库不多。

@ohos/mpchart 是一个覆盖 7+ 主流图表类型的完整图表库，专为业务数据可视化打造：

线形图：销售趋势、访问量走势、监控指标；
柱状图：分类数据对比、排名；
饼状图：占比分析；
蜡烛图：股票/金融 K 线；
气泡图：多维数据分布；
雷达图：能力评估、产品对比；
瀑布图：累计构成、利润分解。

开箱即用，省去从零造轮子。

二、核心特点

特性	说明
图表类型丰富	线形/柱状/饼状/蜡烛/气泡/雷达/瀑布 7 大类
完整的部件体系	XAxis / YAxis / Legend / Description / LimitLine / MarkerView 等
手势交互	缩放、平移、长按、双击等手势监听
数据高亮	点击/滑动高亮数据点，自定义 Marker
高度自定义	颜色、字体、轴线、网格、动画均可配置
零权限	纯渲染，无需任何系统权限
配套工具类	`JArrayList` 数据集合、`Fill` 填充、`Description` 等

三、适用场景

销售数据看板：销售额走势、品类对比、区域排名。
股票/金融 App：K 线图（蜡烛图）、分时图、涨跌幅雷达。
健康数据：心率/血压走势、运动量分布雷达图。
电商运营：商品销量、转化漏斗瀑布图。
教育/办公：成绩对比、能力评估雷达。
IoT 监控：设备指标实时走势、传感器数据可视化。
数据驾驶舱：把所有业务图表整合到一个管理后台。

四、快速上手

1. 安装

ohpm install @ohos/mpchart

无需任何系统权限。

2. 柱状图示例

import {
  BarChart, BarChartModel, BarData, BarDataSet, BarEntry,
  JArrayList, Legend, XAxis, YAxis, Description,
  OnChartValueSelectedListener, EntryOhos, Highlight
} from '@ohos/mpchart'

@Entry
@Component
struct BarChartDemo {
  private barChart: BarChart = new BarChart()
  private model: BarChartModel = new BarChartModel()

  aboutToAppear() {
    // 1. 准备数据
    const entries = new JArrayList<BarEntry>()
    entries.add(new BarEntry(0, 120))
    entries.add(new BarEntry(1, 240))
    entries.add(new BarEntry(2, 180))
    entries.add(new BarEntry(3, 320))
    entries.add(new BarEntry(4, 150))

    const dataSet = new BarDataSet(entries, '销售额(万)')
    dataSet.setColorByColor(0xFF4F8EF7)

    const barData = new BarData(dataSet)
    barData.setBarWidth(0.5)

    // 2. 配置 Model
    this.model.setData(barData)
    this.model.getXAxis().setPosition(XAxisPosition.BOTTOM)
    this.model.getAxisLeft().setAxisMinimum(0)
    this.model.setDescription(new Description().setText(''))

    // 3. 绑定到 BarChart
    this.barChart.setModel(this.model)

    // 4. 数据点击监听
    this.barChart.setOnChartValueSelectedListener({
      onValueSelected: (e: EntryOhos, h: Highlight) => {
        console.info(`选中: x=${e.getX()}, y=${e.getY()}`)
      },
      onNothingSelected: () => {}
    })
  }

  build() {
    Column() {
      this.barChart // 将 BarChart 作为组件渲染
    }
    .width('100%').height(400)
  }
}

3. 线形图（走势）

import { LineChart, LineChartModel, LineData, LineDataSet, LineEntry, JArrayList } from '@ohos/mpchart'

const lineEntries = new JArrayList<LineEntry>()
for (let i = 0; i < 30; i++) {
  lineEntries.add(new LineEntry(i, Math.sin(i / 5) * 50 + 100))
}
const lineSet = new LineDataSet(lineEntries, '日活')
lineSet.setColorByColor(0xFF00B894)
lineSet.setCircleColor(0xFF00B894)
lineSet.setLineWidth(2)

const lineModel = new LineChartModel()
lineModel.setData(new LineData(lineSet))
lineModel.getXAxis().setPosition(XAxisPosition.BOTTOM)
lineModel.getAxisLeft().setAxisMinimum(0)

4. 自定义 Marker（点击气泡）

this.barChart.setMarker(
  new CustomMarkerView() // 实现自定义 MarkerView
)

五、亮点能力速览

7 大图表类型：业务数据可视化场景全覆盖。
完整部件体系：XAxis / YAxis / Legend / Description / LimitLine / MarkerView 让图表细节可控。
手势交互完整：内置缩放、平移、长按、双击监听。
数据高亮：点击/滑动高亮，自动联动 Marker。
高度自定义：颜色、字体、轴线、网格、动画全可调。
零权限：纯渲染，无任何运行时权限要求。