no message

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

@@ -1,5 +1,5 @@
 <template>
-	<div ref="echarts"></div>
+	<div ref="echarts" style="width: 100%;height: 100%;"></div>
 </template>
 
 <script>
@@ -12,12 +12,7 @@ export default {
 		},
 		chartData: {
 			type: Object,
-			default() {
-				return {
-					xData: [],
-					series: [],
-				};
-			},
+			default:{}
 		},
 	},
 	data() {
@@ -84,10 +79,10 @@ export default {
 		},
 		initChartData() {
 			if (this.isAxisChart) {
-				this.axisOption.xAxis.data = this.chartData.xData;
-				this.axisOption.series = this.chartData.series;
+				this.axisOption = this.chartData
+				// this.axisOption.series = this.chartData
 			} else {
-				this.normalOption.series = this.chartData.series;
+				this.normalOption.series = this.chartData
 			}
 		},
 	},
@@ -104,6 +99,10 @@ export default {
 			return this.isAxisChart ? this.axisOption : this.normalOption;
 		},
 	},
+	mounted() {
+		console.log(444777)
+		console.log('55556',this.chartData)
+	}
 };
 </script>
 

src/main.js

@@ -67,6 +67,7 @@ app.component("jt-popup3",jtpopup3)
 app.component("jt-popup-if",jtpopupif)
 app.component("jt-drawer",jtdrawer)
 app.component("jt-charts",jtcharts)
+app.component("jt-echarts",jtecharts)
 
 // app.use(pinia) 在store使用
 app.use(router);

src/views/Map3d/components/qtnhzb.vue

@@ -1,12 +1,13 @@
 <template>
-	<jt-echarts></jt-echarts>
+	<jt-echarts style="width: 330rem;height: 270rem;margin:10rem 0 0 0;" :chartData="option"></jt-echarts>
 </template>
 
 <script>
 	export default {
 		data() {
 			return {
-
+				option: {},
+				app: {}
 			}
 		},
 		methods: {
@@ -50,7 +51,7 @@
 			})();
 			this.option = {
 				title: {
-					text: 'Dynamic Data'
+					// text: '水位监测信息'
 				},
 				tooltip: {
 					trigger: 'axis',
@@ -61,15 +62,20 @@
 						}
 					}
 				},
-				legend: {},
+				legend: {
+					// 图例文字颜色
+					textStyle: {
+						color: "#fff",
+					},
+				},
 				toolbox: {
 					show: true,
 					feature: {
-						dataView: {
-							readOnly: false
-						},
-						restore: {},
-						saveAsImage: {}
+						// dataView: {
+						// 	readOnly: false
+						// },
+						// restore: {},
+						// saveAsImage: {}
 					}
 				},
 				dataZoom: {
@@ -80,18 +86,45 @@
 				xAxis: [{
 						type: 'category',
 						boundaryGap: true,
-						data: categories
+						data: categories,
+						axisLabel: {
+							//x轴文字的配置
+							show: true,
+							textStyle: {
+								color: "rgba(255,225,255,1)",
+							},
+						},
+
 					},
 					{
 						type: 'category',
 						boundaryGap: true,
-						data: categories2
+						data: categories2,
+						axisLabel: {
+							//x轴文字的配置
+							show: true,
+							textStyle: {
+								color: "rgba(255,225,255,1)",
+							},
+						},
 					}
 				],
 				yAxis: [{
 						type: 'value',
 						scale: true,
-						name: 'Price',
+						name: '水位/m',
+						axisLabel: {
+							//x轴文字的配置
+							show: true,
+							textStyle: {
+								color: "rgba(255,225,255,1)",
+							},
+						},
+						nameTextStyle: {
+							//y轴上方单位的颜色
+							color: "#fff",
+						},
+						nameGap: 25,
 						max: 30,
 						min: 0,
 						boundaryGap: [0.2, 0.2]
@@ -99,27 +132,40 @@
 					{
 						type: 'value',
 						scale: true,
-						name: 'Order',
+						name: '预警/m',
 						max: 1200,
+						nameGap: 25,
 						min: 0,
-						boundaryGap: [0.2, 0.2]
+						boundaryGap: [0.2, 0.2],
+						nameTextStyle: {
+							//y轴上方单位的颜色
+							color: "#fff",
+						},
+						axisLabel: {
+							//x轴文字的配置
+							show: true,
+							textStyle: {
+								color: "rgba(255,225,255,1)",
+							},
+						},
 					}
 				],
 				series: [{
-						name: 'Dynamic Bar',
+						name: '水位高度',
 						type: 'bar',
 						xAxisIndex: 1,
 						yAxisIndex: 1,
 						data: data
 					},
 					{
-						name: 'Dynamic Line',
+						name: '水位预警',
 						type: 'line',
 						data: data2
 					}
 				]
 			};
-			app.count = 11;
+			this.app.count = 11;
+			let _this = this
 			setInterval(function() {
 				let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
 				data.shift();
@@ -129,23 +175,21 @@
 				categories.shift();
 				categories.push(axisData);
 				categories2.shift();
-				categories2.push(app.count++);
-				// myChart.setOption({
-				// 	xAxis: [{
-				// 			data: categories
-				// 		},
-				// 		{
-				// 			data: categories2
-				// 		}
-				// 	],
-				// 	series: [{
-				// 			data: data
-				// 		},
-				// 		{
-				// 			data: data2
-				// 		}
-				// 	]
-				// });
+				categories2.push(_this.app.count++);
+				_this.option.xAxis = [{
+						data: categories
+					},
+					{
+						data: categories2
+					}
+				]
+				_this.option.series = [{
+						data: data
+					},
+					{
+						data: data2
+					}
+				]
 			}, 2100);
 		}
 	}