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

<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 parseInt(value)
      }
    },
    data: [60, 0.5, 0.4, 0.3]
  }]
})

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