vue3按需引入echarts图表

公司项目需要升级vue3，对项目就行了重构根据项目整理了一下如何按需引入echarts

1. 安装echarts依赖

npm install echarts --save

2. 在文件中新建echarts.ts

import type { App } from "vue";
import * as echarts from "echarts/core";
// 官网推荐使用CanvasRenderer进行渲染
import { CanvasRenderer } from 'echarts/renderers';
// 按需引入的图表类型首字母大写后面带Chart
import { PieChart, BarChart, LineChart } from "echarts/charts";
// 必须的组件
import {
  GridComponent,
  TitleComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
  TooltipComponent,
  DataZoomComponent,
  VisualMapComponent
} from "echarts/components";

const { use } = echarts;
// 注册的组件类型
use([
  PieChart,
  BarChart,
  LineChart,
  CanvasRenderer,
  GridComponent,
  TitleComponent,
  LegendComponent,
  GraphicComponent,
  ToolboxComponent,
  TooltipComponent,
  DataZoomComponent,
  VisualMapComponent
]);

/**
 * @description 自定义主题
 * @see {@link https://echarts.apache.org/zh/download-theme.html}
 */
// import theme from "./theme.json";
// registerTheme("ovilia-green", theme);

/**
 * @description 按需引入echarts
 * @see {@link https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6}
 */
export function useEcharts(app: App) {
  app.config.globalProperties.$echarts = echarts;
}

export default echarts;

3. main.ts的代码中引入：

import { useEcharts } from "@/plugins/echarts";
getServerConfig(app).then(async config => {
//无关代码删掉了正常注册
  app.use(useEcharts)
  app.mount("#app");
});

4. 组件中使用

注意点:

1.先引入getCurrentInstance

import { getCurrentInstance } from "vue";

2.实例化（变量名一定得是proxy）

const { proxy } = getCurrentInstance() as any;

3.可以用ref 或者 document.getElementById(“chartDom1”)两种方式获取dom元素但是要注意， 必须在元素加载完成后，不然会报错(使用 onMounted或者nextTick 等等)

<script setup lang="ts">
import { ref, computed, type Ref, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance(); // ！！！！
let chartDom22 =  ref<HTMLDivElement | null>(null);
nextTick(() => {
  const chartDom1 = <HTMLElement>document.getElementById("chartDom1");
  const myChart = proxy.$echarts.init(chartDom22.value as HTMLDivElement);
  window.onresize = function () {
    myChart.resize();
  };
  myChart.setOption(option);
});
const option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    bottom: "20%",
    height: "68%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0
        // width: "70",
        // overflow: "truncate"
      },
      data: ["啊", "吧", "传", "的"]
    }
  ],
  yAxis: [
    {
      type: "value"
    }
  ],
  series: [
    {
      name: "测试",
      type: "bar",
      data: [3, 20, 107, 107]
    }
  ]
};
</script>
<template>
  <div id="chartDom1" ref="chartDom22" style="width: 100%; height: 35vh" />
</template>

网上查到一种vite打包优化还没测试过，有时间可以试试

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

  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          echarts: ['echarts']
        }
      },
    },
  },