vue3中按需引入echarts

之前对vue的使用版本都是vue2以及js，现在用vue3和typescript练练手，记录一下如何在vue3中以按需引入的方式引入echarts。

（1）安装echarts

npm install echarts --save

（2）在项目中新成立一个charts.ts文件，将所需要引用的组件暴露出来，在main.ts中引入，然后以provide（inject）的方式将echarts提供给组件

main.ts

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import store from '@/store/store';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import echarts from '@/utils/charts';
import router from './router';
import App from './App.vue';

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(ElementPlus).use(router).use(store)
  .mount('#app');

app.provide('$echarts', echarts);

（3）在组件中使用

如下图所示：