✨ init Project

src/components/charts/index.vue

@@ -0,0 +1,54 @@
+<!--
+   本组件参考 arco-pro 的实现
+    https://github.com/arco-design/arco-design-pro-vue/blob/main/arco-design-pro-vite/src/components/chart/index.vue
+    @auther: bypanghu<bypanghu@163.com>
+    @date: 2024/5/8
+!-->
+
+<template>
+  <VCharts
+    v-if="renderChart"
+    :option="options"
+    :autoresize="autoResize"
+    :style="{ width, height }"
+  />
+</template>
+
+<script setup>
+  import { ref, nextTick } from 'vue'
+  import VCharts from 'vue-echarts'
+  import { useWindowResize } from '@/hooks/use-windows-resize'
+
+  defineProps({
+    options: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    autoResize: {
+      type: Boolean,
+      default: true
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  })
+  const renderChart = ref(false)
+  nextTick(() => {
+    renderChart.value = true
+  })
+  useWindowResize(() => {
+    renderChart.value = false
+    nextTick(() => {
+      renderChart.value = true
+    })
+  })
+</script>
+
+<style scoped lang="less"></style>