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>
相关推荐
Anlici3 分钟前
跨域解决方案还有优劣!?
前端·面试
苹果电脑的鑫鑫5 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
庸俗今天不摸鱼9 分钟前
【万字总结】构建现代Web应用的全方位性能优化体系学习指南(二)
前端·性能优化·webp
潜龙在渊灬23 分钟前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
追寻光28 分钟前
Java 绘制图形验证码
java·前端
前端snow29 分钟前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草36 分钟前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期43 分钟前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js
陈随易1 小时前
告别Node.js:2025年,我为何全面拥抱Bun
前端·后端·程序员
还是鼠鼠1 小时前
Node.js--exports 对象详解:用法、示例与最佳实践
前端·javascript·vscode·node.js·web