添加水位视图

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>