Vue3 + TS 按需引入和全局引入 Echarts#记录

一、安装echarts

TypeScript 复制代码

npm install echarts --save
或
npm --registry=https://registry.npmmirror.com install echarts -s

二、在utils文件夹下创建一个echarts.ts文件

TypeScript 复制代码

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
 
/** 引入柱状图 + 折线图 + 饼图，图表后缀都为 Chart，一般常用的就这三个，如果还需要其他的，就自行添加  */
import { BarChart, LineChart, PieChart } from "echarts/charts";
 
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent,
  LegendComponent,
} from "echarts/components";
 
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
 
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
 
// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  ToolboxComponent,
  LegendComponent,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  BarChart,
  LineChart,
  PieChart,
]);
 
// 导出
export default echarts;

三、在main.ts中引入echarts.ts文件（全局注册，按需引入忽略可此步骤）

TypeScript 复制代码

// 引入echarts
import echarts from "./utils/echarts";

// echarts 挂载到 Vue实例中
// Vue.prototype.$echarts = echarts; // vue2的挂载方式
app.config.globalProperties.$echarts = echarts; // vue3的挂载方式（一个用于注册能够被应用内所有组件实例访问到的全局属性的对象。）

四、在组件中使用

1、全局注册后使用

TypeScript 复制代码

<template>
	<div id="echarts1" ref="container"></div>
</template>
<script setup lang="ts">
	import { ref, getCurrentInstance, onBeforeUnmount } from 'vue';
	
	// 获取echart挂载的DOM节点
	const container:any = ref();

    // 定义延时器指针对象，便于组件实例销毁的时候以便清除
    const timer:any = ref();
	
	// 获取当前组件实例
	const { proxy }: any = getCurrentInstance();
	
	const initEchartsOneFn = () => {	
		// echarts初始化
		let myChart = proxy.$echarts.init(container.value);
		
		const option = {
			// 自定义echarts图标相关配置
		};
		
		myChart.setOption(option);
		
		// 根据页面大小自动响应图表大小
		window.addEventListener("resize", function () {
				myChart.resize();
		});
	}

    
    // 判断定时器是否存在
    if (timer.value) {
        clearTimeout(timer.value);
    }
     
    // 绑定定时器，销毁的时候再次清除
    timer.value = setTimeout(() => initEchartsOneFn(), 1000);
     
    // 组件实例销毁前清除延时器对象
    onBeforeUnmount(() => {
        if (timer.value) clearTimeout(timer.value);
    });
	
</script>

2、按需引入使用

TypeScript 复制代码

<template>
  <div ref="container" :style="{ width: '100%', height: '100%' }"></div>
</template>


<script setup lang="ts">
import echarts from '@/utils/echarts'

import { ref, onMounted, onBeforeUnmount} from 'vue'

// 获取echart挂载的DOM节点
const container:any = ref();

// 定义延时器指针对象，便于组件实例销毁的时候以便清除
const timer:any = ref();

const initEchartsOneFn = () => {
  // echarts初始化
  let myChart = echarts.init(container.value);

  const option = {
    // 自定义echarts图标相关配置
  };

  myChart.setOption(option);

  // 根据页面大小自动响应图表大小
  window.addEventListener("resize", function () {
      myChart.resize();
  });
}
  
// 判断定时器是否存在
if (timer.value) {
    clearTimeout(timer.value);
}
  
// 绑定定时器，销毁的时候再次清除
timer.value = setTimeout(() => initEchartsOneFn(), 1000);
  
// 组件实例销毁前清除延时器对象
onBeforeUnmount(() => {
    if (timer.value) clearTimeout(timer.value);
});
</script>