更新记录
1.5.0(2026-07-19)
新增内置 3D:图表类型 32 → 36 种。
- 4 种 3D 图表类型:bar3D 3D 柱状(≤300 柱)/ scatter3D 3D 散点(≤500 点)/ surface 3D 曲面(≤64×64 高度场按高度色阶)/ line3D 3D 折线(≤2000 段)——自研内置 3D 渲染管线,纯本地渲染不依赖 GPU/WebView,Android/iOS/H5 三端一致出图
- 数据量上限为性能实测判决值(保证低端机流畅),超限报 InvalidOption 不静默截断
- 接入:走既有 create(optionJson)/setOption 的 type 字符串,无新增接口
- 已知边界:3D 类型暂无 hitAt 命中、不消费 setViewport 视口,无 globe/3D 交互旋转(路线图项)
平台兼容性
uni-app x(5.14)
| Chrome | Safari | Android | iOS | 鸿蒙 | 微信小程序 |
|---|---|---|---|---|---|
| √ | √ | 5.0 | 12 | × | × |
其他
| 多语言 | 暗黑模式 | 宽屏模式 |
|---|---|---|
| × | × | √ |
nex-charts 高性能原生图表
🌐 在线演示:https://nexdemo.test.chengaofeng.cn/#/pages/charts-gallery/charts-gallery —— 浏览器直接看真实渲染效果(48 组件 H5 门户,无需安装)
自研原生渲染引擎 + 三端一致输出:同一渲染内核在 Android / iOS / H5 跑出逐像素一致的图表。1 万点折线 ~12.5ms、10 万点自动 LTTB 降采样后 ~12.6ms(实测,1500×1200 画布),远超 50ms 流畅线;纯本地渲染、零网络依赖、不吃 WebView Canvas 性能。1.1.0 新增:百万级散点摄取 34.5ms、原生视图手势拖动帧 1.25ms——单机 100 万点也能流畅拖动缩放。
性能:与免费图表插件的物理层差距
市面主流图表插件(canvas 引擎 / UTS 引擎 / ECharts 封装)在大数据量下受制于 WebView Canvas 性能与跨层通信开销,百万点量级普遍卡顿掉帧。charts 的差距在物理层,不是营销话术:
| 指标 | charts 实测 | 引擎机制 |
|---|---|---|
| 100 万点摄取 | 34.5ms | setDensePoints() 二进制通道(LE f32,零 JSON 序列化) |
| 百万点首帧 | 3.22ms | 自研渲染引擎直写像素,不经 WebView Canvas |
| 手势拖动单帧 | 1.25ms | <uni-nex-chart-view> 原生视图,手势热环路零桥接开销 |
| 1 万点折线 | ~12.5ms | LTTB 自动降采样保形,10 万点同价位 ~12.6ms |
(数据出处:仓内基准套件实测,1500×1200 画布;验证层级见下文「平台与验证状态」——host 基准 + H5 浏览器断言 + Android 模拟器端到端,dense 重渲染物理真机项如实标注。)
什么场景值得 ¥199:大数据量(十万~百万点散点/热力)、高频刷新(行情/传感器流)、原生手势体验(拖动缩放不掉帧)、三端像素一致(设计稿即所得)。若只画几十个点的静态小图,免费 canvas 插件够用——charts 面向的是性能敏感的 B 端/工业/金融场景。
特性
-
36 种图表能力(uCharts 全对齐 + ECharts 2D 独有全对齐 + 内置 3D——ECharts 有的 2D 图表这里全都有,3D 基础图表三端一致,免费 canvas/ECharts 封装做不到的原生性能):
分类 类型 直角坐标 折线 line / 面积 area / 柱状 bar / 条形 bar-horizontal / 散点 scatter / 山峰 mountain / 时序 time-series(时间轴标签)/ 气泡 bubble(三维半径)/ 混合 mix(柱+线双 y 轴, yAxisIndex)/ 涟漪散点 effect-scatter / 象形柱 pictorial-bar(symbol 平铺)径向 饼 pie / 环 donut / 雷达 radar / 仪表盘 gauge / 玫瑰 rose(南丁格尔)/ 圆弧进度 arc-progress / 旭日 sunburst(多层层次) / 水球 liquid-fill(波浪占比) 大数据/统计 密集散点 scatter-dense(百万点)/ 热力图 heatmap / 箱线 boxplot / 日历热力 calendar(GitHub 贡献图式) / 平行坐标 parallel(多维分析) 层次/流向 漏斗 funnel / 矩形树 treemap / 桑基 sankey / 树图 tree(节点树+连线) / 主题河流 theme-river(时序流带) 特型/地理 词云 wordcloud(螺旋布局防重叠)/ 地图 map(GeoJSON choropleth 色阶,使用方传 GeoJSON 不占包体)/ 地理迁徙 geo-lines(地图+流向弧线) 3D(1.5 新增) 3D 柱 bar3D(≤300 柱)/ 3D 散点 scatter3D(≤500 点)/ 3D 曲面 surface(≤64×64 网格,高度色阶)/ 3D 折线 line3D(≤2000 段)——内置 3D 渲染管线,真 3D 透视与光照明暗效果(非 GPU 加速) 加粗为 1.4 ECharts 2D 全对齐新增(9 种);1.3 新增 8 种(mountain/time-series/bubble/mix/rose/arc-progress/wordcloud/map)。专业 K 线/行情图请配
uni-nex-kline插件(十万根 K 线 + 10 指标 + 原生手势),charts 不内置 K 线、两插件同一渲染内核。3D 诚实定位(1.5 新增,必读):3D 为内置渲染管线绘制(非 GPU 加速,三端一致)——定位大屏展示级基础 3D(静态/慢旋转 30fps),非 GPU 级流畅:数据量上限 bar3D 300 柱 / scatter3D 500 点 / surface 64×64 网格(超限报错不静默截断);host 基准(M2 Max)单帧 bar3D 300 柱 29.7ms / scatter3D 500 点 21.6ms / surface 64×64 18.0ms,中端真机预计慢 2~5×,请按目标设备实测选数据量;3D 交互旋转/球面地球 globe 不在本版本(roadmap)。海量 3D 点云请用 2D scatter-dense(百万点)。 <nex-chart>组件即插即用(easycom 自动注册):内置 tap 十字线 + tooltip(自动显示数值)+ legend 点击开关系列(可关闭改纯事件模式),触摸命中全程本地计算、零额外桥接<uni-nex-chart-view>原生视图组件(1.1.0 新增,App 专属):手势/渲染热环路整段留在原生(零桥接开销),拖动即改视口即时重渲,专为百万点场景的流畅手势体验设计——内置十字线覆盖层 + dense 区域统计事件- 百万级散点摄取(1.1.0 新增):
setDensePoints()二进制摄取 LE f32 坐标(避 JSON 序列化开销),单系列最多 400 万点;密集时自动切换为格子聚合统计着色(Density 模式),稀疏时保留逐点绘制(Points 模式),色阶 viridis/heat/cool 预设或自定义渐变 - 热力图(1.1.0 新增):
setHeatCells()摄取网格单元值,连续色标 colorbar 图例,支持数值叠加标注 - 手势视口:
setViewport()归一化窗口裁剪可见数据范围——直角坐标全类型响应(line/area/bar/bar-horizontal/scatter/scatter-dense + 1.3 新增的 mountain/time-series/bubble/mix,窗口内 zoom-to-fill 缩放填充、命中下标恒为原始数据下标),<uni-nex-chart-view>内置原生手势驱动 - 三态命中测试(1.1.0 新增):
hitAt(x, y)精确坐标命中——最近数据点 / dense 区域统计 / 未命中,配合原生视图的十字线覆盖层 - 高分屏清晰:按设备 dpr 超采样渲染(文字按物理字号真排版,非位图放大),2x/3x 屏不发虚
setOption增量更新:事务化合并(校验失败不污染现有状态),支持series[i].show开关、数据替换、主题切换- light / dark 双主题;
series.show隐藏系列自动重伸缩 y 轴量程(对齐 ECharts 语义) - 大数据自动降采样:单系列最多 200 万点,折线/面积超过绘图区宽×2 的点数自动 LTTB 降采样(保形),命中数据同步给降采样后的真实绘制点;scatter-dense 上限更高(400 万点),走独立的二进制摄取通道
- CJK 排版:内核内置文字排版引擎,App 端自动加载系统字体;H5 端调
registerFontBytes()注册一份(子集化的)中文字体即可——优先 ttf(glyf 轮廓):实测部分 CFF 轮廓 .otf(如 NotoSansCJKsc)注册后个别字形渲染缺字,glyf 全字符正常(示例工程static/fonts/demo-cjk.ttf即 101KB 的 Noto Sans SC 子集,做法见其同目录 README) - 三端同源:App(Android/iOS) 与 H5 共享同一渲染内核输出——不是"H5 降级实现"(
<uni-nex-chart-view>原生视图组件为 App 专属,H5 端用<nex-chart>)
快速上手
组件(推荐)
<template>
<nex-chart
:option="option"
theme="light"
:width-px="350"
:height-px="240"
@pointtap="onPointTap"
@legendtap="onLegendTap"
/>
</template>
<script>
export default {
data() {
return {
option: {
series: [
{ type: 'line', name: '订单', data: [120, 200, 150, 80, 220] },
{ type: 'bar', name: '退款', data: [20, 36, 15, 42, 30] }
]
}
}
},
methods: {
onPointTap(e: UTSJSONObject) {
// { seriesIndex, dataIndex, value, name }——组件已自动显示 tooltip + 十字线
console.log('pointtap', e)
},
onLegendTap(e: UTSJSONObject) {
// { name }——组件已自动切换该系列显示/隐藏并重渲染(legendToggle 可关)
console.log('legendtap', e)
}
}
}
</script>
组件 Props:
| prop | 类型 | 默认 | 说明 |
|---|---|---|---|
option |
Object | 必填 | 图表 option(见下方 DSL) |
theme |
String | light |
light / dark |
widthPx / heightPx |
Number | 必填 | 组件尺寸(逻辑像素;内核按设备 dpr 超采样保证清晰) |
legendToggle |
Boolean | true |
点 legend 是否内置切换系列显隐 |
tooltip |
Boolean | true |
命中数据点是否内置显示十字线+tooltip |
事件:@pointtap({seriesIndex, dataIndex, value, name})、@legendtap({name})。
API 模式(自绘/导出场景)
import { Chart, renderChart, registerFontBytes, chartsVersion } from '@/uni_modules/nex-charts'
// 有状态对象:create → resize → render,setOption 增量更新
const chart = Chart.create(JSON.stringify({ series: [{ type: 'line', name: 'a', data: [1, 5, 3, 8] }] }))
chart.resize(400, 300, 2) // 逻辑 400×300、dpr 2 → 输出 800×600 物理像素 PNG(高清)
const dataUri = chart.render() // data:内置图像编解码/png;base64,... 直接喂 <内置图像编解码 :src>
chart.setOption('{"series":[{"data":[9,9,9,9]}]}') // 增量改数据
const hit = chart.getHitData() // 命中元数据 JSON(做自定义交互用)
const meta = chart.getMeta() // {warnings, width, height, dpr, renderMs}
const path = chart.renderToFile('/...绝对路径.../chart.png') // 落盘(App 端)
// 一次性出图(无状态便捷面,内部 800×600@1x)
const uri = renderChart('{"series":[{"type":"pie","name":"A","data":[30]},{"type":"pie","name":"B","data":[70]}]}')
18 个 API:Chart.create / setOption / resize / render / renderToFile / getHitData / getMeta / setViewport / renderFrame / setDensePoints / setHeatCells / hitAt / chartId / detachView(对象,14 个),renderChart / registerFontFile / registerFontBytes / chartsVersion(自由函数,4 个)。H5 端 15/18 可用——chartId/detachView/renderFrame 为 App 专用原生视图配套 API,H5 v1.1 未提供(见「平台说明」)。
百万点 / 热力图 + <uni-nex-chart-view> 原生视图(App 专属,1.1.0 新增)
百万级散点、热力图与高帧率手势拖动走 <uni-nex-chart-view> 原生视图(渲染+手势整段留在原生,零桥接开销),而非 <nex-chart>:
<template>
<uni-nex-chart-view
:chart-id="chartId" :revision="revision" :gesture="true" :crosshair="true"
style="width: 350px; height: 240px;"
@pointtap="onPointTap" @regiontap="onRegionTap" @viewportchange="onViewportChange" />
</template>
<script>
import { Chart } from '@/uni_modules/nex-charts'
export default {
data() { return { chartId: 0, revision: 0, chart: null as any } },
onLoad() {
// scatter-dense:option 只声明形态,真实点数据经 setDensePoints 二进制摄取(避 JSON 序列化开销)
const chart = Chart.create(JSON.stringify({
series: [{ type: 'scatter-dense', name: '轨迹', layout: 'xy', ramp: 'heat', pointSize: 2 }]
}))
chart.setDensePoints(0, myFloat32XYBytesAsUint8Array, 'xy') // 最多 400 万点
this.chart = chart
this.chartId = chart.chartId() // 懒注册句柄,视图经此反查回本实例
this.revision++ // 数据版本自增触发首帧
},
onUnload() {
// 用完显式 detachView() 摘除注册表引用,否则实例常驻内存不回收(视图只是引用者不拥有生命周期)
if (this.chart != null) { (this.chart as any).detachView() }
},
methods: {
onPointTap(json: string) { const p = JSON.parse(json) }, // {kind:"point",seriesIndex,dataIndex,value,px,py}
onRegionTap(json: string) { const r = JSON.parse(json) }, // {kind:"region",seriesIndex,count,weightSum,xRange,yRange}——dense Density 档格子聚合统计
onViewportChange(json: string) { const v = JSON.parse(json) } // {start,end}——拖动结束后的归一化视口
}
}
</script>
热力图(heatmap)同理,option 声明 { type: 'heatmap', grid: { cols, rows }, cellGap?, showValues?, ramp? },真实网格值经 chart.setHeatCells(seriesIndex, bytes) 摄取(LE f32、行主序、长度须等于 cols*rows);小网格场景也可用 series.data 内联摄取(长度同样须等于 cols*rows,详见契约文档),<uni-nex-chart-view> 场景通常数据量大更适合二进制摄取。
Props:chartId/revision(Number,配合上例驱动重渲)、gesture(Boolean,默认 true,是否消费触摸手势平移视口)、crosshair(Boolean,默认 true,是否绘制十字线覆盖层)。Emits:@pointtap/@regiontap(JSON 字符串,hitAt 三态命中原样透传)、@viewportchange({start,end},拖动结束上抛)。注意(v1.1 边界):dense(scatter-dense)series 无逐点命中——@pointtap 只对普通 series 触发,dense 点档(Points 稀疏档)区域的点按返回 none(Density 分箱档走 @regiontap 区域统计,不受影响)。
<uni-nex-chart-view>App 专属(H5 端暂无原生视图形态,走<nex-chart>+ 自行接手势库调setViewport)。setViewport()状态对任意图表可写,但 v1.1 渲染层仅scatter-dense消费视口(其余类型画面暂不响应,全类型窗口支持在路线图)。另:视图 onDraw 热环路 v1.1 未包 try/catch——挂视图前建议先render()一次验证 option 合法,避免渲染期错误(如ramp拼写错)抛到 UI 线程。
H5 注意事项
// H5 端引擎异步初始化:应用启动时等一次
// #ifdef H5
import { ensureReady, registerFontBytes } from '@/uni_modules/nex-charts'
await ensureReady()
// 中文标签需要注册一份 CJK 字体(建议子集化到 1-2MB,应用自托管、浏览器会缓存)
const buf = await (await fetch('/static/fonts/NotoSansSC-sub.ttf')).arrayBuffer()
registerFontBytes(new Uint8Array(buf))
// #endif
renderToFile / registerFontFile 在 H5 端不可用(浏览器沙箱无文件系统),调用会抛出明确错误——用 render() 拿 data-URI、用 registerFontBytes() 传字体字节。
option DSL 速览
{
"title": { "text": "销量走势" },
"theme": "dark", // light | dark(也可由组件 theme prop 注入)
"backgroundColor": "#0e1117", // 可选,覆盖主题背景
"legend": { "show": true }, // 底部图例(默认开)
"grid": { "left": 8, "right": 8, "top": 8, "bottom": 8 },
"xAxis": { "data": ["一", "二", "三"] }, // 类目轴标签(可省略)
"series": [
{ "type": "line", "name": "订单", "data": [120, 200, 150], "smooth": true },
{ "type": "bar", "name": "退款", "data": [20, 36, 15], "show": true },
{ "type": "scatter", "name": "样本", "points": [[1, 10], [2, 25]] }
],
// radar 专用
"radarIndicators": [{ "name": "速度", "max": 100 }, { "name": "力量", "max": 100 }],
// gauge 专用
"gauge": { "min": 0, "max": 100 }
}
- 字段一律 camelCase;
series[i].show: false隐藏系列(不绘制、不参与量程,legend 保留灰色条目可再点开)。 - 命中元数据(
getHitData()):{axis, series: [{index, name, type, points: [[px, py, dataIndex, value], ...]}], legend: [{name, rect}]}——坐标为逻辑像素,与组件盒内坐标同空间。
scatter-dense / heatmap(1.1.0 新增)——option 只声明形态与样式,真实数据经 setDensePoints/setHeatCells 二进制摄取(不进 JSON):
// scatter-dense
{ "series": [{ "type": "scatter-dense", "name": "轨迹", "layout": "xy", "ramp": "heat", "pointSize": 2, "minAlpha": 0.15, "lodThreshold": 2.0 }] }
// heatmap
{ "legend": { "show": true }, "series": [{ "type": "heatmap", "name": "热力", "grid": { "cols": 24, "rows": 7 }, "cellGap": 2, "showValues": true, "ramp": "viridis" }] }
layout(scatter-dense):"xy"或"xyv"(对齐setDensePoints摄取字节的每点分量数)。ramp(两者通用):预设名"viridis"/"heat"/"cool",或自定义渐变[["#颜色", 位置0~1], ...](≥2 stop,位置升序)。grid.cols/grid.rows(heatmap):各1~512;setHeatCells摄取长度须等于cols*rows。
1.3 竞争对齐新增图型——全部走 create/setOption 的 type 字符串,无新 API:
// rose 玫瑰图(南丁格尔):扇区角度均分、半径随值
{ "series": [{ "type": "rose", "name": "品类", "data": [30, 20, 40, 15, 25] }] }
// arc-progress 圆弧进度:data[0] 取 0~100,整圈底环 + 主题色进度弧 + 中心百分比
{ "series": [{ "type": "arc-progress", "name": "完成率", "data": [72] }] }
// bubble 气泡图:bubblePoints 每点 [x, y, size],size 映射半径 4~24px 半透明
{ "series": [{ "type": "bubble", "name": "分布", "bubblePoints": [[1, 10, 20], [2, 26, 40], [3, 15, 10]] }] }
// mountain 山峰图:area 的尖峰变体(恒直线折角 + 半透明填充,忽略 smooth)
{ "series": [{ "type": "mountain", "name": "流量", "data": [120, 280, 180, 340, 260] }] }
// time-series 时序图:xAxis.type="time" + 毫秒时间戳(数字或字符串均可),
// x 轴自动绘制 "MM-DD" 刻度标签(≤5 个抽稀),标签随 viewport 窗口联动
{ "xAxis": { "type": "time", "data": [1704067200000, 1704153600000, 1704240000000] },
"series": [{ "type": "time-series", "name": "温度", "data": [12, 15, 11] }] }
// mix 混合图:非独立 type——bar+line 多 series 共图,yAxisIndex 选左(0)/右(1)轴
// (右轴量程由 yAxisIndex=1 的系列数据自动计算;量级悬殊的柱+线各按各轴铺满)
{ "series": [
{ "type": "bar", "name": "销量", "data": [120, 200, 150], "yAxisIndex": 0 },
{ "type": "line", "name": "增长率", "data": [5, 12, 8], "yAxisIndex": 1, "smooth": true } ] }
// wordcloud 词云:weight 定字号(12~48px),螺旋布局 + 包围盒碰撞防重叠,
// 上限 200 词(超出截断并出 warning),排不下的词跳过不报错
{ "series": [{ "type": "wordcloud", "name": "标签", "words": [
{ "text": "爆款", "weight": 100 }, { "text": "新品", "weight": 80 }] }] }
// map 地图(choropleth 区域着色):使用方传 GeoJSON 字符串(插件不内置地图数据,
// 不占包体);mapData 键 = GeoJSON properties.adcode(无 adcode 退 name 匹配)
{ "series": [{ "type": "map", "name": "销售额", "geojson": "<GeoJSON 字符串>",
"mapData": { "110000": 30, "310000": 80 }, "ramp": "viridis" }] }
- 新增直角坐标类型(mountain/time-series/bubble/mix)全部响应
setViewport()视口(与 line/scatter 同语义:窗口 zoom-to-fill、命中下标恒为原始下标)。 - 地图为 Phase 1 choropleth(区域值→色阶着色 + 边界描边 + 质心命中);多边形洞(内环)不参与填充(中国省界场景无影响)。下钻/标注/瓦片等完整地图交互请配
uni-nex-geomap插件(同内核投影)。
1.4 ECharts 2D 全对齐新增图型——同样走 create/setOption 的 type 字符串,无新 API:
// effect-scatter 涟漪散点:scatter+外扩涟漪环(大屏热点特效),points 同 scatter
{ "series": [{ "type": "effect-scatter", "name": "热点", "points": [[1, 20], [3, 45], [5, 30]] }] }
// liquid-fill 水球图:data[0] 取 0~100,圆内正弦波水面 + 中心百分比
{ "series": [{ "type": "liquid-fill", "name": "完成度", "data": [65] }] }
// pictorial-bar 象形柱:柱体由 symbol 平铺(circle/rect/triangle),个数≈值
{ "series": [{ "type": "pictorial-bar", "name": "数量", "data": [3, 5, 2, 4], "symbol": "circle" }] }
// sunburst 旭日图:多层径向层次(复用 treemapData 树形结构,内层根/外层子)
{ "series": [{ "type": "sunburst", "name": "分类", "treemapData": [
{ "name": "A", "value": 10, "children": [{ "name": "A1", "value": 6 }, { "name": "A2", "value": 4 }] }] }] }
// theme-river 主题河流:多个同 type series 组成流带组(居中堆叠、宽随值)
{ "series": [
{ "type": "theme-river", "name": "品类A", "data": [10, 20, 15, 30] },
{ "type": "theme-river", "name": "品类B", "data": [5, 15, 25, 10] } ] }
// calendar 日历热力:calendarData 每条 [毫秒时间戳, 值],周×星期格子 + 色阶(GitHub 贡献图式)
{ "series": [{ "type": "calendar", "name": "活跃", "calendarData": [[1704067200000, 3], [1704153600000, 7]] }] }
// parallel 平行坐标:parallelData 每行一样本、每列一维(≤12 维、≤2000 行),各维独立归一化
{ "series": [{ "type": "parallel", "name": "样本", "parallelData": [[80, 120, 0.6, 200], [60, 90, 0.8, 150]] }] }
// tree 树图:节点树分层布局 + 父子连线(复用 treemapData,≤500 节点)
{ "series": [{ "type": "tree", "name": "组织", "treemapData": [
{ "name": "CEO", "children": [{ "name": "研发", "children": [{ "name": "前端" }] }] }] }] }
// geo-lines 地理迁徙:地图背景(geojson)+ 起终点经纬度对的流向弧线
{ "series": [{ "type": "geo-lines", "name": "迁徙", "geojson": "<GeoJSON 字符串>",
"geoLines": [[[116.4, 39.9], [121.5, 31.2]], [[113.3, 23.1], [116.4, 39.9]]] }] }
1.5 内置 3D——同样走 type 字符串;3D 图型当前无命中(tap/hitAt 返回空,roadmap):
// bar3D:bar3dData 每条 [x格, y格, 高度],≤300 柱
{ "series": [{ "type": "bar3D", "name": "销量", "bar3dData": [[0, 0, 3], [1, 0, 5], [0, 1, 2], [1, 1, 7]] }] }
// scatter3D:xyz 点云小立方,≤500 点
{ "series": [{ "type": "scatter3D", "name": "点云", "scatter3dData": [[0, 0, 0], [2, 1, 1], [1, 2, 0.5]] }] }
// surface:grid cols×rows 高度场(行主序),≤64×64,高度映射 viridis 色阶
{ "series": [{ "type": "surface", "name": "波面", "grid": { "cols": 16, "rows": 16 }, "surface3dData": [/* 256 个高度值 */] }] }
// line3D:xyz 顶点序列 3D 折线,≤2000 段
{ "series": [{ "type": "line3D", "name": "轨迹", "line3dData": [[0, 0, 0], [1, 1, 0.5], [2, 0.5, 1]] }] }
hitAt(x, y) 三态返回(1.1.0 新增,命中点/dense 区域统计/未命中):
{ "kind": "point", "seriesIndex": 0, "dataIndex": 12, "value": 8.5, "px": 160.2, "py": 88.4 }
{ "kind": "region", "seriesIndex": 0, "count": 137, "weightSum": 412.6, "xRange": [10.0, 14.0], "yRange": [30.0, 34.0] }
{ "kind": "none" }
限制与防护(内核硬校验,超限报错不静默截断)
- 画布:逻辑尺寸 ≤ 4096×4096,且 逻辑×dpr ≤ 4096;dpr ∈ [1,4]
- series ≤ 64 个;单 series 数据点 ≤ 200 万(折线/面积自动 LTTB 降采样绘制)
- scatter-dense 单 series ≤ 400 万点(
setDensePoints独立上限,二进制摄取通道,与上一条 200 万点普通 series 上限互不影响) - heatmap 网格
cols/rows各 ≤ 512;数值叠加标注(showValues)另有 576 格总数上限,超限降级为不叠字(网格本身照常渲染,getMeta().warnings会提示) - 手势缩放/平移:1.1.0 起
setViewport()可写(渲染层 v1.1 仅scatter-dense消费,其余类型暂不响应),插件不自带 JS 层手势识别——<nex-chart>(H5 可用)未接线,只有 App 专属的<uni-nex-chart-view>原生视图内置了手势闭环 - 图表动画、ECharts option 兼容层:仍不承诺(按需求热度排后续版本)
常见问题
- 中文显示成"豆腐块"(H5):H5 端浏览器沙箱拿不到系统字体,渲染中文前先
registerFontBytes()注册一份 CJK 字体(见"H5 注意事项")。App 端自动加载系统字体,无此问题。 - Android 标准基座报"找不到 jna":本插件含原生扩展库,须自定义基座(云打包;标准基座不含所需运行依赖)。制作自定义基座后即可正常运行。
- 图表模糊:确认
resize/组件收到的是逻辑尺寸——内核会按 dpr 自动超采样;若手动传了物理尺寸再叠 dpr 会超出 4096 上限报错。 - 想要自定义交互(划选/长按菜单等):
tooltip/legendToggle关掉、用getHitData()自建(命中数据带每个绘制点的坐标+值)。 renderToFile路径怎么传:Android 端支持绝对路径、file://URI 及 uni 虚拟路径(uni.env.CACHE_PATH的unifile://、_doc/等,插件内部自动转换);iOS 端请传绝对路径或file://URI。H5 端无文件系统,renderToFile/registerFontFile会抛明确错误,用render()拿 data-URI。<nex-chart>和<uni-nex-chart-view>该用哪个?(1.1.0):常规图表(9 种基础类型)+ H5 兼容 + 只要点击交互,用<nex-chart>;百万点散点/热力图 + 需要拖动手势 + 只在 App 端,用<uni-nex-chart-view>。两者可以在不同页面按需分别使用,不互斥。setDensePoints/setHeatCells之后<uni-nex-chart-view>不重渲?:确认摄取后revision自增了——视图靠revisionprop 变更触发重渲,不会自动感知Chart对象内部数据变化。- 用完
<uni-nex-chart-view>内存没释放?:Chart对象经chartId()注册后会被内部注册表持有Arc引用,视图组件销毁不会自动摘除——务必在页面卸载时手动调用chart.detachView()。
平台说明
| 端 | 实现 | 说明 |
|---|---|---|
| Android | 原生扩展库(arm64-v8a / armeabi-v7a / x86_64) | 需自定义基座(云打包) |
| iOS | 原生扩展库(device + simulator);<uni-nex-chart-view> 原生视图运行时适配中 |
宿主工程需开启"支持 Swift";视图组件下个版本跟进 |
| H5 | 同一渲染内核的浏览器版(内置于插件包,免静态资源配置);<nex-chart> 可用,<uni-nex-chart-view> 暂不支持(App 专属原生视图);API 面 15/18(chartId/detachView/renderFrame 未提供,H5 调用会报 not a function) |
首次调用前 await ensureReady() |
技术支持 / 问题反馈:插件评论区或仓库 issue。

收藏人数:
购买普通授权版(
试用
赞赏(0)
下载 1178
赞赏 0
下载 12437781
赞赏 1934
赞赏
京公网安备:11010802035340号