更新记录

1.0.0（2026-06-07） 下载此版本

初次提交

平台兼容性

uni-app x(5.07)

其他

laoqianjunzi-echart

laoqianjunzi-echart 是一个面向 uni-app x 的原生 Canvas 图表插件，提供统一的数据模型、组件化接入方式和跨端编译能力，适用于 Web、Android、Harmony、iOS 场景。

插件以 option 配置为核心，同时支持一组内置预设配置，适合快速接入常用图表，也适合在业务项目中按统一数据模型继续扩展。

功能特性

• 原生 Canvas 渲染，不依赖 WebView
• 统一支持 Web、Android、Harmony、iOS
• 支持组件方式接入，适配 uni-app x 页面和组件树
• 支持通用图表配置和预设图表配置两种使用模式
• 支持柱状、折线、山峰、饼图、环图、雷达、仪表盘、环形进度、水位球、散点、气泡、K 线、漏斗、热力图
• 支持运行时更新数据、更新动画时长、切换动画开关、导出图片、读取绘制状态
• 支持点击命中、图例切换、缩放动作、框选、拖拽、十字准星等增强交互能力

平台支持

根据当前插件配置与项目内验证结果：

• Web：支持
• Android：支持，minVersion 为 21
• Harmony：支持
• iOS：支持

说明：当前仓库内已完成 Web、Android、Harmony 的真实编译验证；iOS 是否能在本机继续运行，仍取决于签名或基座环境。

目录结构

uni_modules/laoqianjunzi-echart/
├─ components/
│  └─ laoqianjunzi-echart/
│     └─ laoqianjunzi-echart.uvue
├─ pages/
│  └─ index.uvue
├─ utssdk/
│  ├─ interface.uts
│  ├─ adapter.uts
│  ├─ engine.uts
│  ├─ index.uts
│  ├─ web/
│  ├─ app-android/
│  ├─ app-harmony/
│  └─ app-ios/
└─ package.json

快速开始

1. 组件方式使用

<template>
  <laoqianjunzi-echart :option="chartOption" height="320px" />
</template>

<script setup lang="ts">
const chartOption = {
  title: '经营走势',
  subtitle: '柱状 + 折线',
  chartType: 'bar',
  categories: ['一月', '二月', '三月', '四月'],
  series: [
    {
      type: 'bar',
      name: '订单量',
      color: '#2563eb',
      showValue: true,
      data: [120, 148, 132, 180]
    },
    {
      type: 'line',
      name: '客单价',
      color: '#f97316',
      data: [52, 60, 58, 68]
    }
  ]
}
</script>

2. 预设方式使用

<template>
  <laoqianjunzi-echart :presetOptions="presetOption" height="320px" />
</template>

<script setup lang="ts">
const presetOption = {
  type: 'radar1',
  title: '渠道覆盖',
  total: 100,
  series: ['零售', '企业', '渠道', '复购', '口碑', '服务'],
  data: [
    { seriesName: '零售', value: 72 },
    { seriesName: '企业', value: 84 },
    { seriesName: '渠道', value: 68 },
    { seriesName: '复购', value: 58 },
    { seriesName: '口碑', value: 79 },
    { seriesName: '服务', value: 88 }
  ]
}
</script>

组件属性

组件事件

组件实例方法

在 init 事件中或 ref 引用组件后可访问以下方法：

通用图表类型

chartType 或 series[].type 当前支持以下类型：

预设图表类型

presetOptions.type 当前支持以下预设类型：

通用配置说明

顶层配置

常用顶层字段如下：

序列配置

series 中常用字段：

数据格式示例

柱状 / 折线 / 山峰

series: [
  {
    type: 'bar',
    name: '订单量',
    data: [120, 148, 132, 180]
  },
  {
    type: 'line',
    name: '客单价',
    data: [52, 60, 58, 68]
  }
]

饼图 / 环图

series: [
  {
    type: 'pie',
    name: '来源',
    data: [
      { name: '自然流量', value: 42, color: '#2563eb' },
      { name: '私域复购', value: 26, color: '#14b8a6' }
    ]
  }
]

雷达图

radar: {
  indicators: [
    { name: '执行力', max: 100 },
    { name: '稳定性', max: 100 }
  ]
},
series: [
  {
    type: 'radar',
    name: '本月',
    data: [84, 72]
  }
]

散点 / 气泡

series: [
  {
    type: 'scatter',
    name: '用户',
    data: [
      { name: 'A-17', x: 8, y: 126, size: 12 },
      { name: 'B-09', x: 14, y: 188, size: 14 }
    ]
  }
]

K 线

series: [
  {
    type: 'candlestick',
    name: 'BTC/USDT',
    data: [
      { open: 96, close: 104, low: 92, high: 108 },
      { open: 104, close: 101, low: 98, high: 110 }
    ]
  }
]

热力图

xAxis: {
  type: 'category',
  data: ['Mon', 'Tue', 'Wed']
},
yAxis: {
  type: 'category',
  data: ['09:00', '12:00']
},
series: [
  {
    type: 'heatmap',
    data: [
      { value: [0, 0, 18] },
      { value: [1, 0, 26] }
    ]
  }
]

主题配置

theme 常用字段：

示例：

const chartTheme = {
  backgroundColor: '#f4f7ff',
  gridColor: '#d4dcf3',
  axisLineColor: '#7c8aa8',
  axisTextColor: '#62708e',
  textColor: '#11203a',
  mutedColor: '#73819b'
}

动作分发

组件实例支持通过 dispatchAction 触发交互动作，当前支持：

• showTip
• hideTip
• highlight
• downplay
• select
• unselect
• legendToggle
• setInteractionMode
• resetZoom
• zoomRange

示例：

chartRef.value?.dispatchAction({
  type: 'showTip',
  seriesIndex: 0,
  dataIndex: 2
})

chartRef.value?.dispatchAction({
  type: 'setInteractionMode',
  mode: 'brush'
})

演示页面

插件内置演示页：

• uni_modules/laoqianjunzi-echart/pages/index

如果当前工程已经在 pages.json 中注册该页面，可直接运行查看效果。

使用建议

• 图表容器建议明确设置高度，避免容器高度为 0 导致无法绘制
• 当页面内容较长且需要 App 端滚动时，建议外层使用 <scroll-view>
• 当仅更新数据时，优先使用 drawing(data) 或 updatePresetData(data)，避免重复构造完整配置
• 当需要跨端稳定布局时，避免依赖 gap，优先使用显式 margin
• 当需要更复杂的业务组合图时，优先使用 option 模式而不是预设模式

当前版本说明

当前文档描述的是插件现有独立能力与当前组件 API，不包含任何历史插件命名、兼容层或旧接口迁移说明。