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>
相关推荐
NaZiMeKiY2 小时前
HTML5前端第二章节
前端·html·html5
天若有情6732 小时前
深入浅出:HTML 中 <a> 标签嵌入链接教程
前端·html
烂蜻蜓2 小时前
HTML 样式之 CSS 全面解析
前端·css·html
冬冬小圆帽2 小时前
Webpack 优化深度解析:从构建性能到输出优化的全面指南
前端·webpack·node.js
大龄大专大前端4 小时前
JavaScript闭包的认识/应用/原理
前端·javascript·ecmascript 6
字节源流4 小时前
【SpringMVC】常用注解:@SessionAttributes
java·服务器·前端
Json____4 小时前
SpringBoot 和vue前后端配合开发网页拼图10关游戏源码技术分享
vue.js·spring boot·游戏·html·游戏机·拼图游戏·拼图小游戏
肥肠可耐的西西公主4 小时前
前端(vue)学习笔记(CLASS 4):组件组成部分与通信
前端·vue.js·学习
烛阴4 小时前
JavaScript 函数绑定:从入门到精通,解锁你的代码超能力!
前端·javascript
花椒和蕊4 小时前
【vue+excel】导出excel(目前是可以导出两个sheet)
javascript·vue.js·excel