HarmonyOS · mccharts 3.0.0 Native P0

让 mccharts 在鸿蒙上原生飞驰

同一份 option，不走 WebView。mccharts 3.0.0 的模型与动画在 ArkTS 中运行， 图形交给 GLES 3.0 批量绘制，文字回到 ArkUI 原生渲染。 从折线、柱状到 10 万点散点演示，一行配置，两端同源。

打开在线实验室 下载 Agent Skill

在线预览直接运行 mccharts 3.0.0，与客户端共享同一份 option 与 demo 工厂。

9类 基础图表样例
10万 点大数据演示
1010条 主机测试通过
native-preview 360 × 390
mccharts 3.0.0 core GLES 3.0 ArkUI Text displaySync clock 0 WebView 1010 host tests API 19 · arm64
Why Native

不是把网页塞进 App，
而是把 mccharts 交给 GPU

mccharts 负责它最擅长的部分：模型、布局、动画与交互语义； 原生层只做最后一公里——把显示列表变成可批量提交的几何与文字。

技术预览 · Native P0

真实 mccharts，不重写配置

option、setOption、dispatchAction、dataZoom 都保持上游语义。 现有图表配置无需翻译，客户端只替换最后的绘制后端。

same option zero rewrite formatter 保留

GLES 3.0 批量绘制

三角形、线性渐变、裁剪与纹理统一进入 native painter。 VBO 容量复用与脏区增量上传，减少每帧重复搬运整张场景。

GLES 3.0 batch VBO

ArkUI 原生文字

文字不烘焙进贴图。由 ArkUI Text 真实排版，中文字体清晰， 并接入无障碍描述与屏幕阅读语义。

1000 text runs a11y

手势先让位，再接管

Pan、Pinch、Tap 由原生手势组仲裁。dataZoom 与 brush 都需要显式开启， 默认不抢走页面的滚动。

enableDataZoom enableBrush

大数据，可见窗口

1 千 / 1 万 / 10 万原始点的演示页，初始 500 点窗口。 单指平移、双指缩放，过滤与原始索引仍由 mccharts 负责。

large scatter progressive

工具箱、框选与导出，仍然是一份 option

magicType、restore、dataZoom、dataView 与 saveAsImage 走同一套动作管线； 框选、数据视图编辑和原生 Surface 快照已经在真机上完成页面级联调。

toolbox brush dataView surface PNG
Render Pipeline

一行 option，
如何抵达原生帧？

右侧不是流程图装饰，而是真实的渲染链路。每一段都有自己的边界、诊断与测试。

option → display list → native frame → GLES3 + Text
01 / MODEL

mccharts 模型

3.0.0 的模型、布局、动画与 dataZoom 过滤在 ArkTS 中运行， 由系统帧时钟提供活跃时间，隐藏与后台自动暂停。

mccharts.setOption(option)
02 / SCENE

显示列表

zrender 的可见图元被翻译成顶点、颜色、命令与文字运行。 裁剪、渐变与纹理仍按用户坐标计算。

NativeFrame { vertices, texts }
03 / GPU

GLES 3.0 Painter

C++ 侧批量提交三角形；VBO 容量复用、脏区上传。 单帧顶点预算 150 万，超限会给出明确诊断。

glDrawArrays(...)
04 / TEXT

ArkUI 文字叠层

真实字形由 ArkUI Text 叠加，使用 UIContext 测量。 可选的纹理文字快照保留裁剪与原生绘制顺序。

<Text>26℃</Text>
1.5M顶点 单帧顶点预算
1,000文字 单帧文字运行上限
16MiB large 批次 CPU 缓存
64色标 单个线性渐变上限

以上为约束与诊断阈值，不是性能承诺。性能、功耗与像素画质仍未完成设备验收。

Online Playground

在线改，马上看。

一个可以真正编辑 mccharts option 的实验室。加载客户端示例，改颜色、换数据、 写 formatter，然后直接把同一份对象粘进 ArkTS。

同一版本底层引擎 / zrender 6.1.0
复用客户端 demo option 工厂
360 × 390 客户端视口与字体
支持 formatter 等 JS 函数
PNG、分享链接、ArkTS 片段
实时错误提示与规范化
进入在线实验室 查看接入文档

浏览器端由 Canvas 执行同一份 mccharts 配置，客户端由 GLES + ArkUI 完成最终呈现。 相同 option、版本与视口下，几何和动画由同一套模型求值；文字度量与个别原生绘制能力以真机为准。

Get Started

三步接入
现有的 mccharts 配置

组件入口是 McChartsV2。把已有的 option 交进来， 需要外部控制时再挂上 McChartsController。

01

引入本地组件包

当前是本地 HAR 组件，尚未发布至 ohpm；使用 file 依赖接入。

02

传入标准 mccharts option

组件只要求 options；按引用替换触发更新，不递归观察大数组。

03

按需开启手势、事件与导出

dataZoom / brush 显式开启；快照导出需要 rasterText。

API 19 工程 arm64-v8a mccharts 3.0.0 Apache-2.0 @mcui/mccharts 3.0.0

最低系统版本与性能指标尚未验收；当前状态为 Native P0 技术预览。 

import { McChartsV2, McChartsController } from '@mcui/mccharts';
import type { Options } from '@mcui/mccharts';

@Entry
@ComponentV2
struct SalesPage {
  private controller: McChartsController = new McChartsController();
  @Local option: Options = {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: ['一月', '二月', '三月'] },
    yAxis: { type: 'value' },
    series: [{ type: 'line', smooth: true, data: [120, 180, 150] }]
  };

  build() {
    McChartsV2({ options: this.option, controller: this.controller })
      .width('100%')
      .height(390)
  }
}
TypeScript / ArkTS 本地依赖 · 尚未发布