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>
相关推荐
方方洛3 分钟前
翻译:MCP schema(Model Context Protocol specification)
前端·typescript·mcp
zym大哥大12 分钟前
C++之stack_queue扩展
java·前端·c++
Real_man27 分钟前
Next.js 教程:从零开始构建你的 Web 应用
前端
shadouqi29 分钟前
2.angular指令
前端·javascript·angular.js
Shawn_LX37 分钟前
Vue3 + Vite + Yarn + Fabricjs构建的开源演示系统
javascript·typescript·vue·html5·fabric
姑苏洛言37 分钟前
css实现报警特效
前端
烂蜻蜓38 分钟前
深入理解 HTML 表单与输入
前端·javascript·html
Anlici1 小时前
面试中 Promise 如何处理 event loop 🤩🤩
前端·面试·程序员
鱼樱前端1 小时前
从基础到深入的AST(Abstract Syntax Tree,抽象语法树)解析,结合前端框架(Vue/React)及实际应用场景的技术详解
javascript·vue.js·react.js