uniapp+vue3 中使用echart 以及echart文件过大需要分包的记录

使用的是插件市场的lime-echart ，地址：插件市场lime-echart

直接上代码

<template>
  <view class="container">
      <view class="chart-container">
        <view style="width: 700rpx; height: 450rpx"><LEchart ref="chartRef" style="width: 100%"></LEchart></view>
      </view>

  </view>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from 'vue'
//
import { onUnload } from '@dcloudio/uni-app'
import LEchart from '../../uni_modules/lime-echart/components/l-echart/l-echart.vue'
const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js')


const chartRef = ref(null)
const myChart = ref(null)


const getOptionData = dates => {
  const option = {
    // legend: {
    //   show: true,
    //   data: ['分数'],
    // },
    tooltip: {
      trigger: 'item',
      axisPointer: {
        type: 'shadow',
      },
      confine: true,
    },

    grid: {
      left: '1%',
      right: '10%',
      top: '15%',
      bottom: '5%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        // interval: 0, // 强制显示所有标签
        // rotate: 45, // 可选：旋转标签避免重叠
        // inside: true,
        // color: '#fff'
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#83bff6',
        },
      },
      z: 10,
    },
    yAxis: {
      type: 'value',
      min: 0, // 设置y轴最小值为0
      max: 100, // 设置y轴最大值为100
      axisLine: {
        show: true,
        lineStyle: {
          color: '#83bff6',
        },
      },
      axisTick: {
        show: false,
      },
      // axisLabel: {
      //   color: '#999'
      // },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#83bff6',
        },
      },
    },
    series: [
      {
        markLine: {
          data: [{ yAxis: 70, name: '及格线' }],
          lineStyle: {
            type: 'dashed', // 虚线
          },
          label: {
            show: true,
            position: 'insideStartTop',
            formatter: '及格线',
          },
        },
        data: [13, 40, 80, 70, 60, 50, 11, 13, 14, 55],
        type: 'bar',
        name: '平均分数',
        label: {
          show: true,
          position: 'top', // 展示在柱子的上方
          color: '#333',
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' },
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2378f7' },
              { offset: 0.7, color: '#2378f7' },
              { offset: 1, color: '#83bff6' },
            ]),
          },
        },
        areaStyle: {
          show: true,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#188df0',
            },
            {
              offset: 1,
              color: '#fff',
            },
          ]),
        },
      },
    ],
    color: ['#83bff6'],
  }
  return option
}
const getLastNDay = (time, n) => {
  let arry = []
  let baseDate = new Date(time)
  for (let i = n - 1; i >= 0; i--) {
    let date = new Date(baseDate)
    date.setDate(date.getDate() - i)
    let year = date.getFullYear()
    let mon = (date.getMonth() + 1).toString().padStart(2, '0')
    let d = date.getDate().toString().padStart(2, '0')
    arry.push(mon + '.' + d)
  }
  return arry
}
onMounted(() => {
  nextTick(() => {
    setTimeout(() => {
      initChart()
    })
  })
})
const initChart = async () => {
  if (!chartRef.value) return
  // 初始化echart
  myChart.value = await chartRef.value.init(echarts)
  // 默认获取容器尺寸
  myChart.value.resize()
  const dates = getLastNDay(new Date(), 10)
  console.log(dates)
  const optionData = getOptionData(dates)
  // 设置true清空echart缓存
  myChart.value?.setOption(optionData, true)
  console.log(myChart.value)

  // myChart.value.
}

// 组件销毁时销毁图表实例
onUnload(() => {
  if (myChart.value) {
    echarts.dispose(myChart.value)
  }
})
</script>
<style>
page {
  height: 100%;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f6fa;
}

.chart-container {
  height: 400rpx;
  position: relative;
  border-bottom: 2rpx solid #e5e5e5;
}

</style>

正常使用的话可能会体积过大，所以这里我用了分包，pages.json数据结构如下

项目结构如下