LimeEchart 📊

为 UniApp 和 UniAppX 提供 ECharts 图表兼容支持，使 ECharts 图表能在 H5、小程序、App 等多端环境中正常运行。

特性 ✨

📱 跨平台兼容：支持 H5、微信小程序、支付宝小程序、App 等多端
🎯 简单易用：统一 API，使用方式与原生 ECharts 基本一致
⚡ 性能优化：针对不同平台进行了渲染优化
🔄 双框架支持：同时支持 uni-app 和 uni-app-x

文档与示例 📚

更多详细文档与示例：

安装方法 📦

安装

在uni-app插件市场中搜索并导入lime-echart
导入后重新编译项目
在页面中直接使用 l-echart 组件

CLI 项目安装

bash

# 下载插件到项目的 src/uni_modules 目录
mkdir -p src/uni_modules
# 将插件解压到上述目录

前置依赖 ⚙️

小程序平台（重点说明）

小程序平台必须下载并引入 ECharts 自定义构建包：

小程序中引入ECharts有两种方式：
- 方式一：本地构建文件
  - 访问 ECharts 在线构建下载所需图表类型的精简版
  - 注意：在线构建工具仅支持生成UMD格式（默认，echarts.min.js），通过 require 引入
- 方式二：npm安装
  - 通过npm安装：npm install echarts --save
  - 通过 import * as echarts from 'echarts' 引入
- 建议只勾选项目所需的图表类型和组件，以减小文件体积
文件放置位置：
- 📁 主包：将文件放入项目根目录的 static 文件夹
- 📁 分包：将文件放入对应分包的 static 文件夹（如 pagesB/static/）

相对路径引用示例：

// UMD格式 - 页面位于主包根目录 - 相对路径引用示例（仅在线构建或本地文件使用）
// ├─pages
// │  └─index
// │     └─index.vue
// └─static
const echarts = require('../../static/echarts.min.js')

// UMD格式 - 页面位于主包三层目录 - 相对路径引用示例（仅在线构建或本地文件使用）
// ├─pages
// │  └─user
// │     └─settings
// │        └─profile.vue
// └─static
const echarts = require('../../../static/echarts.min.js')

// UMD格式 - 页面位于分包中 - 相对路径引用示例（仅在线构建或本地文件使用）
// ├─pagesB (分包)
// │  ├─static
// │  └─detail
// │     └─detail.vue
const echarts = require('../static/echarts.min.js')

// ES模块格式 
import * as echarts from 'echarts'

注意：
require 是小程序平台特有的API，仅在小程序环境下使用
路径是相对于当前页面文件的路径，请根据实际项目结构调整路径

使用示例 🎯

图表配置项示例

以下是一个柱状图的配置项示例，在后续使用示例中将引用此配置：

// 图表配置项示例 - 柱状图
const chartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    confine: true
  },
  legend: {
    data: ['热度', '正面', '负面']
  },
  xAxis: [
    {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#999999'
        }
      },
      axisLabel: {
        color: '#666666'
      }
    }
  ],
  yAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
      axisLine: {
        lineStyle: {
          color: '#999999'
        }
      },
      axisLabel: {
        color: '#666666'
      }
    }
  ],
  series: [
    {
      name: '热度',
      type: 'bar',
      label: {
        show: true,
        position: 'inside'
      },
      data: [300, 270, 340, 344, 300, 320, 310]
    },
    {
      name: '正面',
      type: 'bar',
      stack: '总量',
      label: {
        show: true
      },
      data: [120, 102, 141, 174, 190, 250, 220]
    },
    {
      name: '负面',
      type: 'bar',
      stack: '总量',
      label: {
        show: true,
        position: 'left'
      },
      data: [-20, -32, -21, -34, -90, -130, -110]
    }
  ]
}

说明：在实际项目中，可以根据需求修改上述配置项。
更多配置选项请参考 ECharts 官方文档
查看更多图表样式请访问 ECharts 官方示例

uni-app 使用方式

组合式 API 方式

html

<template>
  <view style="width: 750rpx; height: 750rpx;">
    <l-echart ref="chartRef" @finished="initChart"></l-echart>
  </view>
</template>

import { ref } from 'vue';

const chartRef = ref(null)

// 仅在小程序环境下引入 ECharts
// #ifdef MP
const echarts = require('../../static/echarts.min.js') // 根据实际路径调整
// #endif
// #ifndef MP
const echarts = null // H5 和 App 环境不需要手动引入
// #endif

// 使用上面定义的图表配置项
const option = chartOption

// 初始化图表
const initChart = async () => {
  if (!chartRef.value) return
  
  try {
    const chart = await chartRef.value.init(echarts)
    chart.setOption(option)
  } catch (error) {
    console.error('图表初始化失败:', error)
  }
}

选项式 API 方式

html

<template>
  <view style="width: 750rpx; height: 750rpx;">
    <l-echart ref="chartRef" @finished="initChart"></l-echart>
  </view>
</template>

// 仅在小程序环境下引入 ECharts
// #ifdef MP
const echarts = require('../../static/echarts.min.js') // 根据实际路径调整
// #endif
// #ifndef MP
const echarts = null // H5 和 App 环境不需要手动引入
// #endif

export default {
  data() {
    return {
      // 使用上面定义的图表配置项
      option: chartOption,
      // 图表实例，用于后续操作
      chartInstance: null,
    }
  },
  methods: {
    // 初始化图表
    async initChart() {
      if (!this.$refs.chartRef) return
      
      try {
        this.chartInstance = await this.$refs.chartRef.init(echarts)
        this.chartInstance.setOption(this.option)
      } catch (error) {
        console.error('图表初始化失败:', error)
      }
    },
    // 更新图表数据
    updateChart(newOption) {
      if (this.chartInstance) {
        this.chartInstance.setOption(newOption)
      } else if (this.$refs.chartRef) {
        this.$refs.chartRef.setOption(newOption)
      }
    },
    // 调整图表大小
    resizeChart() {
      if (this.$refs.chartRef) {
        this.$refs.chartRef.resize()
      }
    }
  },
  // 页面卸载时销毁图表实例
  beforeUnmount() {
    if (this.$refs.chartRef) {
      this.$refs.chartRef.dispose()
    }
  }
}

uni-app-x 使用方式

html

<template>
  <view style="width: 100%; height: 408px;">
    <l-echart ref="chartRef" @finished="initChart"></l-echart>
  </view>
</template>

const chartRef = ref<LEchartComponentPublicInstance | null>(null)

// 仅在小程序环境下引入 ECharts
// #ifdef MP
const echarts = require('../../static/echarts.min.js') // 根据实际路径调整
// #endif
// #ifndef MP
const echarts = null
// #endif

// 使用上面定义的图表配置项
const option = chartOption

// 初始化图表
const initChart = async () => {
  if (chartRef.value === null) return
  
  try {
    const chart = await chartRef.value.init(echarts, null)
    chart.setOption(option)
  } catch (error) {
    console.error('图表初始化失败:', error)
  }
}

高级功能 💪

数据更新 🔄

图表支持动态更新数据，有两种常用方式：

方式一：通过组件引用更新

// Vue 3 Composition API
chartRef.value?.setOption(newOption)

// Vue 2 Options API
this.$refs.chart.setOption(newOption)

方式二：通过图表实例更新

// 在初始化时保存图表实例
let chartInstance = null

const initChart = async () => {
  if (!chartRef.value) return
  chartInstance = await chartRef.value.init(echarts)
  chartInstance.setOption(option)
}

// 后续更新数据
const updateChart = () => {
  if (chartInstance) {
    chartInstance.setOption(newData)
  }
}

图表大小调整 📏

当容器大小改变时，可以调用 resize 方法重新调整图表尺寸：

// 自动适应容器大小
chartRef.value?.resize()

// 手动指定尺寸
chartRef.value?.resize({
  width: 375,  // 像素值
  height: 375  // 像素值
})

💡 提示：在窗口大小变化或屏幕旋转时，可以监听相应事件并调用 resize 方法。

Vue 2 兼容配置 🔄

如果您的项目使用 Vue 2，需要先安装并引入 Vue Composition API：

// main.js
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考：Vue Composition API 官方文档

组件标签说明 🏷️

标签名	说明
`l-echart`	正式使用的组件标签
`lime-echart`	演示用组件标签

快速预览 🚀

导入插件后，可以直接使用演示标签查看效果：

html

<template>
  <view style="width: 100%; height: 400px;">
    <!-- 演示组件 -->
    <lime-echart />
  </view>
</template>

常见问题与解决方案 🐛

平台特殊问题

微信小程序

画布层级问题：微信开发工具中 canvas 可能出现层级过高或不跟随页面滚动的情况，真机环境下通常不受影响
Tooltip 阴影：如需去除文字阴影，可添加配置：tooltip.shadowBlur = 0

钉钉小程序

文字测量精度：由于钉钉小程序没有原生 measureText，字体粗细测量可能不够精确

安全扫描警告：如遇到 Uint8Clamped 安全问题，可按以下方式修改 ECharts 文件：

// 查找类似代码并修改
// 原代码
["Int8","Uint8","Uint8Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e+"Array]"]
// 修改为
["Int8","Uint8","Uint8_Clamped","Int16","Uint16","Int32","Uint32","Float32","Float64"],(function(t,e){return t["[object "+e.replace('_','')+"Array]"]

功能限制 ⚠️

Toolbox：不支持 saveImage 功能
Lines 图表：不支持 trailLength 属性，请设置为 0
DataZoom：H5 平台不建议设置 showDetail 属性
自定义 Tooltips：uvue 和 vue 中不支持 DOM 操作相关的自定义 Tooltips

API 参考 📝

Props

参数	说明	类型	默认值	版本
l-style	自定义样式	string	-	-
type	指定 canvas 类型（废除）	string	"2d"	-
is-disable-scroll	触摸图表时是否禁止页面滚动	boolean	false	-
beforeDelay	延迟初始化时间（毫秒）	number	30	-
enableHover	PC端是否启用鼠标悬浮效果（废除）	boolean	false	-
landscape	是否旋转90度，模拟横屏效果	boolean	false	-

组件方法

方法名	参数	返回值	说明
init	`echarts: Object, config?: Object`	`Promise<ChartInstance>`	初始化图表实例
setOption	`option: Object`	`void`	设置或更新图表配置项
resize	`size?: {width: number, height: number}`	`void`	调整图表尺寸
clear	无	`void`	清空图表内容
dispose	无	`void`	销毁图表实例
showLoading	无	`void`	显示加载动画
hideLoading	无	`void`	隐藏加载动画
canvasToTempFilePath	`options: Object`	`Promise<Object>`	生成图表图片，与 uni-app 官方 API 类似，但无需传入 canvasId

事件

事件名	参数	说明
finished	无	图表准备就绪时触发，此时可调用 init 方法

其他平台依赖说明 🌐

uni-app 非 nvue 端

推荐使用 npm 安装
通过 npm 安装可以获得完整的 ES 模块格式支持
bash
```
npm install echarts --save
```
1
安装后可直接在代码中通过 import 引入
js
```
import * as echarts from 'echarts'
```
1

uni-app-x 非 App 端

推荐使用 npm 安装获取 ES 模块格式
bash
```
npm install echarts --save
```
1
ES 模块格式具有更好的性能和构建优化支持
通过 import 引入使用
js
```
import * as echarts from 'echarts'
```
1

💡 注意：H5 和 App 原生环境通常不需要手动引入 ECharts，组件会自动处理。只有在需要自定义 ECharts 版本或配置时才需要手动引入。

技术支持 🆘

如果您在使用过程中遇到问题，可以通过以下方式获取帮助：

查看在线文档获取详细使用说明
检查常见问题章节查找解决方案

贡献与支持 💙

如果您觉得本插件对您有帮助，欢迎给作者点个赞或提供支持：

支付宝	微信

您的支持是作者持续开发和维护的动力！ 🌟

源代码

组件源码

LimeEchart 📊 ​

特性 ✨ ​

文档与示例 📚 ​

安装方法 📦 ​

安装 ​

CLI 项目安装 ​

前置依赖 ⚙️ ​

小程序平台（重点说明） ​

使用示例 🎯 ​

图表配置项示例 ​

uni-app 使用方式 ​

组合式 API 方式 ​

选项式 API 方式 ​

uni-app-x 使用方式 ​

高级功能 💪 ​

数据更新 🔄 ​

方式一：通过组件引用更新 ​

方式二：通过图表实例更新 ​

图表大小调整 📏 ​

Vue 2 兼容配置 🔄 ​

组件标签说明 🏷️ ​

快速预览 🚀 ​

常见问题与解决方案 🐛 ​

平台特殊问题 ​

微信小程序 ​

钉钉小程序 ​

功能限制 ⚠️ ​

API 参考 📝 ​

Props ​

组件方法 ​

事件 ​

其他平台依赖说明 🌐 ​

uni-app 非 nvue 端 ​

uni-app-x 非 App 端 ​

技术支持 🆘 ​

贡献与支持 💙 ​

源代码 ​

LimeEchart 📊

特性 ✨

文档与示例 📚

安装方法 📦

安装

CLI 项目安装

前置依赖 ⚙️

小程序平台（重点说明）

使用示例 🎯

图表配置项示例

uni-app 使用方式

组合式 API 方式

选项式 API 方式

uni-app-x 使用方式

高级功能 💪

数据更新 🔄

方式一：通过组件引用更新

方式二：通过图表实例更新

图表大小调整 📏

Vue 2 兼容配置 🔄

组件标签说明 🏷️

快速预览 🚀

常见问题与解决方案 🐛

平台特殊问题

微信小程序

钉钉小程序

功能限制 ⚠️

API 参考 📝

Props

组件方法

事件

其他平台依赖说明 🌐

uni-app 非 nvue 端

uni-app-x 非 App 端

技术支持 🆘

贡献与支持 💙

源代码