更新记录

V1.0（2026-06-06）

1.0.0

2026-06-01

• 发布 LayBot Chart X 双引擎图表组件首发版本。
• 支持 Native Canvas 原生图表引擎。
• 支持 WebView ECharts 复杂图表兜底引擎。
• 支持 renderer="native" / "webview" / "auto"。
• Native 模式支持 bar / line / pie / doughnut / funnel。
• Native 模式支持基础 legend、tooltip、click、dark。
• WebView 模式支持 ECharts 常用图表配置。
• WebView 模式支持混合图、radar、gauge、formatter 字符串。
• Auto 模式支持基础图表优先 native，复杂图表切换 webview。
• 新增 WebView loading / error 状态。
• 优化 WebView 不同图表类型连续切换时的残留问题。
• 新增 native / webview / auto 示例页面。

0.1.0-alpha

• 初始化 LayBot Chart X 插件。
• 新增 <laybot-chart-x /> 组件。
• 初步支持 bar / line / pie / doughnut / funnel。
• 支持 setOptions(JSON.stringify(option))。
• 支持基础 legend。
• 支持基础点击事件。
• 支持基础暗黑模式。

平台兼容性

uni-app x(4.87)

其他

LayBot Chart X 双引擎图表组件

LayBot Chart X 是专为 uni-app x App 打造的高性能图表组件，内置 Native Canvas 原生引擎 与 WebView ECharts 兜底引擎，让 uni-app x 项目既能拥有原生渲染的速度，也能兼顾复杂图表场景。

它属于 LayBot Uni X UI 生态组件之一，面向真实 App 项目、数据看板、经营报表、移动端 BI、教培/门店/财务/CRM 等业务系统使用。

官方社区：

https://www.laybot.cn

为什么需要 LayBot Chart X？

uni-app x 正在成为 App 开发的重要技术路线，但在图表领域长期存在几个痛点：

1. App 端原生 Canvas 图表组件稀缺。
2. 很多图表方案依赖 WebView，首次加载慢、资源重。
3. ECharts 能力强，但在移动 App 首页、小卡片和高频统计图中并不总是最优解。
4. uni-app x 原生能力、Android / iOS / 鸿蒙方向适配，需要更贴合 App 场景的图表方案。
5. 业务项目既需要性能，也需要复杂图表兜底。

LayBot Chart X 的目标就是解决这个问题：

基础高频图表走 Native Canvas，复杂图表走 WebView ECharts，统一组件入口，降低项目接入成本。

核心卖点

1. 专为 uni-app x App 场景设计

LayBot Chart X 不是简单搬运 Web 图表库，而是围绕 uni-app x App 端真实使用场景设计。

重点面向：

Android App
iOS App
鸿蒙方向适配
移动端经营看板
App 首页统计卡片
数据中心页面
业务报表页面

Native 模式基于 uni-app x 原生 Canvas API 绘制，避免常规 WebView 图表在 App 中的加载成本。

2. Native Canvas 原生引擎，速度更快

Native 模式不依赖 WebView，也不依赖 echarts.min.js。

适合：

首页趋势图
经营统计卡片
柱状图
折线图
饼图
环形图
漏斗图
移动端小型报表

在常规业务图表中，Native 模式通常具备更好的启动速度和交互响应速度。

推荐用于：

<laybot-chart-x renderer="native" />

3. WebView ECharts 复杂场景兜底

对于雷达图、仪表盘、混合图、复杂 tooltip、dataZoom 等高级图表场景，组件内置 WebView ECharts 模式。

推荐用于：

<laybot-chart-x renderer="webview" />

这样你不需要在项目里同时维护多个图表组件，也不需要为基础图表和复杂图表写两套业务代码。

4. Auto 自动引擎模式

如果你不想关心底层引擎，可以直接使用：

<laybot-chart-x renderer="auto" />

组件会根据图表配置自动选择合适的渲染方式：

基础图表：优先 Native Canvas
复杂图表：自动切换 WebView ECharts

这也是推荐的通用使用方式。

5. 面向长期演进的 Native 图表能力

当前 Native 模式已经支持移动端高频图表能力，并会持续增强。

当前已支持：

柱状图 bar
折线图 line
饼图 pie
环形图 doughnut
漏斗图 funnel
基础 legend
基础 tooltip
点击事件
暗黑模式

后续会持续增强：

更丰富的 tooltip
legend 交互
柱状图圆角/堆叠
折线图 smooth/areaStyle
饼图 label 优化
漏斗图转化率
更多图表类型
更多 ECharts 高频 option 子集

Native 引擎是 LayBot Chart X 的长期核心能力。

适用场景

LayBot Chart X 非常适合：

教培 App 数据中心
门店经营看板
CRM 客户统计
财务统计报表
会员增长趋势
招生转化漏斗
销售额趋势分析
运营数据大屏移动版
企业移动管理端

典型页面：

首页看板
数据中心
经营报表
财务概览
招生统计
用户增长
订单统计
转化分析

渲染模式说明

快速开始

<template>
  <view style="height:260px;">
    <laybot-chart-x
      ref="chartRef"
      height="260px"
      renderer="auto"
      :dark="false"
      @ready="onReady"
      @click="onChartClick"
    />
  </view>
</template>

<script setup lang="uts">
  import { ref } from "vue"

  const chartRef = ref<LaybotChartXComponentPublicInstance | null>(null)

  function onReady() {
    const option = {
      color: ["#17A2AE"],
      tooltip: {
        trigger: "axis"
      },
      legend: {
        show: true
      },
      xAxis: {
        type: "category",
        data: ["周一", "周二", "周三", "周四"]
      },
      yAxis: {
        type: "value"
      },
      series: [
        {
          name: "销售额",
          type: "bar",
          data: [120, 200, 150, 260]
        }
      ]
    } as UTSJSONObject

    chartRef.value!.setOptions(JSON.stringify(option))
  }

  function onChartClick(e : any | null) {
    console.log("chart click", JSON.stringify(e))
  }
</script>

Native 模式示例

<laybot-chart-x
  ref="chartRef"
  height="260px"
  renderer="native"
  @ready="onReady"
/>

const option = {
  color: ["#17A2AE"],
  legend: {
    show: true
  },
  xAxis: {
    type: "category",
    data: ["排课", "已上", "已点名", "未点名"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "课次",
      type: "bar",
      barWidth: 20,
      data: [326, 286, 278, 8]
    }
  ]
} as UTSJSONObject

chartRef.value!.setOptions(JSON.stringify(option))

WebView 模式示例

<laybot-chart-x
  ref="chartRef"
  height="300px"
  renderer="webview"
  @ready="onReady"
/>

const option = {
  tooltip: {
    trigger: "axis"
  },
  legend: {
    data: ["收入", "支出", "利润率"]
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月"]
  },
  yAxis: [
    {
      type: "value"
    },
    {
      type: "value"
    }
  ],
  series: [
    {
      name: "收入",
      type: "bar",
      data: [120, 200, 150, 260]
    },
    {
      name: "支出",
      type: "bar",
      data: [80, 130, 110, 160]
    },
    {
      name: "利润率",
      type: "line",
      yAxisIndex: 1,
      data: [20, 25, 22, 31]
    }
  ]
} as UTSJSONObject

chartRef.value!.setOptions(JSON.stringify(option))

Auto 模式示例

<laybot-chart-x
  ref="chartRef"
  height="300px"
  renderer="auto"
  @ready="onReady"
  @renderer-change="onRendererChange"
/>

function onRendererChange(e : any | null) {
  console.log("renderer changed", JSON.stringify(e))
}

Auto 模式适合大多数业务页面。你只需要传入 option，组件会自动选择合适的引擎。

Props

Methods

Events

点击事件返回示例：

{
  "renderer": "native",
  "componentType": "series",
  "seriesType": "bar",
  "seriesIndex": 0,
  "seriesName": "课次",
  "dataIndex": 1,
  "name": "已上",
  "value": 286,
  "color": "#17A2AE"
}

当前支持能力

Native Canvas 模式

当前支持：

bar
line
pie
doughnut
funnel
legend
tooltip
click
dark

适合：

高性能业务图表
App 首页图表
数据看板
经营统计
移动端报表

WebView ECharts 模式

支持 ECharts 大部分常用配置，适合：

radar
gauge
mixed bar + line
复杂 tooltip
复杂 formatter
dataZoom
visualMap
更多 ECharts 高级图表

formatter 支持

WebView 模式支持函数字符串：

tooltip: {
  formatter: "function(params){return params.name + '：' + params.value;}"
}

Native 模式支持内置 formatter 类型，后续会持续增强。

性能建议

推荐使用方式：

首页、小卡片、常规业务图表：renderer="native" 或 renderer="auto"
复杂报表、高级 ECharts 配置：renderer="webview"
不确定使用哪种模式：renderer="auto"

Native 模式通常明显快于 WebView 模式，尤其适合 App 首页和高频统计卡片。

WebView 模式首次加载需要初始化 WebView 和 ECharts，适合复杂图表页面。

与普通 WebView 图表方案的区别

普通 WebView 图表方案通常只有一种模式：

所有图表都走 WebView

LayBot Chart X 的优势是：

基础图表走 Native，速度快
复杂图表走 WebView，能力强
业务侧统一使用一个组件
后续 Native 能力持续增强

这让项目既能获得性能优势，也能保留复杂图表能力。

当前版本定位

当前版本面向 uni-app x App 项目，重点解决 App 端图表组件稀缺、WebView 图表过重、复杂图表又需要 ECharts 兜底的问题。

推荐用于：

Android App
iOS App
鸿蒙方向适配项目
uni-app x 数据看板
移动端经营报表
业务统计页面

后续演进方向

LayBot Chart X 会持续增强 Native Canvas 图表能力。

后续规划包括：

更多 Native 图表类型
更丰富的 tooltip
legend 交互
柱状图堆叠
折线图平滑曲线
面积图
仪表盘 Native 化
雷达图 Native 化
更多 ECharts 高频 option 子集
更完善的 Android / iOS / 鸿蒙方向适配

Native 是 LayBot Chart X 的长期核心方向，WebView 是复杂能力兜底方案。

常见问题

1. 为什么要做双引擎？

因为移动 App 图表既需要性能，也需要复杂能力。

Native 模式适合高频业务图表，WebView ECharts 模式适合复杂场景。双引擎可以同时满足这两类需求。

2. WebView 模式为什么首次加载慢一些？

WebView 模式需要加载 WebView、HTML 和 ECharts，因此首次加载会比 Native 模式慢。这是 WebView 图表方案的正常特性。

如果图表是首页高频展示，建议使用 Native 或 Auto。

3. Native 模式是不是以后会持续增强？

是的。

Native Canvas 是 LayBot Chart X 的长期核心方向。后续会持续增强更多图表类型、交互能力和 ECharts 高频 option 子集。

4. 是否可以直接使用 ECharts option？

可以使用接近 ECharts 的 option 写法。

Native 模式支持高频子集；复杂配置建议使用 WebView 或 Auto 模式。

5. 是否适合正式项目使用？

适合。

建议：

常规图表：Native / Auto
复杂图表：WebView

对于 uni-app x App 项目，LayBot Chart X 可以作为统一图表组件接入。

LayBot 生态

LayBot Chart X 属于 LayBot 系列生态。

LayBot 致力于为企业项目、软件公司、独立开发者提供可落地、可商业交付、可持续演进的工程化产品。

LayBot 生态包括：

LayBot MPA
LayBot Uni X UI
LayBot Chart X
LayBot Client
LayBot AI 辅助开发方向

LayBot Uni X UI 目标是为 uni-app x App 开发生态提供更实用、更贴近真实项目的组件和模板能力。

版权与授权

版权所有：

Copyright © LayBot

官方社区：

https://www.laybot.cn

未经授权，不得将本插件源码、加密包、改版包、二次封装包进行转售、分发、转授权或作为其他商业组件库的一部分再次发布。

购买授权仅代表在授权范围内使用本插件，不代表获得 LayBot 品牌、商标、文档、官网内容、生态产品的再分发权利。

ECharts 授权说明

WebView 模式依赖 ECharts。

ECharts 官网：

https://echarts.apache.org/

ECharts 使用 Apache License 2.0 协议。商业发布或二次集成时，请保留 ECharts 相关版权声明和许可证说明。

支持与反馈

官方社区：

https://www.laybot.cn

反馈问题时建议提供：

HBuilderX 版本
uni-app x 版本
运行平台 Android / iOS / Harmony
renderer 模式 native / webview / auto
option 示例
复现截图或录屏
控制台日志

LayBot Chart X：专为 uni-app x App 打造的 Native Canvas + WebView ECharts 双引擎图表组件。

友情提示：

若报错引入项目后 编译报错 未找到canvas 大概率是当前自定义基座中没有canvas原生组件，重新生成自定义基座 即可解决；

运行 / 发行自定义基座相关菜单 重新打包自定义调试基座 安装到手机 重新运行项目