布局

src/components/echarts/echarts.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="hc-echarts-box">
+        <div ref="echart" class="hc-echarts" :style="`width : ${chart?.clientWidth}px`" />
+    </div>
+</template>
+
+<script setup>
+import * as echarts from 'echarts'
+import { getObjValue } from 'js-fast-way'
+import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+const props = defineProps({
+    option: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+defineOptions({
+    name: 'HcCharts',
+})
+
+//初始变量
+let chart = null
+const echart = ref(null)
+const options = ref(getObjValue(props.option))
+
+//深度监听
+watch(() => [
+    props.option,
+], ([option]) => {
+    options.value = getObjValue(option)
+    setOptions(options.value)
+}, { deep: true })
+
+//初始化图表
+const initChart = () => {
+    chart = echarts.init(echart.value)
+    setOptions(options.value)
+}
+
+//监听浏览器窗口变化
+const windowResize = () => {
+    window.addEventListener('resize', resizeEvent)
+}
+
+const resizeEvent = () => {
+    window.requestAnimationFrame(() => {
+        chart.resize()
+    })
+}
+
+//设置图表
+const setOptions = (option) => {
+    nextTick(() => {
+        chart.setOption(option)
+    })
+}
+
+//渲染完成
+onMounted(() => {
+    nextTick(() => {
+        initChart()
+        windowResize()
+    })
+})
+
+//被卸载
+onUnmounted(() => {
+    window.removeEventListener('resize', resizeEvent)
+    chart.dispose()
+    chart = null
+})
+
+const onResize = () => {
+    nextTick(() => {
+        chart.resize()
+    })
+}
+
+// 暴露出去
+defineExpose({
+    onResize,
+})
+</script>
+
+<style lang="scss" scoped>
+.hc-echarts-box {
+    display: block;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    .hc-echarts {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>

src/components/index.js

@@ -1,8 +1,10 @@
-import {vAuthBtn} from './auth-btn/index'
+import { vAuthBtn } from './auth-btn/index'
+import HcCharts from './echarts/echarts.vue'
 
 //注册全局组件
 export const setupComponents = (App) => {
-    //App.component('HcTooltip', HcTooltip)
     //自定义指令
     App.directive('auth-btn', vAuthBtn)
+    //自定义组件
+    App.component('HcCharts', HcCharts)
 }

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        计量支付系统
+        11
     </div>
 </template>