Hi FE !
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
Ai
git
前端面试题
前端小tip
  • vite
  • webpack
npm
  • vue2
  • vue3
react
GitHub
  • 引入uni_modules后主包太大,放入分包

引入uni_modules后主包太大,放入分包

直接将插件导入后,将uni_modules 直接粘贴到分包文件夹中

然后通过路径引入

如封装的echartrs插件

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
// import * as echarts from "echarts";
import lechart from "@/pages/assessment/uni_modules/lime-echart/components/l-echart/l-echart.vue";
// import echarts from "../uni_modules/lime-echart/static/echarts.min";
// eslint-disable-next-line @typescript-eslint/no-var-requires
const echarts = require("../uni_modules/lime-echart/static/echarts.min");
const props = defineProps({
  options: {
    type: Object,
    default: () => ({}),
  },
});

const chartRef: any = ref(null);
const myChart: any = ref(null);

// 初始化图表
const initChart = async () => {
  if (!chartRef.value) return;

  // 初始化echart
  myChart.value = await chartRef.value.init(echarts);

  // 默认获取容器尺寸
  myChart.value.resize();

  // 设置true清空echart缓存
  myChart.value?.setOption(props.options, true);
};

// 监听图表数据时候变化,重新渲染图表
watch(
  () => props.options,
  () => {
    nextTick(() => {
      initChart();
    });
  },
  { deep: true }
);

// 页面挂载,开始绘制图表
onMounted(() => {
  nextTick(() => {
    initChart();
  });
});

// 组件销毁时销毁图表实例
onBeforeUnmount(() => {
  if (myChart.value) {
    echarts.dispose(myChart.value);
  }
});
</script>

<template>
  <view>
    <lechart ref="chartRef"></lechart>
  </view>
</template>

引用

<script setup lang="ts">
import { onMounted, ref } from "vue";

import MyCharts from "../echart/index.vue";

// 注册必须的组件
// 每日数据
const dailyData = ref([
  { label: "07-15", value: 14 },
  { label: "07-16", value: 16 },
  { label: "07-17", value: 16 },
  { label: "07-18", value: 11 },
  { label: "07-19", value: 15 },
  { label: "07-20", value: 18 },
  { label: "07-21", value: 16 },
]);

// 练习列表
const practiceList = ref([
  { id: 1, name: "练习卷-01", count: 20 },
  { id: 2, name: "练习卷-01", count: 20 },
  { id: 3, name: "练习卷-01", count: 20 },
]);

const chartOption = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    left: "3%",
    top: "1%",
    right: "4%",
    bottom: "24%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: dailyData.value.map((item) => item.label),
    axisTick: {
      alignWithLabel: true,
    },
  },
  yAxis: {
    type: "value",
    data: [1, 2, 3, 4, 5, 6, 7],
  },
  series: [
    {
      name: "每日练习",
      type: "bar",
      barWidth: "60%",
      data: dailyData.value.map((item) => item.value),
      itemStyle: {
        color: "#1976d2",
      },
    },
  ],
});

</script>

<template>
        <MyCharts :options="chartOption" />
     
</template>

<style lang="scss" scoped>

</style>

Edit this page
最近更新: 2025/12/2 01:46
Contributors: qdleader
qdleader
本站总访问量 129823次 | 本站访客数 12人