【uni-app】微信小程序引入lime-echart并使用

在进行微信小程序开发时，发现并不能像Web端使用ECharts那样直接安装依赖包，需要另辟蹊径。在这里介绍其中一种方式--在插件市场引入lime-echart。该插件兼容性较好，能基本满足小程序的图表开发了。

平台兼容性

实现步骤

• 下载插件

在lime-echart插件市场下载压缩包，解压，双击打开component文件夹。

• 导入公共组件

 由于微信小程序对项目资源大小有限制，因此我们按需引入资源即可。我的项目中需要用到柱状图、地图的渲染，引入l-echart已足够。

• 引入echarts.min.js

在ECharts官网在线定制echarts.min.js，并下载导入到项目的src\static\echarts文件夹中（src\static文件夹也可以，看个人习惯）。因小程序要求精简，完整下载echarts.min.js大小1KB以上，太大了，只勾选项目用得上的即可。

• 渲染图表

在组件中引入l-echart：

import lEchart from '@/components/l-echart/l-echart.vue'

 模板中使用l-echart：

<lEchart ref="barChartRef"></lEchart>

分别是在H5、微信小程序中引入echarts

// #ifdef H5
import * as echarts from 'echarts'
// #endif

// #ifdef MP-WEIXIN
/* eslint-disable @typescript-eslint/no-var-requires, no-redeclare, no-import-assign */
const echarts = require('../../../static/echarts/echarts.min.js') // 改成自己的路径
// #endif

初始化图表：  

const barChartRef = ref()
let myChart = null


const initChart = () => {
  if (!barChartRef.value) return

  const chartOptions = {
   // ... Your Chart Options
  }
  barChartRef.value.init(echarts, async (chart) => {
    chart.showLoading()
    chart.setOption(chartOptions)
    chart.hideLoading()
    myChart = chart
  })
}

 图表实例销毁：

onUnload(() => {
  myChart && myChart.dispose()
})

实现效果

http://LimeUI官网图表实例：

细节注意 

• 小程序require仅支持相对路径,不支持路径别名

• 记得定制并精简echarts.min.js

以上就是基于uni-app在微信小程序中渲染图表的实现啦^-^