vue3+ts 全局导入echarts

1.npm install echarts --save 默认就是5版本的。

2.在main.ts 中引入并挂载 vue 实例上

import * as ECharts from 'echarts'

const app = createApp(App)

app.config.globalProperties.$ECharts = ECharts

app.mount('#app')

3.在页面使用

<template>
	<div id="myChart" :style="{ width: '100%', height: '300px' }"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, getCurrentInstance } from 'vue'
export default defineComponent({
	setup() {
		const { proxy } = getCurrentInstance() as any
		// 配置建议写在 onMount 的外面
		const option = {
			tooltip: {
				trigger: 'item'
			},
			color: ['#ffd666', '#ffa39e', '#409EFF', '#69cbc2', '#d3adf7'],
			series: [
				{
					name: '访问来源',
					type: 'pie',
					radius: '70%',
					data: [
						{ value: 1048, name: '清洁能源发电区' },
						{ value: 735, name: '公共娱乐区域' },
						{ value: 580, name: '生活区域' },
						{ value: 484, name: '办公区域' },
						{ value: 300, name: '绿植空地' }
					],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
			}]
		}
		onMounted(() => {
			// 获取挂载的组件实例
			const echarts = proxy.$ECharts
			//初始化挂载
			const echarts1 = echarts.init(document.getElementById('myChart'))
			//添加配置
			echarts1.setOption(option)
			// 自适应
			window.onresize = function () {
				echarts1.resize()
			}
		})
		return {}
	}
})
</script>