一、安裝echarts

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

二、在utils文件夾下創(chuàng)建一個echarts.ts文件

// 引入 echarts 核心模塊，核心模塊提供了 echarts 使用必須要的接口。
import * as echarts from "echarts/core";
 
/** 引入柱狀圖 + 折線圖 + 餅圖，圖表后綴都為 Chart，一般常用的就這三個，如果還需要其他的，就自行添加  */
import { BarChart, LineChart, PieChart } from "echarts/charts";
 
// 引入提示框，標題，直角坐標系，數(shù)據(jù)集，內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件，組件后綴都為 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,
]);
 
// 導(dǎo)出
export default echarts;

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

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

// echarts 掛載到 Vue實例中
// Vue.prototype.$echarts = echarts; // vue2的掛載方式
app.config.globalProperties.$echarts = echarts; // vue3的掛載方式（一個用于注冊能夠被應(yīng)用內(nèi)所有組件實例訪問到的全局屬性的對象。）

四、在組件中使用

1、全局注冊后使用

<template>
	<div id="echarts1" ref="container"></div>
</template>
<script setup lang="ts">
	import { ref, getCurrentInstance, onBeforeUnmount } from 'vue';
	
	// 獲取echart掛載的DOM節(jié)點
	const container:any = ref();

    // 定義延時器指針對象，便于組件實例銷毀的時候以便清除
    const timer:any = ref();
	
	// 獲取當(dāng)前組件實例
	const { proxy }: any = getCurrentInstance();
	
	const initEchartsOneFn = () => {	
		// echarts初始化
		let myChart = proxy.$echarts.init(container.value);
		
		const option = {
			// 自定義echarts圖標相關(guān)配置
		};
		
		myChart.setOption(option);
		
		// 根據(jù)頁面大小自動響應(yīng)圖表大小
		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、按需引入使用

<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節(jié)點
const container:any = ref();

// 定義延時器指針對象，便于組件實例銷毀的時候以便清除
const timer:any = ref();

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

  const option = {
    // 自定義echarts圖標相關(guān)配置
  };

  myChart.setOption(option);

  // 根據(jù)頁面大小自動響應(yīng)圖表大小
  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>

文章來源地址http://www.zghlxwxcb.cn/news/detail-852172.html

到了這里，關(guān)于Vue3 + TS 按需引入和全局引入 Echarts#記錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！