vue-cli3.0使用echarts

//min.js
import { createApp } from 'vue'
import router from './router'
import App from './App.vue'
import '../src/assets/js/models'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import * as echarts from 'echarts';
const app = createApp(App)

// 全局属性 globalProperties
app.config.globalProperties.$echarts = echarts

app.use(router)
app.use(ElementPlus)
app.mount('#app')


//在hom.vue中使用
<template>
    <div>
        <h2>6666</h2>
        <!-- {{ value }} -->
        <div v-for="(item,index) in info" :key="item" @click="romies(index)">{{ item }}</div>
        <button @click="addClick">+1</button>
        <div ref="main" class="imgChart"></div>
    </div>
</template>

<script>
// getCurrentInstance 获取全局属性
import { ref, onMounted, getCurrentInstance, } from 'vue'
import { getData } from './UserData/useHome'
import axios from 'axios';
export default {
    setup() {
        let main = ref(null)
        let { ctx, proxy } = getCurrentInstance()
        let dataArr = ref()
        axios.get('/api/data').then((res) => {
            dataArr.value = res.data
            dataValueInfo(dataArr.value)
        })
        const dataValueInfo = (dataArr) => {
            let myChart = proxy.$echarts.init(main.value);
            let option = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove'
                },
                series: [
                    {
                        type: 'tree',

                        data: [dataArr],

                        top: '1%',
                        left: '7%',
                        bottom: '1%',
                        right: '20%',

                        symbolSize: 7,

                        label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right',
                            fontSize: 9
                        },

                        leaves: {
                            label: {
                                position: 'right',
                                verticalAlign: 'middle',
                                align: 'left'
                            }
                        },

                        emphasis: {
                            focus: 'descendant'
                        },

                        expandAndCollapse: true,
                        animationDuration: 550,
                        animationDurationUpdate: 750
                    }
                ]
            }
            myChart.setOption(option);
        }


        return {
            main,
            dataArr
        }
    }
};
</script>

<style scoped lang="less">
.imgChart {
    width: 1200px;
    height: 700px;
}
</style>