表单的图表

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20230706113632"
+  "value": "20230706113953"
 }

src/components/plugins/table-form/echart.vue

@@ -0,0 +1,98 @@
+<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: () => ({})
+    }
+})
+
+//初始变量
+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/plugins/HTableForm.js

@@ -9,30 +9,17 @@ import HcFormCheckboxGroup from "~com/plugins/table-form/hc-form-checkbox-group.
 import ElTimePicker from "~com/plugins/table-form/hc-time-picker.vue"
 import ElDatePicker from "~com/plugins/table-form/hc-date-picker-1.vue"
 import ElRadioGroup from "~com/plugins/table-form/hc-form-radio-group.vue"
+import HcEchart from "~com/plugins/table-form/echart.vue"
 
 //修改过的组件
 import {ElSelect, ElOption} from 'z-element-plus'
 
-// import {
-//     ElButton, ElTooltip, ElInput, ElUpload, ElInputNumber, ElRadio, ElCheckbox, ElCheckboxGroup
-// } from 'element-plus'
-
 import ElementPlus from 'element-plus'
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
-// const components = {
-//     ElButton, ElTooltip, ElInput, ElUpload, ElInputNumber, ElSelect, ElOption,
-//     ElRadio, ElCheckbox, ElCheckboxGroup,
-//     ElDatePicker, ElTimePicker, HcTableFormUpload, ElRadioGroup,
-//     HcFormSelectSearch,
-//     HcFormCheckboxGroup
-// }
-
 const components = {
-     ElSelect, ElOption,
-    ElDatePicker, ElTimePicker, HcTableFormUpload, ElRadioGroup,
-    HcFormSelectSearch,
-    HcFormCheckboxGroup
+    ElSelect, ElOption, ElDatePicker, ElTimePicker, HcTableFormUpload, ElRadioGroup,
+    HcFormSelectSearch, HcFormCheckboxGroup, HcEchart
 }
 
 //表单渲染