vue3中使用echart，按需引入和vite打包优化_vite引入e-achert

在项目的开发中需要使用echart完成数据的可视化展示，因为只是使用到折线图和柱状图，但是在打包的时候，发现echart会全部打包进去，为减少编译后的包体积进行相关设置的配置。（当然除了设置按需引入，也可以使用cdn的方式，此篇不涉及）

pnpm i echart --save-dev
1

在util中新建commonEchart.ts

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
 
/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart } from "echarts/charts";
 
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
} from "echarts/components";
 
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
 
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
 
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LineChart,
]);
 
// 导出
export default echarts;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

把echart 设置成组件

myChart.vue
<template>
  <div ref="chartRef"  class="my-chart"></div>
</template>
<script setup lang="ts">
import { defineProps, onBeforeUnmount, onMounted, ref } from "vue";
import echarts from "../../utils/commonEchart";
const props = defineProps(["options"]);
const chartRef = ref<HTMLDivElement>();
let chart: echarts.ECharts | null = null;
const resizeHandler = () => {
  chart?.resize();
};
onMounted(() => {
  setTimeout(() => {
    initChart();
  }, 20);
  window.addEventListener("resize", resizeHandler);
});

const initChart = () => {
  chart = echarts.init(chartRef.value as HTMLDivElement);
  chart.setOption({
    ...props.options,
  });
};

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeHandler);
  chart?.dispose();
});
</script>

<style lang="scss" scoped></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

在需要使用的页面中

<template>
  <div>
    <my-echart :options="options7" class="h-right-three-chart"></my-echart>
  </div>
</template>
<script lang="ts">
import MyEchart from "../../components/MyEchart.vue";
export default {
  components: { MyEchart },
  setup() {
    const options7 = {
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    };

    return {
      options7,
    };
  },
};
</script>
<style scoped>
.h-right-three-chart {
  width: 100%;
  height: 352px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

在vite.config.ts的build通过设置 manualChunks方案，将echarts单独打包并通过按需引入减少主包体积

  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          echarts: ['echarts']
        }
      },
    },
  },
1
2
3
4
5
6
7
8
9