no message

package-lock.json

@@ -12,7 +12,7 @@
         "axios": "^1.1.3",
         "cesium-navigation-es6": "^3.0.8",
         "dayjs": "^1.11.7",
-        "echarts": "^5.4.0",
+        "echarts": "^5.4.2",
         "echarts-liquidfill": "^3.1.0",
         "element-plus": "^2.2.16",
         "html2canvas": "^1.4.1",
@@ -762,12 +762,12 @@
       }
     },
     "node_modules/echarts": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.0.tgz",
-      "integrity": "sha512-uPsO9VRUIKAdFOoH3B0aNg7NRVdN7aM39/OjovjO9MwmWsAkfGyeXJhK+dbRi51iDrQWliXV60/XwLA7kg3z0w==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.2.tgz",
+      "integrity": "sha512-2W3vw3oI2tWJdyAz+b8DuWS0nfXtSDqlDmqgin/lfzbkB01cuMEN66KWBlmur3YMp5nEDEEt5s23pllnAzB4EA==",
       "dependencies": {
         "tslib": "2.3.0",
-        "zrender": "5.4.0"
+        "zrender": "5.4.3"
       }
     },
     "node_modules/echarts-liquidfill": {
@@ -2157,9 +2157,9 @@
       "dev": true
     },
     "node_modules/zrender": {
-      "version": "5.4.0",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",
-      "integrity": "sha512-rOS09Z2HSVGFs2dn/TuYk5BlCaZcVe8UDLLjj1ySYF828LATKKdxuakSZMvrDz54yiKPDYVfjdKqcX8Jky3BIA==",
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.3.tgz",
+      "integrity": "sha512-DRUM4ZLnoaT0PBVvGBDO9oWIDBKFdAVieNWxWwK0niYzJCMwGchRk21/hsE+RKkIveH3XHCyvXcJDkgLVvfizQ==",
       "dependencies": {
         "tslib": "2.3.0"
       }

package.json

@@ -11,7 +11,7 @@
     "axios": "^1.1.3",
     "cesium-navigation-es6": "^3.0.8",
     "dayjs": "^1.11.7",
-    "echarts": "^5.4.0",
+    "echarts": "^5.4.2",
     "echarts-liquidfill": "^3.1.0",
     "element-plus": "^2.2.16",
     "html2canvas": "^1.4.1",

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

@@ -3,108 +3,47 @@
 </template>
 
 <script>
-import 'echarts-liquidfill';
-export default {
-	props: {
-		isAxisChart: {
-			type: Boolean,
-			default: true,
+	import 'echarts-liquidfill';
+	export default {
+		props: {
+			chartData: {
+				type: Object,
+				default: {}
+			},
 		},
-		chartData: {
-			type: Object,
-			default:{}
+		data() {
+			return {
+				option: {},
+				echart: "",
+			};
 		},
-	},
-	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 {
+		methods: {
+			init(){
 				this.echart = this.$echarts.init(this.$refs.echarts);
-				this.echart.setOption(this.options);
-			}
-		},
-		initChartData() {
-			if (this.isAxisChart) {
-				this.axisOption = this.chartData
-				// this.axisOption.series = this.chartData
-			} else {
-				this.normalOption.series = this.chartData
+				this.echart.setOption(this.option);
+				window.addEventListener("resize", this.echart.resize);
 			}
 		},
-	},
-	watch: {
-		chartData: {
-			handler: function () {
-				this.initChart();
+		watch: {
+			chartData: {
+				handler: function() {
+					this.option = this.chartData
+					if (this.echart) {
+						this.echart.setOption(this.option);
+					} else {
+						this.init()
+					}
+				},
+				deep: true,
 			},
-			deep: true,
-		},
-	},
-	computed: {
-		options() {
-			return this.isAxisChart ? this.axisOption : this.normalOption;
 		},
-	},
-	mounted() {
+		mounted() {
+			this.init()
 
-	}
-};
+		}
+	};
 </script>
 
 <style scoped>
-	
+
 </style>

src/views/test/components/disaster.vue

@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
 	<jt-echarts style="width: 330rem;height: 220rem;margin:20rem 0 10rem 10rem;" :chartData="option"></jt-echarts>
 </template>
 
@@ -14,8 +14,35 @@
 
 		},
 		mounted() {
-			
+
 			this.option = {
+				// tooltip: {
+				// 	trigger: 'axis',
+				// 	triggerOn: "click",
+				// 	showContent: true,
+				// 	axisPointer: {
+				// 		type: 'cross', //shadow line cross
+				// 		crossStyle: {
+				// 			// color: '#999'
+				// 		}
+				// 	},
+				// 	formatter: function(params) {
+				// 		console.log('打印', params); 
+				// 		let data1 = params[0];
+				// 		let data2 = params[1];
+				// 		// return data1.name + '  ' + data2.name + '<br>' + '装机：' + data1.data +
+				// 		// 	' 亿千瓦<br>增长率：' + data2.data + ' %';
+				// 	}
+				// },
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						type: 'cross',
+						label: {
+							backgroundColor: '#6a7985'
+						}
+					}
+				},
 				grid: {
 					left: 23,
 					top: 30,
@@ -93,7 +120,7 @@
 					name: "指标",
 					min: 0,
 					minInterval: 1,
-					nameGap:0,
+					nameGap: 0,
 					nameLocation: "end",
 					axisTick: {
 						show: true
@@ -114,7 +141,7 @@
 						show: false,
 					},
 					axisLine: {
-						show:true,
+						show: true,
 						lineStyle: {
 							color: "lightgray",
 							width: 1
@@ -251,14 +278,309 @@
 					}
 				]
 			}
-			
-			
-			setTimeout(res=>{
-				this.option.grid.left = 22
-			},100)
+
+
+			setTimeout(res => {
+				// this.option.grid.left = 22
+			}, 100)
 		}
 	}
 </script>
 
 <style>
+</style> -->
+
+
+<template>
+	<div id="main"></div>
+</template>
+<script>
+	export default {
+		data() {
+			return {
+
+			}
+		},
+		mounted() {
+			var chartDom = document.getElementById('main');
+			var myChart = this.$echarts.init(chartDom);
+
+			let option = {
+				// tooltip: {
+				// 	trigger: 'axis',
+				// 	triggerOn: "click",
+				// 	showContent: true,
+				// 	axisPointer: {
+				// 		type: 'cross', //shadow line cross
+				// 		crossStyle: {
+				// 			// color: '#999'
+				// 		}
+				// 	},
+				// 	formatter: function(params) {
+				// 		console.log('打印', params); 
+				// 		let data1 = params[0];
+				// 		let data2 = params[1];
+				// 		// return data1.name + '  ' + data2.name + '<br>' + '装机：' + data1.data +
+				// 		// 	' 亿千瓦<br>增长率：' + data2.data + ' %';
+				// 	}
+				// },
+				tooltip: {
+					trigger: 'axis',
+					backgroundColor: "rgba(255,255,255,0.6)",
+					borderColor: "rgba(255,255,255,0.6)", //设置边框颜色
+					textStyle: {
+						color: "rgba(0,0,0,0.8)" //设置文字颜色
+					},
+					axisPointer: {
+						type: 'cross',
+						label: {
+							backgroundColor: '#6a7985'
+						}
+					}
+				},
+				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"
+									}
+								])
+							}
+						}
+					}
+				]
+			}
+			myChart.setOption(option);
+		}
+	}
+</script>
+<style scoped>
+	#main {
+		width: 100%;
+		height: 220rem;
+		margin-top: 15rem;
+	}
 </style>