no message

src/components/jt-charts/charts.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :id="id" :style="style"></div>
+	<div id="charts" :style="style"></div>
 </template>
 
 <script>
@@ -22,30 +22,13 @@
 			},
 			height: {
 				type: String,
-				default: '100%'
+				default: '270rem'
 			},
 			option: {
 				type: Object,
 				default () {
 					return {
-						title: {
-							text: 'ECharts 入门示例'
-						},
-						tooltip: {},
-						legend: {
-							data: ['销量']
-						},
-						xAxis: {
-							type: 'category',
-							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
-						},
-						yAxis: {
-							type: 'value'
-						},
-						series: [{
-							data: [820, 932, 901, 934, 1290, 1330, 1320],
-							type: 'line'
-						}]
+						
 					}
 				}
 			}
@@ -75,7 +58,7 @@
 		},
 		methods: {
 			init() {
-				this.chart = echarts.init(document.getElementById(this.id))
+				this.chart = echarts.init(document.getElementById('charts'))
 				this.chart.setOption(this.option)
 				window.addEventListener("resize", this.chart.resize);
 			}

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

@@ -10,20 +10,20 @@
 	<div :class="['popup-main',animationClass]" v-show="isshow" :isEmit="isEmit" id="popup"
 		:style="{height:height,width:width,top:top,right:right,minWidth:minWidth}" ref="popup">
 		<!-- <div class="borderstyle" :style="{height:height}"> -->
-			<!-- <div class="angle-border-blue left-top-border"></div> -->
-			<!-- <div class="angle-border-blue right-top-border"></div> -->
-			<!-- <div class="angle-border left-bottom-border"></div>
+		<!-- <div class="angle-border-blue left-top-border"></div> -->
+		<!-- <div class="angle-border-blue right-top-border"></div> -->
+		<!-- <div class="angle-border left-bottom-border"></div>
 			<div class="angle-border right-bottom-border"></div> -->
-			<div :class="longheader?'header long':'header'">
-				<div style="width: 35rem;"></div>
-				<span>{{title}}</span>
-				<!-- <i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'"
+		<div :class="longheader?'header long':'header'">
+			<div style="width: 35rem;"></div>
+			<span>{{title}}</span>
+			<!-- <i :class="store.userport == 'PC'?'iconfont icon-youjiantou':'iconfont icon-youjiantou'"
 					@click="closebasicLayer" style="font-size: 16rem;" /> -->
-			</div>
-			<div class="middle">
-				<slot></slot>
-			</div>
-			<!-- <div v-if="showfooter" class="footers"></div> -->
+		</div>
+		<div class="middle">
+			<slot></slot>
+		</div>
+		<!-- <div v-if="showfooter" class="footers"></div> -->
 		<!-- </div> -->
 	</div>
 </template>
@@ -285,6 +285,13 @@
 		}
 	}
 
+	.middle::-webkit-scrollbar {
+		width: 0px;
+		background-color: rgba(0, 0, 0, 0);
+		// 滚动条整体样式
+		// 高宽分别对应横竖滚动条的尺寸
+	}
+
 	.long {
 		background: url('@/assets/images/longheader.png') no-repeat !important;
 		background-size: 100% 100% !important;

src/views/Map3d/components/waterChart.vue

@@ -1,89 +0,0 @@
-<template>
-	<div class="echart" id="mychart" :style="myChartStyle"></div>
-</template>
-
-<script>
-	import * as echarts from "echarts";
-
-	export default {
-		data() {
-			return {
-				xData: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //横坐标
-				yData: [23, 24, 18, 25, 27, 28, 25, 26, 25, 18, 19, 23], //人数数据
-				taskDate: [10, 11, 9, 17, 14, 13, 14, 15, 14, 11, 14, 16],
-				myChartStyle: {
-					float: "left",
-					width: "100%",
-					height: "279rem"
-				} //图表样式
-			};
-		},
-		mounted() {
-			this.initEcharts();
-		},
-		methods: {
-			initEcharts() {
-				// 多列柱状图
-				const mulColumnZZTData = {
-					xAxis: {
-						data: this.xData,
-					},
-					// 图例
-					legend: {
-						data: ["人数", "任务数"],
-						top: "0%",
-						textStyle: {
-							color: '#ffffff' //字体颜色
-						},
-
-					},
-					yAxis: {
-						axisLabel: {
-							formatter: "{value}",
-							color: "#e2e9ff",
-						},
-						axisLine: {
-							show: false,
-						},
-						splitLine: {
-							lineStyle: {
-								color: "rgba(255,255,255,0.12)",
-							},
-						},
-
-					},
-					series: [{
-							type: "bar", //形状为柱状图
-							data: this.yData,
-							name: "人数", // legend属性
-							label: {
-								// 柱状图上方文本标签，默认展示数值信息
-								show: false,
-								position: "top"
-							}
-						},
-						{
-							type: "bar", //形状为柱状图
-							data: this.taskDate,
-							name: "任务数", // legend属性
-							label: {
-								// 柱状图上方文本标签，默认展示数值信息
-								show: false,
-								position: "top"
-							}
-						}
-					]
-				};
-				const myChart = echarts.init(document.getElementById("mychart"));
-				myChart.setOption(mulColumnZZTData);
-				//随着屏幕大小调节图表
-				window.addEventListener("resize", () => {
-					myChart.resize();
-				});
-			}
-		}
-	};
-</script>
-<style lang="scss" scoped>
-
-</style>

src/views/Map3d/components/ysltj.vue

@@ -1,25 +1,12 @@
 <script setup>
-	import {
-		inject
-	} from "vue";
-	import html2canvas from 'html2canvas';
-	import waterChart from "./waterChart.vue"
-	import {
-		blobToBase64,
-		base64ToBlob
-	} from '@/assets/js/blobtobase64';
-	const getMapInstance = inject("getMapInstance");
-	jt3d = getMapInstance();
+
 </script>
 
 <template>
-	<div class="mainview">
-		<div class="header">
-		</div>
 		<div class="middleviewer">
-			<waterChart></waterChart>
+			<!-- <waterChart></waterChart> -->
+			<jt-charts :option="mulColumnZZTData" ></jt-charts>
 		</div>
-	</div>
 </template>
 
 <script>
@@ -29,43 +16,124 @@
 			return {
 				// viewersName: '', //视角标签名称
 				// ImgurlList: [], //截图地址列表
-				cdata: {
-				        xData: [],
-				        yData: [],
-				      },
+				xData: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //横坐标
+				yData: [23, 24, 18, 25, 27, 28, 25, 26, 25, 18, 19, 23], //人数数据
+				taskDate: [16, 18, 19, 17, 18, 20, 19, 15, 16, 18, 17, 16],
+				mulColumnZZTData:{}
 
 			}
 		},
 		methods: {
-		
-			  },
-	
-			getName() {
+			initEcharts() {
+				// 多列柱状图
+				this.mulColumnZZTData = {
+					xAxis: {
+						data: this.xData,
+					},
+
+					tooltip: { //提示框组件
+						trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
+						axisPointer: {
+							// 坐标轴指示器，坐标轴触发有效
+							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+						},
+						backgroundColor: "rgba(255,255,255,0.2)",
+						borderColor: "rgba(255,255,255,0.2)",
+						textStyle: { // 提示框浮层的文本样式。
+							color: 'rgba(255,255,255,0.8)',
+
+						},
+
+
+					},
+
+					// 图例
+					legend: {
+						data: ["去年灌溉", "今年灌溉"],
+						top: "0%",
+						textStyle: {
+							color: '#ffffff' //字体颜色
+						},
+
+					},
+					yAxis: {
+						axisLabel: {
+							formatter: "{value}",
+							color: "#e2e9ff",
+						},
+						axisLine: {
+							show: false,
+						},
+						splitLine: {
+							lineStyle: {
+								color: "rgba(255,255,255,0.12)",
+							},
+						},
+
+					},
+					series: [{
+							type: "bar", //形状为柱状图
+							data: this.yData,
+							itemStyle: {
+								// 修改柱子圆角
+								barBorderRadius: [30, 30, 30, 30],
+								shadowColor: "rgba(84,112,198,1)",
+								shadowBlur: 4,
+							},
+							name: "去年灌溉", // legend属性
+							label: {
+								// 柱状图上方文本标签，默认展示数值信息
+								show: false,
+								position: "top"
+							}
+						},
+						{
+							type: "bar", //形状为柱状图
+							data: this.taskDate,
+							itemStyle: {
+								// 修改柱子圆角
+								barBorderRadius: [30, 30, 30, 30],
+								shadowColor: "rgba(145,204,117,1)",
+								shadowBlur: 4,
+							},
+							name: "今年灌溉", // legend属性
+							label: {
+								// 柱状图上方文本标签，默认展示数值信息
+								show: false,
+								position: "top"
+							}
+						}
+					]
+				};
+			}
+
+		},
+
+		/* 	getName() {
 				this.viewersName = document.getElementById("inputValue").value;
-			},
+			}, */
 
 
 		mounted() {
-
+			this.initEcharts()
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-	.mainview {
-		top:10rem;
+/* 	.mainview {
 		width: 100%;
 		height: 100%;
-	}
+	} */
+
 	.middleviewer {
-		
 		width: 300rem;
 		height: 100%;
 		margin-left: 40rem;
 	}
 
-	.middle::-webkit-scrollbar {
+/* 	::-webkit-scrollbar {
 		width: 0rem;
 		height: 0rem;
-	}
+	} */
 </style>