no message

src/components/jt-popup/jt-popup2.vue

@@ -211,7 +211,7 @@
 
 		//滚动条一直显示
 		.middle {
-			height: calc(100% - 35rem);
+			height: calc(100% - 25rem);
 			width: 100%;
 			overflow-y: scroll;
 			padding: 0 0 0 0;

src/components/jt-popup/jt-popup3.vue

@@ -211,7 +211,7 @@
 
 		//滚动条一直显示
 		.middle {
-			height: calc(100% - 35rem);
+			height: calc(100% - 30rem);
 			width: 100%;
 			overflow-y: scroll;
 			padding: 0 0 0 0;

src/views/test/components/WeatherWatch.vue

@@ -125,6 +125,7 @@
 			background-size:100% 100%;
 			width: 140rem;
 			height: 52rem;
+			margin-top: 5rem;
 		}
 		.fengxiang{
 			background:url('@/assets/images/qixiang/cloudstreet.png') no-repeat;

src/views/test/components/disaster.vue

@@ -1,8 +1,264 @@
 <template>
+	<jt-echarts style="width: 330rem;height: 240rem;margin:10rem 0 10rem 10rem;" :chartData="option"></jt-echarts>
 </template>
 
 <script>
+	export default {
+		data() {
+			return {
+				option: {},
+				app: {}
+			}
+		},
+		methods: {
+
+		},
+		mounted() {
+			
+			this.option = {
+				grid: {
+					left: 23,
+					top: 30,
+					right: 22,
+					bottom: 10,
+					containLabel: true //false是依据坐标轴来对齐的,true是依据坐标轴上面的文字边界来对齐
+				},
+				legend: {
+					top: -3,
+					right: 20,
+					itemGap: 5, //图例每项之间的间隔
+					height: 10,
+					itemWidth: 25, //图例标记的图形宽度
+					itemHeight: 10,
+					padding: [5, 0, 0, 0],
+					textStyle: {
+						padding: [1, 0, 0, -5]
+					},
+					data: [{
+							name: "温度℃",
+							textStyle: {
+								color: "#18c196"
+							}
+						},
+						{
+							name: "气压Kpa",
+							textStyle: {
+								color: "#ff976a"
+							}
+						},
+						{
+							name: "辐射W/㎡",
+							textStyle: {
+								color: "#f15441"
+							}
+						},
+						{
+							name: "湿度%RH",
+							textStyle: {
+								color: "#0089ff"
+							}
+						}
+					]
+				},
+				xAxis: {
+					type: "category",
+					boundaryGap: false, //防止统计图左侧和纵轴有间隙
+					axisTick: {
+						show: false
+					}, //隐藏纵坐标刻度小线条
+					nameTextStyle: {
+						//y轴上方单位的颜色
+						color: "#fff",
+					},
+					axisLabel: {
+						//x轴文字的配置
+						show: true,
+						textStyle: {
+							color: "rgba(255,225,255,1)",
+						},
+					},
+					splitLine: {
+						show: false,
+					},
+					axisLine: {
+						lineStyle: {
+							color: "lightgray",
+							width: 1
+						}
+					},
+					data: ["5/1", "5/2", "5/3", "5/4", "5/5"] //横坐标的标签文字
+				},
+				yAxis: {
+					type: "value",
+					name: "指标",
+					min: 0,
+					minInterval: 1,
+					nameGap:0,
+					nameLocation: "end",
+					axisTick: {
+						show: true
+					}, //隐藏纵坐标刻度小线条
+					nameTextStyle: {
+						//y轴上方单位的颜色
+						color: "#fff",
+					},
+
+					axisLabel: {
+						//x轴文字的配置
+						show: true,
+						textStyle: {
+							color: "rgba(255,225,255,1)",
+						},
+					},
+					splitLine: {
+						show: false,
+					},
+					axisLine: {
+						show:true,
+						lineStyle: {
+							color: "lightgray",
+							width: 1
+						}
+					}
+				},
+				series: [{
+						name: "温度℃",
+						smooth: false, //平滑
+						type: "line",
+						symbolSize: 5, //折线拐点大小
+						data: [22, 23, 25, 28, 25], //纵坐标值
+						itemStyle: {
+							normal: {
+								color: "#18c196", //图例颜色
+								borderWidth: 4,
+								borderColor: "#18c196",
+								lineStyle: {
+									color: "#18c196",
+									width: 2
+								}
+							}
+						},
+						areaStyle: {
+							normal: {
+								// 渐变填充色（线条下半部分）
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#18c196"
+									},
+									{
+										offset: 1,
+										color: "#18c19600"
+									}
+								])
+							}
+						}
+					},
+					{
+						name: "气压Kpa",
+						smooth: false, //平滑
+						type: "line",
+						symbolSize: 5, //折线拐点大小
+						data: [13, 16, 13, 21, 11], //纵坐标值
+						itemStyle: {
+							normal: {
+								color: "#ff976a", //图例颜色
+								borderWidth: 2,
+								borderColor: "#ff976a",
+								lineStyle: {
+									color: "#ff976a",
+									width: 1
+								}
+							}
+						},
+						areaStyle: {
+							normal: {
+								// 渐变填充色（线条下半部分）
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#ff976a"
+									},
+									{
+										offset: 1,
+										color: "#ff976a00"
+									}
+								])
+							}
+						}
+					},
+					{
+						name: "辐射W/㎡",
+						smooth: false, //平滑
+						type: "line",
+						symbolSize: 5, //折线拐点大小
+						data: [15, 13, 21, 20, 14], //纵坐标值
+						itemStyle: {
+							normal: {
+								color: "#f15441", //图例颜色
+								borderWidth: 2,
+								borderColor: "#f15441",
+								lineStyle: {
+									color: "#f15441",
+									width: 1
+								}
+							}
+						},
+						areaStyle: {
+							normal: {
+								// 渐变填充色（线条下半部分）
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#f15441"
+									},
+									{
+										offset: 1,
+										color: "#f1544100"
+									}
+								])
+							}
+						}
+					},
+					{
+						name: "湿度%RH",
+						smooth: false, //平滑
+						type: "line",
+						symbolSize: 5, //折线拐点大小
+						data: [9, 10, 11, 5, 8], //纵坐标值
+						itemStyle: {
+							normal: {
+								color: "#0089ff", //图例颜色
+								borderWidth: 2,
+								borderColor: "#0089ff",
+								lineStyle: {
+									color: "#0089ff",
+									width: 1
+								}
+							}
+						},
+						areaStyle: {
+							normal: {
+								// 渐变填充色（线条下半部分）
+								color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+										offset: 0,
+										color: "#0089ff"
+									},
+									{
+										offset: 1,
+										color: "#0089ff00"
+									}
+								])
+							}
+						}
+					}
+				]
+			}
+			
+			
+			setTimeout(res=>{
+				this.option.grid.left = 22
+			},100)
+		}
+	}
 </script>
 
 <style>
-</style>
+</style>

src/views/test/test.vue

@@ -1,5 +1,6 @@
 <script setup>
-	import WeatherWatch from './components/WeatherWatch.vue'
+	import WeatherWatch from './components/WeatherWatch.vue';
+	import disaster from './components/disaster.vue';
 </script>
 
 <template>