gnss-tool-kit/src/render/components/WaterLevel.vue

<template>
  <VChart id="myWaterLevel" :option="option" />
</template>

<script lang="ts" setup>
import { reactive, onMounted } 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
]);

onMounted(() => {
  var mychart = document.getElementById("myWaterLevel");
  mychart.firstChild.style.margin = "auto";
});


const option = reactive({
  title: {
    text: '海拔',
    left: 'center',
    textStyle: {
      color: '#fff'
    }
  },
  series: [{
    type: 'liquidFill',
    backgroundStyle: {
      color: 'transparency'
    },
    label: {
      fontSize : 36,
      formatter: function({ value }) {
        return parseInt(value)
      }
    },
    data: [0, 0.5, 0.4, 0.3]
  }]
})

const update = (alt: number) => {
  option.series[0].data[0] = alt
}
defineExpose({ update })
</script>