【鸿蒙优选三方库】@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。
• 高度自定义：颜色、字体、轴线、网格、动画全可调。
• 零权限：纯渲染，无任何运行时权限要求。

---

六、为什么值得选它？

1. 图表类型全：7+ 种主流图表，一个库搞定数据可视化全家桶。
2. API 完整：从轴、图例、描述、限制线、Marker 到手势监听，部件化设计让定制游刃有余。
3. 上手快：链式调用 + 明确的数据模型，半天就能出图。
4. 零依赖零权限：装上就能用，无网络/存储负担。
5. 业务验证：销售、股票、健康、IoT 监控等场景均已有落地。

如果你的鸿蒙应用需要"画图说话"，@ohos/mpchart 就是那个省心又全面的选择。