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

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

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

1.引入项目组件

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

下面是main.ts里面的内容

/*
 * @Author: LiuQidong 254818216@qq.com
 * @Date: 2023-10-17 02:06:50
 * @LastEditors: LiuQidong 254818216@qq.com
 * @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文件使用

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

<template>
    <div class="set-table-style">
        <!-- 注意索引方式 -->
        <div 
            id="EChart"
            ref="EChart"
            style="width: 300px;
            height: 300px;margin:auto;"
        >
        </div>
    </div>
</template>
  
<script setup>
import { onMounted, ref, getCurrentInstance } from "vue";
import * as echarts from "echarts";
// import {} from 'vue'
// const echartRef = ref(this.$echarts);
// 这个是全局属性变量对象，使用.引用即可
const demoObj = getCurrentInstance().appContext.config.globalProperties;
const obj = ref(demoObj)

// console.log(data);
const getRenderer = () => {
    console.log(obj.value.$echarts);
    // 基于准备好的dom，初始化echarts实例
    let EChart = obj.value.$echarts.init(document.getElementById("EChart"));
    // 配置参数
    let config = {
        title: { text: "悲伤日记" },
        tooltip: {},
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
            {
                name: "销量",
                type: "bar",
                data: [5, 20, 36, 10, 10, 20],
            },
        ],
    };
    // 设置参数
    EChart.setOption(config);
}


onMounted(() => {
    // console.log(this.msg)
    getRenderer()
    console.log(obj.value.$msg);
});
</script>

<style scoped>
.set-table-style {
    margin:auto;
}
</style>
  

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