更新记录

2.0.0（2026-07-18）

新功能

• option prop：直接传入图表配置，自动 setOption，支持响应式更新，无需 useEcharts
• autoRestore prop：v-if 切换时自动缓存/回放图表数据，默认开启
• lStyle prop：自定义组件根元素样式
• landscape prop：横屏旋转模式，触摸坐标自动交换
• Web 端支持 ResizeObserver 自动响应容器尺寸变化
• Web 端完整支持 PC 浏览器鼠标/滚轮操作
• chart.value 直接就是 echarts 实例，chart.value.setOption(...) 可直接调用

平台兼容性

uni-app(5.21)

uni-app x(5.21)

lime-echarts 图表组件

echarts 图表适配组件，兼容 uni-app / uni-app-x，支持 APP、小程序、H5、鸿蒙多端运行。

插件依赖：lime-shared

安装方法

1. 导入插件：在 uni-app 插件市场中搜索并导入 lime-echarts（lime-shared 会自动导入）

2. 安装 echarts：

   # 使用 pnpm（推荐）
   pnpm add echarts
   
   # 或使用 npm
   npm install echarts

3. 首次导入后需重新编译项目

打包体积说明

echarts 完整包体积较大（约 1MB），小程序平台有 2MB 包体积限制，建议根据实际情况选择引入方式：

• 按需引入：从 echarts/core 导入核心模块，再按需注册组件，能有效减小体积

  import * as echarts from 'echarts/core'
  import { BarChart } from 'echarts/charts'
  import { GridComponent } from 'echarts/components'
  import { CanvasRenderer } from 'echarts/renderers'
  echarts.use([BarChart, GridComponent, CanvasRenderer])

• 下载定制包：访问 echarts 在线构建器 按需选择图表类型和组件后下载
• 全量包：APP / H5 端无体积限制，可直接使用 import * as echarts from 'echarts'

代码演示

基础用法

通过 option prop 直接传入图表配置，无需 useEcharts。

<l-echarts chartId="my-chart" :option="chartOption" />

import { setEcharts } from '@/uni_modules/lime-echarts'
import * as echarts from 'echarts'

setEcharts(echarts)

const chartOption = ref({
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [10, 20, 30] }]
})

高级用法（useEcharts）

需要直接操作 echarts 实例时，使用 useEcharts 获取引用，在 @ready 回调中设置 option。

<l-echarts chartId="my-chart" @ready="onChartReady" />

import { useEcharts, setEcharts } from '@/uni_modules/lime-echarts'
import * as echarts from 'echarts'

setEcharts(echarts)

const chart = useEcharts('my-chart')

function onChartReady() {
  chart.value.setOption({
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    yAxis: { type: 'value' },
    series: [{ type: 'bar', data: [10, 20, 30] }]
  })
}

自动恢复模式（默认）

v-if 切换时组件自动缓存并回放 option，无需手动处理。

<l-echarts v-if="show" chartId="auto-chart" />

const show = ref(true)
const chart = useEcharts('auto-chart')

function onChartReady() {
  chart.value.setOption({ ... })
}
// v-if 切换后 chart.value 会自动重建并回放 option

手动模式

设置 autoRestore=false，在 @ready 回调中自行管理 option。适用于 swiper 多图表等场景。

<l-echarts :autoRestore="false" chartId="manual-chart" @ready="onChartReady" />

Swiper 多图表

在 swiper 中使用多图表时，使用 autoRestore=false + @ready 模式。

<swiper>
  <swiper-item v-for="(item, i) in 3" :key="i">
    <l-echarts
      :autoRestore="false"
      :chartId="`chart-${i}`"
      @ready="onSwiperReady($event, i)" />
  </swiper-item>
</swiper>

const options = [
  { xAxis: { type: 'category', data: ['A','B'] }, series: [{ type: 'bar', data: [10,20] }] },
  { xAxis: { type: 'category', data: ['C','D'] }, series: [{ type: 'line', data: [30,40] }] },
  { xAxis: { type: 'category', data: ['E','F'] }, series: [{ type: 'pie', data: [50,60] }] },
]

function onSwiperReady(_, index) {
  const chart = useEcharts(`chart-${index}`)
  chart.value?.setOption(options[index])
}

横屏模式

设置 landscape 开启横屏旋转，触摸坐标自动交换。

<l-echarts chartId="landscape-chart" :landscape="true" />

API 文档

Props

Events

useEcharts

两种使用模式

平台差异说明

注意事项

1. chartId 必须对应：<l-echarts chartId="xxx" /> 与 useEcharts('xxx') 的 chartId 必须一致
2. v-if 切换：默认开启 autoRestore，组件会自动缓存/回放 option；如需手动控制请设为 false
3. 鸿蒙 legend 黑块：已修复（echarts.esm.js 中 'transparent' → 'rgba(0,0,0,0)'），升级 echarts 后需重新应用此 patch
4. 请不要直接在 l-echarts 上使用 class 属性，推荐使用 lStyle 或在父级设置 class

Vue2 使用说明

插件使用了 composition-api，如需在 Vue2 项目中使用，请按照官方教程配置。

关键配置代码（在 main.js 中添加）：

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

快速预览

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

<!-- 代码位于 uni_modules/lime-echarts/components/lime-echarts -->
<lime-echarts />

插件标签说明

文档链接

• echarts 官方文档