更新记录

1.2.1（2026-08-22）

• 修复已知问题；
• uts加密插件鸿蒙平台无法正常编译，请购买源码授权版。

1.2.0（2026-08-22）

• 支持vue2写法；
• uts加密插件鸿蒙平台无法正常编译，请购买源码授权版。

1.1.0（2026-08-22）

• 修复已知问题；
• uts加密插件鸿蒙平台无法正常编译，请购买源码授权版。

平台兼容性

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。

特性：

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

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

安装

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

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

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

快速开始

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。

折线 / 面积

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

隐私、权限声明

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