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）在组件中使用

<template>
  <div id="chartcontainer">这是图标集合页面</div>
</template>
 
<script lang="ts" setup>
import {
  reactive, ref, defineComponent, inject, onMounted,
} from 'vue';
 
const echarts = inject('$echarts');=
onMounted(() => {
  const myChart = (echarts as any).init(document.getElementById('chartcontainer'));
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例',
    },
    tooltip: {},
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });
});
 
</script>
 
<style lang="scss" scoped>
#chartcontainer {
  width:800px;
  height: 600px;
}
</style>
 复制

如下图所示：