vue3+ts+echarts實現(xiàn)按需引入和類型界定方式

更新時間：2022年10月19日 15:08:57 作者：huangfengnt

這篇文章主要介紹了vue3+ts+echarts實現(xiàn)按需引入和類型界定方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3+ts+echarts實現(xiàn)按需引入和類型界定

一直想系統(tǒng)學(xué)習(xí)一下echarts，無奈今天在引入上就犯了難，現(xiàn)記錄一下我的解決方案

為了減少體積和使用的便利，我想實現(xiàn)一個按需和全局的引入

本來是想在main.ts當(dāng)中直接import * as echarts from 'echarts'，然后把這個echarts掛載在app的實例上，但是以我現(xiàn)有的經(jīng)驗，這可能要涉及到this的問題，vue3已經(jīng)極力避免this的出現(xiàn)，所以在看了相關(guān)大神的文章之后，我決定在App.vue的界面進(jìn)行引入，然后利用provide函數(shù)，將形成的echarts變量傳遞給其他的子頁面，這樣就能實現(xiàn)全局使用的問題

//App.vue
import{provide} from 'vue'
import * as echarts from 'echarts'
provide("echarts",echarts)
 
//其他子頁面中
import {inject} from 'vue'
let echarts=inject<any>("echarts")

第二個問題是關(guān)于按需的問題，這里我直接貼上官方的寫法，簡單看看就行

import * as echarts from 'echarts/core';
import {
  BarChart,
  // 系列類型的定義后綴都為 SeriesOption
  BarSeriesOption,
  LineChart,
  LineSeriesOption
} from 'echarts/charts';
import {
  TitleComponent,
  // 組件類型的定義后綴都為 ComponentOption
  TitleComponentOption,
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  // 數(shù)據(jù)集組件
  DatasetComponent,
  DatasetComponentOption,
  // 內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
 
// 通過 ComposeOption 來組合出一個只有必須組件和圖表的 Option 類型
type ECOption = echarts.ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;
 
// 注冊必須的組件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
 
const option: ECOption = {
  // ...
};

以上很明顯引入了一些bar圖和line圖，并且引入以option為結(jié)尾的組件類型，此外還引入了一些title基礎(chǔ)組件和對應(yīng)類型，并利用use的方法將其與核心的echarts對象進(jìn)行整合，還規(guī)制了一個ECOption作為echarts配置對象的類型，這確實實現(xiàn)了按需引入，但是問題是按照我上面的寫法，provide不能傳遞type，所以我需要將類型和echarts分開寫到兩個文件里。

首先看一下App.vue的文件中我是怎么按需配置echarts的

//App.vue文件
// 我本來想在這里引入echart
import { provide } from 'vue';
import * as echarts from 'echarts/core';
import {
  BarChart,
  // 系列類型的定義后綴都為 SeriesOption
  LineChart
} from 'echarts/charts';
import {
  TitleComponent,
  // 組件類型的定義后綴都為 ComponentOption
  TooltipComponent,
  GridComponent,
  // 數(shù)據(jù)集組件
  DatasetComponent,
  // 內(nèi)置數(shù)據(jù)轉(zhuǎn)換器組件 (filter, sort)
  TransformComponent
} from 'echarts/components';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
 
// 注冊必須的組件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
 
// 把這個配置好的echartprovide出去
provide("echarts", echarts)
// 把這個option的選項類型也provide出去,但是provide方法無法使用傳遞類型，那我這邊只能放棄

其實就是把全部的類型都摘了出來，然后單獨寫到一個echart.d.ts的申明文件中去，以下是代碼

//echart.d.ts
// 因為provide不能傳遞type的原因，我們將echart的option類型單獨抽取出來寫一個申明文件
// 1.我們引入了線圖和bar圖，所以這里我們引入了兩者的類型
import { ComposeOption } from 'echarts/core';
import {
    BarSeriesOption,
    LineSeriesOption
} from 'echarts/charts';
//2.引入組件，也就是option選項中的類型
import {
    // 組件類型的定義后綴都為 ComponentOption
    TitleComponentOption,
    TooltipComponentOption,
    GridComponentOption,
    // 數(shù)據(jù)集組件
    DatasetComponentOption,
} from 'echarts/components';
 
// 3.通過 ComposeOption 來組合出一個只有必須組件和圖表的 Option 類型
type ECOption = ComposeOption<
    | BarSeriesOption
    | LineSeriesOption
    | TitleComponentOption
    | TooltipComponentOption
    | GridComponentOption
    | DatasetComponentOption
>;
// 4.將這個類型暴露出去
export { ECOption }

然后是具體使用的代碼

 
import { inject, onMounted } from 'vue';
// 引入我自定義的圖像option類型
import { ECOption } from '../echart'
let echarts = inject<any>("echarts")
// 將echart的創(chuàng)建，壓縮成一個方程
let echartInit = () => {
    // 將option選項抽離出來
    let option: ECOption = {
        title: {
            text: 'ECharts 入門示例'
        },
        tooltip: {},
        xAxis: {
            data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
        },
        yAxis: {},
        series: [
            {
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    }
 
    // echart圖標(biāo)的繪制
    var myChart = echarts.init(document.getElementById('chart'));
    myChart.setOption(option);
}
onMounted(() => {
    echartInit()
})

就是我的解決方案

vue3按需引入echarts問題及使用

參考官方示例：Examples - Apache ECharts

1、安裝

npm install echarts --save

如果要使用3d類型的需要引入 echarts-gl（本文需要）

npm install echarts-gl --save

2、main.js

// 引入 echarts 核心模塊
import * as echarts from 'echarts/core';
// 引入 echarts-gl 模塊
import { GlobeComponent } from 'echarts-gl/components';
?
// 引入 Canvas 渲染器
import { CanvasRenderer } from 'echarts/renderers';
?
// 注冊必須的組件
echarts.use([GlobeComponent, CanvasRenderer]);
app.config.globalProperties.$echarts = echarts; // 注意這行要在 const app = createApp(App) 之后

3、使用

<template>
  <div class="earth" ref="earth">
    <div id="main" ref="earthMain"></div>
  </div>
</template>
 
<script>
import { defineComponent, ref, onMounted, getCurrentInstance } from "vue";
import earthImg from "@/assets/img/earth.jpg"
 
export default defineComponent({
  name: "frontPage",
  components: {},
  setup() {
    const { proxy } = getCurrentInstance(); // ?。。。?
    let echarts = proxy.$echarts;
 
    let earth = ref(null);
    let earthMain = ref(null);
    let earthChart;
 
    onMounted(() => {
        let height = earth.value.offsetWidth * 0.0625;
		earth.value.style.height = height + "rem";
 
        initEarth();
    });
 
    window.addEventListener("resize", function(){
		let height = earth.value.offsetWidth;
		height *= 0.0625;
		earth.value.style.height = height + "rem";
		if(earthChart){
			earthChart.resize();
		}
	})
	
	let initEarth = function(){
		earthChart = echarts.init(earthMain.value);
		let option = {
		  globe: {
		    baseTexture: earthImg,
		    displacementScale: 0.1,
		    shading: 'realistic',
		    light: {
		      ambient: {
		        intensity: 0.9
		      },
		      main: {
		        intensity: 0.1
		      }
		    },
		    viewControl: {
		      autoRotate: true,
		      autoRotateAfterStill: 0.1,
		      // 0 不縮放
		      zoomSensitivity: 0
		    },
			top: 0,
			left: 0,
			right: 0,
			bottom: 0
		  },
		  series: []
		};
		
		option && earthChart.setOption(option);
	}
 
    return {
        earth,
        earthMain
    }
  },
});
</script>
 
<style lang="scss" scoped>
.earth {
	max-height: 600px;
	>div{
		width: 100%;
		height: 100%;
		max-width: 600px;
		max-height: 600px;
	}
}
</style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: