You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
2.2 KiB
107 lines
2.2 KiB
<template>
|
|
<div class="box-bg">
|
|
<!-- 停车位 -->
|
|
<div :style="{ width: '100%', height: '100%' }" id="parkingSpace"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import * as echarts from "echarts";
|
|
|
|
export default defineComponent({
|
|
name: "parkingSpace",
|
|
data() {
|
|
return {
|
|
myCharts: {},
|
|
carOfInLists: [],
|
|
carOfOutLists: [],
|
|
};
|
|
},
|
|
|
|
mounted() {
|
|
// 绘制图表
|
|
this.getOptions();
|
|
},
|
|
|
|
methods: {
|
|
// 绘制图表
|
|
getOptions() {
|
|
const parkingSpace = document.getElementById("parkingSpace");
|
|
this.myCharts = echarts.init(parkingSpace);
|
|
this.myCharts.setOption({
|
|
series: [
|
|
{
|
|
type: "gauge",
|
|
progress: {
|
|
show: true,
|
|
width: -15,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
width: -15,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
length: 20,
|
|
lineStyle: {
|
|
width: 2,
|
|
color: "#999",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
distance: -10,
|
|
color: "#999",
|
|
fontSize: 12,
|
|
},
|
|
anchor: {
|
|
show: true,
|
|
showAbove: true,
|
|
size: 15,
|
|
itemStyle: {
|
|
borderWidth: 10,
|
|
},
|
|
},
|
|
title: {
|
|
fontSize: 12,
|
|
color: "#fff",
|
|
},
|
|
detail: {
|
|
valueAnimation: true,
|
|
fontSize: 18,
|
|
color: "#fff",
|
|
},
|
|
data: [
|
|
{
|
|
value: 62.89,
|
|
name: "停车位",
|
|
title: {
|
|
offsetCenter: ["0%", "70%"],
|
|
},
|
|
detail: {
|
|
offsetCenter: ["0%", "100%"],
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
});
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.box-bg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.parkingSpace {
|
|
width: 1440rem;
|
|
height: 1110rem;
|
|
}
|
|
</style>
|
|
|