更新记录

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 个 APIChart.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 }
}
  • 字段一律 camelCaseseries[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~512setHeatCells 摄取长度须等于 cols*rows

1.3 竞争对齐新增图型——全部走 create/setOptiontype 字符串,无新 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/setOptiontype 字符串,无新 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_PATHunifile://_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 自增了——视图靠 revision prop 变更触发重渲,不会自动感知 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/18chartId/detachView/renderFrame 未提供,H5 调用会报 not a function) 首次调用前 await ensureReady()

技术支持 / 问题反馈:插件评论区或仓库 issue。

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据。所有渲染均在本地完成,无任何网络请求、不发送数据到任何服务器。

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

暂无用户评论。