添加水位视图

src/render/App.vue

@@ -7,13 +7,17 @@
 
       <div class="block-left-right-content flex flex-1 mt-5">
         <div class="block-left-content w-1/5 flex flex-col">
-          <div class="bg-red-100 flex-1">
+          <div class="clock-content mb-2 flex-1">
             <!-- <Clock /> -->
           </div>
-          <div class="bg-green-100 flex-1"></div>
-          <div class="bg-blue-100 flex-1"></div>
+          <div class="compass-content mb-2 flex-1">
+            <Compass />
+          </div>
+          <div class="water-level-content flex-1">
+            <WaterLevel />
+          </div>
         </div>
-        <div class="block-right-content pl-5 flex flex-1">
+        <div class="block-right-content ml-2 flex flex-1">
           <Map />
         </div>
       </div>
@@ -26,5 +30,13 @@ import FullScreenContainer from './components/Layout/FullScreenContainer.vue'
 import TheHeader from './components/Layout/TheHeader.vue'
 import DigitalFlopContainer from './components/DigitalFlopContainer.vue'
 // import Clock from './components/Clock.vue'
+import Compass from './components/Compass.vue'
+import WaterLevel from './components/WaterLevel.vue'
 import Map from './components/Map.vue'
 </script>
+
+<style scoped>
+.clock-content, .compass-content, .water-level-content, .block-right-content {
+  background-color: rgba(6,30,93,.5);
+}
+</style>

src/render/components/Map.vue

@@ -16,7 +16,6 @@ use([ CanvasRenderer, Map3DChart ]);
 registerMap('tmsk', tmskMap);
 
 const option = reactive({
-  backgroundColor: 'rgba(6,30,93,.5)',
   series: {
     type: 'map3D',
     map: 'tmsk',

src/render/components/WaterLevel.vue

@@ -0,0 +1,41 @@
+<template>
+  <VChart :option="option" />
+</template>
+
+<script lang="ts" setup>
+import { reactive } from "vue";
+import { use } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import { TitleComponent } from "echarts/components";
+import 'echarts-liquidfill'
+import VChart from "vue-echarts";
+
+
+use([
+  CanvasRenderer,
+	TitleComponent
+]);
+
+
+const option = reactive({
+  title: {
+    text: '海拔',
+    left: 'center'
+  },
+	series: [{
+		type: 'liquidFill',
+		backgroundStyle: {
+			color: 'transparency'
+		},
+		label: {
+			formatter: function({ value }) {
+				return value
+			}
+		},
+		data: [60, 0.5, 0.4, 0.3]
+	}]
+})
+
+const update = console.log
+defineExpose({ update })
+</script>