关于echars在vue3中的使用

根文件的配置

<!-- 
    App.vue
 -->
 <template>
    <router-view></router-view>
</template>
<script>
import * as echarts from 'echarts'
import { provide } from 'vue';
export default {
  name: 'App',
  setup(){
    provide('ec',echarts)//provide
  },
  components: {
  }
}
</script >
<style scoped>

</style>

子文件的配置

<template>
    <page-view>
        <el-card>
            <template #header>
                <div class="font-bold">
                    分类汇总信息
                </div>
            </template>
            <el-row :gutter="20" class="text-[30px]">
                <el-col :span="6" align="middle">
                    <div class="grid-content ep-bg-purple" />总用户数
                    <div class="grid-content ep-bg-purple" />56
                </el-col>
                <el-col :span="6" align="middle">
                    <div class="grid-content ep-bg-purple" />总分类数
                    <div class="grid-content ep-bg-purple" />2
                </el-col>
                <el-col :span="6" align="middle">
                    <div class="grid-content ep-bg-purple" />总商品数
                    <div class="grid-content ep-bg-purple" />77
                </el-col>
                <el-col :span="6" align="middle">
                    <div class="grid-content ep-bg-purple" />总订单数
                    <div class="grid-content ep-bg-purple" />85
                </el-col>
            </el-row>
        </el-card>
        <el-card class="mt-5">
            <template #header>
                <div class="font-bold">
                    订单数据展示
                </div>
            </template>
            <div id="customerChart" :style="{width:'300px',height:'300px'}"></div>
        </el-card>

    </page-view>
</template>
<script >

import { onMounted } from "vue";
import * as echarts from 'echarts'
export default {
  name: "data_page",
   setup() {
     onMounted(() => {//需要获取到element,所以是onMounted的Hook
         let myChart =  echarts.init(document.getElementById("customerChart"));
      // 绘制图表
      myChart.setOption({
        title: { text: "总用户量" },
        tooltip: {},
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });
      window.onresize = function () {//自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
  mounted() {},
};

</script >
<style scoped>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;

}
</style>
   

效果