更新记录

1.3.4（2026-08-26）

• 示例工程中增加网页文档说明。

1.3.3（2026-08-25）

• 修改文档说明。

1.3.2（2026-08-25）

• 修复已知问题；
• 文档增加加密插件在 H5 / 小程序 / Android / iOS / 鸿蒙各端的使用与编译说明。

平台兼容性

uni-app(4.64)

umi-charts

uni-app 图表组件库。页面使用 Options API + Canvas 2D 绘制，布局与 option 转换在 common 中实现。下载示例项目，导入本插件运行起来，可以一键复制代码，超级方便上手。

本插件面向 uni-app Vue2 / Vue3（.vue）。uni-app x 请使用 umi-charts-x。 要求 HBuilderX ^3.8。组件为 Options API，可同时运行于 Vue2 与 Vue3。

请购买源码授权版。 加密版（普通授权）在 小程序、App（Android / iOS）、鸿蒙 均无法正常编译。这是 DCloud 对 uni-app 前端加密插件的平台限制，不是图表业务代码问题。需要在这些端使用，请购买并导入 源码授权版。

特性：

• 19 种图表组件，easycom 即用
• 同一套 option：H5 / App / 微信小程序 Canvas 2D
• 触摸 Tooltip、深色模式
• 布局 API 入口：插件根 index.js（转发 common/index.js）
• 下载示例项目，导入本插件运行起来，可以一键复制代码，超级方便上手

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

安装

1. 将本插件放入项目 uni_modules/umi-charts
2. 组件符合 easycom，导入后无需 import、无需注册

源码版一般无需手动配置。若编译器未自动识别，在 pages.json 中补充（加密版不要把 easycom 指到内部 .vue）：

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

请购买源码授权版

本插件在插件市场提供 普通授权（加密版） 和 源码授权。两种授权都绑定购买时的 DCloud appid 与 应用包名；改其中一个需重新购买。

正式使用请购买源码授权版。 加密版受 DCloud 对 uni-app 前端加密插件的限制，下列端无法正常编译（运行或发行都会报「付费插件解析失败」等错误）：

源码版按普通 uni_modules 本地编译即可。将插件放到项目 uni_modules/umi-charts，用 HBuilderX 运行或发行到对应端。组件用法各端相同（easycom 直接用 <umi-line> 等）。

如需从脚本调用布局 API，从插件根导入（不要 import 插件内部文件）：

import { mkOption, mkSeries, toLineOpt, layoutLine } from '@/uni_modules/umi-charts'

uni-app x 请改用 umi-charts-x，不要把本插件用在 uni-app x 工程。

编不过时

1. 是否使用了加密版去编小程序 / App / 鸿蒙 → 换源码授权版。
2. 加密版不要直接引入 uni_modules/umi-charts 下的内部文件，也不要在 pages.json 里把 easycom 指到加密后的 .vue。
3. appid、包名、Bundle ID 是否与购买不一致。

快速开始

uni-app Vue 中直接传普通对象即可，不必调用 mkOption()。

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

<script>
export default {
  data() {
    return {
      option: {
        xAxis: { data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] },
        series: [{ type: 'line', data: [150, 230, 224, 218, 135, 147, 260] }]
      }
    }
  }
}
</script>

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

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

如需从脚本调用布局 API，从插件根导入：

import { mkOption, mkSeries, toLineOpt, layoutLine } from '@/uni_modules/umi-charts'

组件列表

通用属性

option 配置

series 常用字段：type / name / data / color / names。

xAxis.axisLabel

与 ECharts 对齐，常用字段：

xAxis: {
  type: 'category',
  data: ['很长文字标签1', '很长文字标签2', '标签3'],
  axisLabel: {
    interval: 0,
    rotate: -45,
    margin: 10,
    fontSize: 10
  }
}

折线 / 面积

smooth、areaStyle.opacity、symbol、symbolSize、showSymbol、lineStyle、step。

柱状 / 象形柱

type: 'bar' 或 'pictorialBar'，象形柱 symbol 如 'diamond'。

饼图

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

散点 / 气泡 / 涟漪

dataX / data / r；涟漪另有 brush / period / scale / waves，组件用 umi-effect-scatter，type: 'effectScatter'。

K 线 / 盒须

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

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

雷达 / 热力 / 仪表盘

雷达：data、radarMax。热力：data 按 xAxis.data × yAxis.data 行优先展开，min / max。仪表盘：data[0] 为当前值，min / max / name / unit。

关系 / 路径 / 树 / 桑基

Tooltip

与 ECharts 接近：formatter 字符串模板 {a} {b} {c} {d}，或 formatterFn。position 为 top / bottom / left / right / inside。可用 backgroundColor / borderColor / textStyle / extraCssText。

注意事项

1. Vue 传普通对象：不必 mkOption() / mkSeries()。
2. 组件与 type 对应：例如 umi-pie 的 series.type 应为 'pie'。
3. 深色模式：backgroundColor: '#000000'（或 #000 / black）。
4. 关闭 Tooltip：tooltip: { show: false }。
5. 尺寸单位：width / height 纯数字按 rpx。
6. 不采集数据、无广告、无需额外系统权限。

免责声明

加密版（普通授权）在 小程序、App（Android / iOS）、鸿蒙 均无法正常编译。若需在这些端使用，请购买并使用 源码授权版。详见上文「请购买源码授权版」。

隐私、权限声明

1. 本插件需要申请的系统权限列表：无
2. 本插件采集的数据：无
3. 本插件是否包含广告：无