更新记录

2.1.0（2026-09-13）

• 适配鸿蒙、安卓、ios等设备的折叠屏、阔折叠形态；
• 完善折叠屏适配示例代码。

2.0.0（2026-09-13）

• 适配 uni-app x 蒸汽模式（vapor），与 VDOM 共用同一套组件和 option；
• 完善文档说明。

1.3.6（2026-08-26）

• 修复已知问题。
• 示例工程项目中增加文档。

平台兼容性

uni-app x(4.81)

其他

umi-charts-x

uni-app x 图表组件库。App 端使用原生 DrawableContext 绘制，小程序 / 鸿蒙元服务使用 Canvas 2D 绘制，配置风格接近 ECharts option。

仅支持 uni-app x（uvue + UTS），不支持传统 uni-app（vue/nvue）。 同时支持 VDOM 与 vapor（蒸汽模式）。 要求 HBuilderX ^4.41、uni-app x ^4.41。 导入示例项目，可以查看图表渲染效果以及示例代码。

特性：

• 19 种图表组件，easycom 即用
• 支持 vapor 蒸汽模式（与 VDOM 同一套组件与 option）
• App 原生绘制，小程序 Canvas 2D，同一套 option
• 触摸 Tooltip、深色模式、折叠屏宽屏自适应
• UTS 实现，支持 Android / iOS / 鸿蒙 / 微信小程序，上述端均开启摇树

查询配置： https://umi-d3gs10wf324913a53-1306321853.tcloudbaseapp.com/umi/umi-charts.html

安装

1. 从 DCloud 插件市场 导入本插件到项目 uni_modules/umi-charts-x
2. 组件符合 easycom 规范，导入后无需 import、无需注册，页面中直接使用标签即可

若编译器未自动识别，在项目 pages.json 中补充：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^umi-(.*)": "@/uni_modules/umi-charts-x/components/umi-$1/umi-$1.uvue"
    }
  }
}

快速开始

UTS 中请使用 mkOption() / mkSeries() 创建配置，不要写对象字面量。

<template>
  <umi-line :option="option" :height="440"></umi-line>
</template>

<script setup lang="uts">
  import { mkOption, mkSeries, ECOption, SeriesOpt } from '@/uni_modules/umi-charts-x'

  const option = computed(() : ECOption => {
    const o = mkOption()
    const xa = o.xAxis
    if (xa != null) {
      xa.data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] as string[]
    }
    const s = mkSeries()
    s.data = [150, 230, 224, 218, 135, 147, 260] as number[]
    o.series = [s] as SeriesOpt[]
    return o
  })
</script>

柱状图只需把组件换成 umi-bar，并把 s.type 设为 'bar'：

<umi-bar :option="option" :height="440"></umi-bar>

s.type = 'bar'

组件列表

通用属性

所有图表组件属性一致：

示例：

<umi-line :option="option" width="100%" :height="440"></umi-line>
<umi-pie :option="option" height="500rpx"></umi-pie>

折叠屏 / 宽屏自适应

图表组件内部会监听 onResize 并重绘，折叠、展开、分屏后画布会跟着变。若业务上要按窗口宽度换尺寸或布局，在页面里改 width / height 即可。

示例工程首页「折线图」卡片，以及 common/demos.uts：

鸿蒙栅格：xs [0, 320)、sm [320, 600)、md [600, 840)、lg [840, +∞)。通常 < 600 小屏（折叠态），>= 600 大屏（展开 / 阔折叠）。

推荐写法（与 line-fold-resize 一致）：

<template>
  <umi-line :option="option" :width="chartW" :height="chartH"></umi-line>
</template>

const chartW = ref(280)
const chartH = ref(180)

const syncSize = (windowWidth : number) => {
  if (windowWidth < 600) {
    chartW.value = 280
    chartH.value = 180
  } else {
    chartW.value = 640
    chartH.value = 280
  }
}

((res) => {
  syncSize(res.size.windowWidth)
})

syncSize(uni.getWindowInfo().windowWidth)

option 配置

完整 option 字段可在线 查询配置。

通过 mkOption() 得到 ECOption：

mkOption() 已创建 tooltip，访问前判空。五大类自定义：

内容自定义 formatter

字符串模板（与 ECharts 相同占位符）：

const t = o.tooltip
if (t != null) {
  t.formatter = '{b}<br/>{a}：{c}'
}

{a} 系列名，{b} 类目，{c} 数值，{d} 百分比；多系列 {a0} {c1}。

函数形式：

import { TooltipParams } from '@/uni_modules/umi-charts-x'

t.formatterFn = (p : TooltipParams, ticket : string, cb : (tk : string, html : string) => void) : string => {
  return p.title + '<br/>' + p.items[0].seriesName + '：' + p.items[0].valueText
}

样式自定义

import { mkTooltipTextStyle } from '@/uni_modules/umi-charts-x'

t.backgroundColor = 'rgba(255,255,255,0.96)'
t.borderColor = '#5470C6'
t.borderWidth = 1
t.padding = 12
const ts = mkTooltipTextStyle()
ts.color = '#1D2129'
ts.fontSize = 14
t.textStyle = ts
t.extraCssText = 'background:#fff;color:#333'

位置自定义

t.position = 'top'   // top / bottom / left / right / inside
t.confine = true
t.positionFn = (point : number[], _p : TooltipParams, size : number[]) : number[] => {
  return [point[0] + 12, point[1] - size[1] - 8] as number[]
}

异步 tooltip

与 ECharts 相同：先返回占位文案，再 callback(ticket, html)。

t.formatterFn = (p : TooltipParams, ticket : string, cb : (tk : string, html : string) => void) : string => {
  setTimeout(() => {
    cb(ticket, p.title + '<br/>已加载')
  }, 600)
  return p.title + '<br/>加载中...'
}

完全自定义内容

uni-app x 没有浏览器 DOM，提示画在 Canvas 上。用 formatterFn 返回完整 HTML 字符串（支持 <br/>，其余标签会去掉），再用 backgroundColor / extraCssText 做皮肤。若要用自己的 view 浮层：t.showContent = false，在 formatterFn 里更新自己的界面。 | xAxis | AxisOpt \| null | 类目轴。data 为类目名，labelInterval 等控制刻度文字 | | yAxis | AxisOpt \| null | 数值轴。热力图等可用 yAxis.data，同样支持标签字段 | | series | SeriesOpt[] | 系列，至少一项 |

mkSeries() 常用字段：

折线 / 面积

import { mkOption, mkSeries, mkAreaStyle, ECOption, SeriesOpt } from '@/uni_modules/umi-charts-x'

const option = computed(() : ECOption => {
  const o = mkOption()
  const xa = o.xAxis
  if (xa != null) {
    xa.data = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] as string[]
  }
  const s = mkSeries()
  s.data = [820, 932, 901, 934, 1290, 1330, 1320] as number[]
  s.smooth = true
  s.symbol = 'none'
  const a = mkAreaStyle()
  a.opacity = 0.35
  s.areaStyle = a
  o.series = [s] as SeriesOpt[]
  return o
})

柱状 / 象形柱

s.type = 'bar'
s.color = '#FF7A45'

象形柱：type = 'pictorialBar'，symbol 如 'diamond'。

X 轴标签

对应 ECharts xAxis.axisLabel，字段写在 xAxis 上（iOS 不能用嵌套 axisLabel 对象）：

const xa = o.xAxis
if (xa != null) {
  xa.data = ['很长文字标签1', '很长文字标签2', '标签3'] as string[]
  xa.labelRotate = -45
  xa.labelMargin = 10
  xa.labelFontSize = 10
}

饼图

类目写在 xAxis.data（或 series.names），数值写在 series.data：

s.type = 'pie'
s.data = [36, 24, 28, 12] as number[]

散点 / 气泡 / 涟漪

s.type = 'scatter'
s.dataX = [12, 22, 28, 36, 45, 52, 61, 72] as number[]
s.data = [18, 32, 20, 44, 28, 50, 36, 58] as number[]
s.r = [10, 22, 14, 30, 18, 36, 16, 26] as number[]

涟漪散点使用 umi-effect-scatter，type = 'effectScatter'。

K 线 / 盒须

K 线：open / close / low / high，涨跌色 upColor / downColor。

盒须：boxMin / q1 / median / q3 / boxMax。

雷达 / 热力 / 仪表盘

s.type = 'gauge'
s.data = [72] as number[]
s.min = 0
s.max = 100
s.name = '完成率'
s.unit = '%'

关系 / 路径 / 树 / 桑基

工具方法

从 @/uni_modules/umi-charts-x 引入：

注意事项

1. 仅 uni-app x：页面需为 .uvue，脚本为 UTS。支持 VDOM 与 vapor（蒸汽模式）。
2. 配置必须用工厂方法：UTS 不能把普通对象当成 ECOption / SeriesOpt 使用。
3. 组件与 type 对应：例如 umi-pie 的 series.type 应为 'pie'。
4. 深色模式：设置 option.backgroundColor = '#000000'（或 #000 / black）。
5. 关闭 Tooltip：o.tooltip!.show = false（先判空）。
6. 尺寸单位：width / height 传入纯数字时按 rpx，也可传 '100%'、'400rpx'、'320px'。
7. 折叠屏：组件会随窗口重绘；换尺寸参考首页折线图 line-fold-px、line-fold-resize（见上文「折叠屏 / 宽屏自适应」）。
8. 不采集数据、无广告、无需额外系统权限。

隐私、权限声明

1. 本插件需要申请的系统权限列表：无
2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：插件不采集任何数据
3. 本插件是否包含广告：无