vite+vue3，引入echarts的四种方式

首先安装依赖

npm install echarts --save

第一种，在mounted中调用

main.js中
import { createApp } from 'vue'
import * as echarts from 'echarts'
import router from './router'
import './assets/style.css'
import App from './App.vue'

const app =  createApp(App)
app.use(router)
app.config.globalProperties.$echarts = echarts
app.mount('#app')

页面内

<div id="myChart" :style="{ width: width, height: height }"></div>

<script>
import { defineComponent ,onMounted ,getCurrentInstance ,ref } from 'vue'
export default defineComponent({
  mounted() {
      // this.$echarts调用 初始化
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10, 20],
          },
        ]
      });
  },
})
</script>

第二种，通过getCurrentInstance，在setup中调用

main.js中配置同上，

在页面内设置如下

<script>
import { defineComponent ,onMounted ,getCurrentInstance ,ref } from 'vue'
export default defineComponent({
  setup(){
    // 通过getCurrentInstance 获取组件
    const echarts = getCurrentInstance().appContext.config.globalProperties.$echarts;
    onMounted( () =>{
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20, 20, 36, 10, 10, 20],
          },
        ],
      });
    })
  }
})
</script>

第三种，不通过main.js在使用echarts的页面直接引入

无需在main.js配置任何文件

在页面内配置如下

<script>
//引入echarts组件
import * as echarts from 'echarts'
import { defineComponent ,onMounted } from 'vue'
export default defineComponent({
  setup(){
    onMounted( () =>{
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表同上
      myChart.setOption({

      });
    })

  }
})
</script>

第四种，通过provide和inject在app.vue导入

无需在main.js配置任何文件

在app.vue中引入echarts

<script>
import * as echarts from 'echarts'
import {provide} from 'vue'
export default {
  setup(){
    provide('echarts ',echarts )
  }
}
</script>

在子页面中使用

<script>
import { defineComponent ,onMounted ,inject } from 'vue'
export default defineComponent({
  setup(){
    // 接收父页面的echarts参数
    const echarts  = inject('echarts ')

    onMounted( () =>{
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("myChart"));
      // 绘制图表同上
      myChart.setOption({
        
        })
    })
  }
})
</script>