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>