添加水位视图

package.json

@@ -15,6 +15,7 @@
     "echarts": "^5.2.2",
     "echarts-china-cities-js": "^0.1.1",
     "echarts-gl": "^2.0.8",
+    "echarts-liquidfill": "^3.1.0",
     "vue": "^3.0.5",
     "vue-echarts": "^6.0.0"
   },

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>

yarn.lock

@@ -1035,6 +1035,11 @@ echarts-gl@^2.0.8:
     claygl "^1.2.1"
     zrender "^5.1.1"
 
+echarts-liquidfill@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.nlark.com/echarts-liquidfill/download/echarts-liquidfill-3.1.0.tgz#4ec70f3697382d0404c95fff9f3e8dd85c8377da"
+  integrity sha1-TscPNpc4LQQEyV//nz6N2FyDd9o=
+
 echarts@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmmirror.com/echarts/download/echarts-5.2.2.tgz#ec3c8b2a151cbba71ba3c2c7cf9b2f2047ce4370"