52 lines
996 B
Vue
52 lines
996 B
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> |