no message

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

@@ -0,0 +1,112 @@
+<template>
+	<div ref="echarts"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+	props: {
+		isAxisChart: {
+			type: Boolean,
+			default: true,
+		},
+		chartData: {
+			type: Object,
+			default() {
+				return {
+					xData: [],
+					series: [],
+				};
+			},
+		},
+	},
+	data() {
+		return {
+			axisOption: {
+				legend: {
+					// 图例文字颜色
+					textStyle: {
+						color: "#333",
+					},
+				},
+				grid: {
+					left: "20%",
+				},
+				// 提示框
+				tooltip: {
+					trigger: "axis",
+				},
+				xAxis: {
+					type: "category", // 类目轴
+					data: [],
+					axisLine: {
+						lineStyle: {
+							color: "#17b3a3",
+						},
+					},
+					axisLabel: {
+						interval: 0,
+						color: "#333",
+					},
+				},
+				yAxis: [
+					{
+						type: "value",
+						axisLine: {
+							lineStyle: {
+								color: "#17b3a3",
+							},
+						},
+					},
+				],
+				color: ["#2ec7c9", "#b6a2de"],
+				series: [],
+			},
+			normalOption: {
+				tooltip: {
+					trigger: "item",
+				},
+				color: ["#0f78f4", "#dd536b", "#9462e5", "#a6a6a6", "#e1bb22", "#39c362", "#3ed1cf"],
+				series: [],
+			},
+			echart: "",
+		};
+	},
+	methods: {
+		initChart() {
+			this.initChartData();
+			if (this.echart) {
+				this.echart.setOption(this.options);
+			} else {
+				this.echart = echarts.init(this.$refs.echarts);
+				this.echart.setOption(this.options);
+			}
+		},
+		initChartData() {
+			if (this.isAxisChart) {
+				this.axisOption.xAxis.data = this.chartData.xData;
+				this.axisOption.series = this.chartData.series;
+			} else {
+				this.normalOption.series = this.chartData.series;
+			}
+		},
+	},
+	watch: {
+		chartData: {
+			handler: function () {
+				this.initChart();
+			},
+			deep: true,
+		},
+	},
+	computed: {
+		options() {
+			return this.isAxisChart ? this.axisOption : this.normalOption;
+		},
+	},
+};
+</script>
+
+<style scoped>
+	
+</style>

src/main.js

@@ -31,6 +31,7 @@ import jtpopup3 from './components/jt-popup/jt-popup3.vue'
 import jtpopupif from './components/jt-popup/jt-popup-if.vue'
 import jtdrawer from './components/jt-drawer/drawer.vue'
 import jtcharts from './components/jt-charts/charts.vue'
+import jtecharts from './components/jt-echarts/jt-echarts.vue'
 
 // 引入jt3dSDK
 import '/public/jt3dSDK/index.css';

src/views/Map3d/Map3DMain.vue

@@ -49,7 +49,8 @@
 	import RightHeading from "./components/RightHeading.vue";
 	import ggsbtj from "./components/ggsbtj.vue";
 	import ysltj from "./components/ysltj.vue";
-	import sbyxjc from "./components/sbyxjc.vue"
+	import sbyxjc from "./components/sbyxjc.vue";
+	import qtnhzb from "./components/qtnhzb.vue"
 	import {
 		provide
 	} from "vue";
@@ -98,7 +99,7 @@
 				<sbyxjc ref="_sbyxjc"></sbyxjc>
 			</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="qtnhzb">
 				<qtnhzb ref="_qtnhzb"></qtnhzb>
 			</jt-popup2>
 			

src/views/Map3d/components/qtnhzb.vue

@@ -0,0 +1,155 @@
+<template>
+	<jt-echarts></jt-echarts>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+
+		},
+		mounted() {
+			const categories = (function() {
+				let now = new Date();
+				let res = [];
+				let len = 10;
+				while (len--) {
+					res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
+					now = new Date(+now - 2000);
+				}
+				return res;
+			})();
+			const categories2 = (function() {
+				let res = [];
+				let len = 10;
+				while (len--) {
+					res.push(10 - len - 1);
+				}
+				return res;
+			})();
+			const data = (function() {
+				let res = [];
+				let len = 10;
+				while (len--) {
+					res.push(Math.round(Math.random() * 1000));
+				}
+				return res;
+			})();
+			const data2 = (function() {
+				let res = [];
+				let len = 0;
+				while (len < 10) {
+					res.push(+(Math.random() * 10 + 5).toFixed(1));
+					len++;
+				}
+				return res;
+			})();
+			this.option = {
+				title: {
+					text: 'Dynamic Data'
+				},
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'cross',
+						label: {
+							backgroundColor: '#283b56'
+						}
+					}
+				},
+				legend: {},
+				toolbox: {
+					show: true,
+					feature: {
+						dataView: {
+							readOnly: false
+						},
+						restore: {},
+						saveAsImage: {}
+					}
+				},
+				dataZoom: {
+					show: false,
+					start: 0,
+					end: 100
+				},
+				xAxis: [{
+						type: 'category',
+						boundaryGap: true,
+						data: categories
+					},
+					{
+						type: 'category',
+						boundaryGap: true,
+						data: categories2
+					}
+				],
+				yAxis: [{
+						type: 'value',
+						scale: true,
+						name: 'Price',
+						max: 30,
+						min: 0,
+						boundaryGap: [0.2, 0.2]
+					},
+					{
+						type: 'value',
+						scale: true,
+						name: 'Order',
+						max: 1200,
+						min: 0,
+						boundaryGap: [0.2, 0.2]
+					}
+				],
+				series: [{
+						name: 'Dynamic Bar',
+						type: 'bar',
+						xAxisIndex: 1,
+						yAxisIndex: 1,
+						data: data
+					},
+					{
+						name: 'Dynamic Line',
+						type: 'line',
+						data: data2
+					}
+				]
+			};
+			app.count = 11;
+			setInterval(function() {
+				let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
+				data.shift();
+				data.push(Math.round(Math.random() * 1000));
+				data2.shift();
+				data2.push(+(Math.random() * 10 + 5).toFixed(1));
+				categories.shift();
+				categories.push(axisData);
+				categories2.shift();
+				categories2.push(app.count++);
+				myChart.setOption({
+					xAxis: [{
+							data: categories
+						},
+						{
+							data: categories2
+						}
+					],
+					series: [{
+							data: data
+						},
+						{
+							data: data2
+						}
+					]
+				});
+			}, 2100);
+		}
+	}
+</script>
+
+<style>
+</style>

src/views/Map3d/components/sbyxjc.vue

@@ -70,7 +70,7 @@
 			</div>
 			<div class="chushuikou4">
 				<div class="chushuikou2-1">
-					<label>6号机井</label>
+					<label>7号机井</label>
 					<label style="color:'#ecec66';">200A</label>
 					<label >100/150</label>
 					<label >80m³/h</label>
@@ -79,7 +79,7 @@
 			</div>
 			<div class="chushuikou5">
 				<div class="chushuikou2-1">
-					<label>6号机井</label>
+					<label>8号机井</label>
 					<label style="color:'#ecec66';">200A</label>
 					<label >100/150</label>
 					<label >80m³/h</label>