no message

src/components/jt-echarts/jt-echarts.vue

@@ -4,6 +4,7 @@
 
 <script>
 import * as echarts from "echarts";
+import 'echarts-liquidfill'
 export default {
 	props: {
 		isAxisChart: {

src/views/Table/Table.vue

@@ -1,18 +1,19 @@
 <script setup>
-	
+	import BasicInfor from "../Table/components/BasicInfor.vue"
+	import WaterLeveChart from "../Table/components/WaterLevelChart.vue"
 </script>
 
 <template>
-	<jt-popup2  title="灌溉设备统计" ref="ggsbtj">
-		
+	<jt-popup2  title="农田基本信息" ref="BasicInfor">
+	<BasicInfor ></BasicInfor>
 	</jt-popup2>
 	
-	<jt-popup2  title="设备运行检测" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="sbyxjc">
+	<jt-popup2  title="田路工程" top="calc(calc(100% - 115rem) / 3 + 90rem)" ref="RoadProject">
 		
 	</jt-popup2>
 	
-	<jt-popup2  title="灌溉水位监测" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="qtnhzb">
-		
+	<jt-popup2  title="水利工程" top="calc(calc(100% - 115rem) / 3 + calc(100% - 115rem) / 3 + 90rem)" ref="WaterProject">
+		<WaterLeveChart></WaterLeveChart>
 	</jt-popup2>
 	
 	<jt-popup3  title="用水量统计" ref="ysltj">

src/views/Table/components/BasicInfor.vue

@@ -0,0 +1,20 @@
+<template>
+	<div class="Background"></div>
+	<div class="Text">
+		
+	</div>
+</template>
+
+<script>
+</script>
+<style>
+ .Background{
+	 
+	 margin-top: 10rem;
+	 margin-left:5rem ;
+	 height: 120rem;
+	 width: 120rem;
+	 background: url('@/assets/images/base.png') ;
+	 border: 1px solid #53b8ff;
+ }
+</style>

src/views/Table/components/WaterLevelChart.vue

@@ -0,0 +1,91 @@
+  <template>
+ 	<div style="display: inline-block;float:left">
+ 		<jt-echarts style="width: 166rem;height: 166rem;margin:10rem" :chartData="option"></jt-echarts>
+ 	</div>
+	<div class="text">
+		123123
+	</div>
+ </template>
+ 
+ <script>
+ 	export default {
+ 		data() {
+ 			return {
+ 				option: {}
+ 			}
+ 		},
+ 		created() {},
+ 		mounted() {
+ 			this.typeCharts0()
+ 		},
+ 		methods: {
+ 
+ 			typeCharts0() {
+ 				this.option = this.getOption();
+ 				// var chartDom = document.getElementById('echarts');
+ 				// var myChart = echarts.init(chartDom);
+ 				// myChart.setOption(option, true);
+ 			},
+ 			getOption(data) {
+ 				let option = {
+ 					tooltip: {
+ 						show: true
+ 					},
+ 					series: [{
+ 						name: '睡了',
+ 						type: 'liquidFill',
+ 						radius: '160rem',
+ 						data: [0.6],
+ 						label: {
+ 							normal: {
+ 								color: '#27e5f1',
+ 								insideColor: '#fff',
+ 								textStyle: {
+ 									fontSize: 40,
+ 									fontWeight: 'bold',
+ 								}
+ 							}
+ 						},
+ 						color: [{
+ 							type: 'linear',
+ 							x: 0,
+ 							y: 1,
+ 							x2: 0,
+ 							y2: 0,
+ 							colorStops: [{
+ 								offset: 1,
+ 								color: ['#6a7feb'], // 0% 处的颜色
+ 							}, {
+ 								offset: 0,
+ 								color: ['#27e5f1'], // 100% 处的颜色
+ 							}],
+ 							global: false // 缺省为 false
+ 						}],
+ 						outline: {
+ 							show: true,
+ 							borderDistance: 5,
+ 							itemStyle: {
+ 								borderColor: '#27e5f1',
+ 								borderWidth: 3
+ 							}
+ 						}
+ 					}]
+ 					
+ 				};
+ 				return option;
+ 			}
+ 
+ 		},
+ 
+ 	}
+ </script>
+ 
+ <style>
+	 .text{
+		 height:160rem;
+		 width:160rem;
+		 background-color: red;
+		 display: inline-block;
+	 }
+ </style>
+