封装echarts

src/views/dashboard/index.vue

@@ -1,16 +1,63 @@
 <template>
+    <el-form :inline="true" :model="formInline" class="demo-form-inline">
+        <el-form-item label="区域">
+            <el-input v-model="formInline.deptInd" placeholder="请选择区域" clearable />
+        </el-form-item>
+        <el-form-item label="时间">
+            <el-date-picker v-model="formInline.searchBeginTime" type="date" placeholder="请选择时间" />
+        </el-form-item>
+        <el-form-item>
+            <el-button type="primary" @click="onSubmit">查询</el-button>
+        </el-form-item>
+    </el-form>
     <el-tabs v-model="activeName" type="border-card">
         <el-tab-pane label="图形" name="1">
-            <Echart />
+            <Echart :list="list" ref="echarts" />
         </el-tab-pane>
         <el-tab-pane label="表格" name="2">Config</el-tab-pane>
     </el-tabs>
 </template>
 
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
+import { onMounted, reactive, ref, onBeforeMount } from 'vue'
 const activeName = ref('1')
 import Echart from '@/views/dashboard/components/echart.vue'
+
+import { getAreaCalculation } from '@/api/test'
+const list = ref([])
+const echarts = ref()
+const formInline = reactive({
+    deptInd: '',
+    deptIndex: '5699e5916a18a6381e1ac92da5bd2628',
+    monitorFlag: 2,
+    powerFlag: 2,
+    serverName: 'event-boot',
+    searchBeginTime: '2023-12-01',
+    searchEndTime: '2023-12-26',
+    statisticalType: {
+        name: '电网拓扑',
+        id: 'cc28974d259ad22642f6a1bff708f967',
+        code: 'Power_Network',
+        value: 'cc28974d259ad22642f6a1bff708f967',
+        gvalue: null,
+        label: '电网拓扑',
+        sort: 0
+    },
+    timeFlag: 1
+})
+// const locale=zhCn
+const onSubmit = async () => {
+    await getAreaCalculation(formInline).then(res => {
+        list.value = res.data
+        echarts.value.Processing(res.data.areaStatistics)
+        echarts.value.Grade(res.data.voltageStatistics)
+        echarts.value.Relation(res.data.monthlyStatistics)
+    })
+}
+
+onMounted(() => {
+    onSubmit()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -19,8 +66,7 @@ import Echart from '@/views/dashboard/components/echart.vue'
     height: 500px;
 }
 ::v-deep(.el-tabs__content) {
-    height: calc(100vh - 111px);
+    height: calc(100vh - 161px);
     overflow-y: auto;
 }
-
 </style>