更新记录

1.1.0（2026-08-22）

• 上传示例代码项目；
• uts加密插件鸿蒙平台无法正常编译，请购买源码授权版。

1.0.0（2026-08-21）

• 首次发布：19 种图表组件，App 原生绘制，小程序 Canvas 2D 绘制；
• uts加密插件鸿蒙平台无法正常编译，请购买源码授权版。

平台兼容性

uni-app x(4.41)

umi-charts-x

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

仅支持 uni-app x（uvue + UTS），不支持传统 uni-app（vue/nvue）。
要求 HBuilderX ^4.41、uni-app x ^4.41。

特性：

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

查询配置： umi-charts-x 配置文档

安装

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>

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, TipAsyncCb } from '@/uni_modules/umi-charts-x'

t.formatterFn = (p : TooltipParams, ticket : string, cb : TipAsyncCb) : 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 : TipAsyncCb) : 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 为类目名 | | 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'。

饼图

类目写在 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。
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'。
7. 不采集数据、无广告、无需额外系统权限。

更新日志

见 changelog.md。

隐私、权限声明

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