精简uniapp分包的Echarts组件，让图表展示更灵活便捷

前端

2022-12-31 15:41:55

精简 UniApp 小程序：优化 ECharts 图表组件

随着移动应用的蓬勃发展，小程序以其轻量化、快速加载和高性能等优势受到广泛欢迎。为了提升小程序性能，减小主包体积至关重要。本文将深入探讨在 UniApp 开发中如何优化 ECharts 图表组件，以精简主包体积，并提高小程序的整体性能。

1. 分包图表组件，精简主包体积

ECharts 是一个强大的图表库，通常会占用较大的包体积。为了减轻主包体积，我们可以将 ECharts 组件移动到分包目录中。分包具有独立的包体积限制，因此将其从主包中分离出来可以显著减小主包体积。

步骤：

将 ECharts 组件目录（通常位于 node_modules/l-echart）移动到 src/components/echarts 目录下。
在 app.json 文件中，将 ECharts 组件注册到分包中。

2. 直接传递 Option 参数，灵活修改图表数据

传统上，修改 ECharts 图表数据需要重新初始化组件。为了简化这一过程，我们可以使用直接传递 Option 参数的方法。通过请求接口获取数据后，直接修改 Option 参数并使用 setData() 方法更新组件数据即可。

示例代码：

<template>
  <l-echart ref="myChart" :option="option"></l-echart>
</template>

<script>
import { ref } from '@vue/reactivity'

export default {
  setup() {
    const option = ref({})

    // 请求接口获取数据，并修改 Option 参数
    const requestData = () => {
      // ... 省略请求接口代码 ...
      // 将获取到的数据修改 Option 参数
      option.value = {
        // 图表配置
      }
    }

    // 初始化时请求数据
    requestData()

    return {
      option
    }
  }
}
</script>

3. 下载指定组件压缩包，精简主包体积

除了移动组件到分包目录外，还可以下载指定的 ECharts 组件压缩包并替换原有组件，以进一步精简主包体积。

步骤：

下载指定的 ECharts 组件压缩包，例如 echarts-for-weixin.min.js。
将下载的压缩包放在 src/components/echarts 目录下，并重命名为 echarts.min.js。
在 app.json 文件中，将 ECharts 组件的路径指向 src/components/echarts/echarts.min.js。

4. 监听宽高变化，自适应图表尺寸

为了保证图表在不同设备上都能正确显示，需要监听图表组件的宽高变化，并根据变化情况调整图表尺寸。

示例代码：

<template>
  <l-echart ref="myChart" :option="option" @resize="onResize"></l-echart>
</template>

<script>
import { ref } from '@vue/reactivity'

export default {
  setup() {
    const option = ref({})

    // 监听图表组件的宽高变化
    const onResize = () => {
      // 获取图表组件的宽高
      const { width, height } = this.$refs.myChart.$el.getBoundingClientRect()

      // 根据宽高调整图表尺寸
      this.$refs.myChart.resizeTo({ width, height })
    }

    // 初始化时请求数据
    requestData()

    return {
      option,
      onResize
    }
  }
}
</script>