如何在组合式vue3风格项目里面使用EChart

最近对图标比较感兴趣，就入手了EChart

参考链接：Vue 项目如何使用Echarts ， 手摸手带你入门 - 掘金 (juejin.cn)

1.引入项目组件

实际上我们只需要一个能初始化的对象即可

下面是main.ts里面的内容

/*
 * @Author: LiuQidong [email protected]
 * @Date: 2023-10-17 02:06:50
 * @LastEditors: LiuQidong [email protected]
 * @LastEditTime: 2023-11-13 10:46:45
 * @FilePath: \newvue2\src\main.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { createApp } from 'vue'
import * as echarts from 'echarts'
// import  NTableData  from 'naive-ui'
import App from './App.vue'
import router from './router'
import store from './store'
import {
    // create naive ui
    create,
    // component
    NButton
  } from 'naive-ui'
const naive = create({
    components: [NButton]
})
const app=createApp(App);
app.use(store).use(router)
app.use(naive)
// Vue.prototype.$echarts = echarts
// .后面就是需要挂载的全局属性 可以不必要挂$
app.config.globalProperties.$echarts = echarts
app.config.globalProperties.$msg = "12233"
// app.component('n-table-data',NTableData)
app.config.globalProperties.data = "dataTest"
app.mount('#app')

注意我们使用config.globalProperties来进行全局设置，你也可以局部导入然后使用(推荐)

2.在具体的vue文件使用

主要思路是获取挂载全局属性的对象，然后获取这个对象下面的数据即可

正确导入vue文件，你就完成了本篇文章的内容啦！