vue3引入echarts

main.js文件

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import * as echarts from 'echarts'
 
const app = createApp(App)
app.use(store)
app.use(router)
app.config.globalProperties.$echarts = echarts
 
app.mount("#app");

需要注意两个地方：

1、引入echarts5的方式与之前的版本方式不一样

// echarts5.0以前的版本
import echarts from 'echarts'
 
// echarts5.0
import * as echarts from 'echarts'

2、将echarts添加到全局变量

// vue2
Vue.prototype.$echarts = echarts
 
// vue3
app.config.globalProperties.$echarts = echarts

在组件（例如about.vue文件）中使用的方式都是一样的

<template>
  <div class="about" id="main"></div>
</template>
 
<script>
export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.$echarts.init(document.getElementById("main"));
    // 绘制图表
    myChart.setOption({
      title: {
        text: "ECharts 入门示例",
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {},
      series: [
        {
          name: "销量",
          type: "bar",
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    });
  },
};
</script>
 
<style lang="less" scoped>
#main {
  height: 400px;
  width: 100%;
}
</style>

参考：

vue3官方文档

在vue3 中使用echarts