柱状图样式修改

src/views/Map3d/components/ysltj.vue

@@ -3,10 +3,10 @@
 </script>
 
 <template>
-		<div class="middleviewer">
-			<!-- <waterChart></waterChart> -->
-			<jt-charts :option="mulColumnZZTData" ></jt-charts>
-		</div>
+	<div class="middleviewer">
+		<!-- <waterChart></waterChart> -->
+		<jt-echarts :chartData="option" style="width: 300rem;height: 275rem;margin:10rem 0 0 0;"></jt-echarts>
+	</div>
 </template>
 
 <script>
@@ -19,41 +19,45 @@
 				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:{}
+				option: {}
 
 			}
 		},
 		methods: {
 			initEcharts() {
 				// 多列柱状图
-				this.mulColumnZZTData = {
+				this.option = {
 					xAxis: {
 						data: this.xData,
 					},
 
-					tooltip: { //提示框组件
-						trigger: 'item', //item数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
-						axisPointer: {
-							// 坐标轴指示器，坐标轴触发有效
-							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+					// 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)',
+
+					// 	},
+					// },
+					toolbox: {
+						show: true,
+						/* feature: {
+							restore: {
+								show: true
 						},
-						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: "5%",
 						textStyle: {
 							color: '#ffffff' //字体颜色
-						},		
+						},
 
 					},
 					yAxis: {
@@ -74,21 +78,17 @@
 					series: [{
 							type: "bar", //形状为柱状图
 							data: this.yData,
-							name: "今年灌溉", // legend属性
+							name: "今年灌溉m³", // legend属性
 							itemStyle: {
 								// 修改柱子圆角
 								barBorderRadius: [30, 30, 30, 30],
 								shadowColor: "rgba(84,112,198,1)",
 								shadowBlur: 4,
 							},
-							label: {
-								// 柱状图上方文本标签，默认展示数值信息
-								show: false,
-								position: "top"
-							}
 						},
 						{
 							type: "bar", //形状为柱状图
+							name: "去年灌溉m³", // legend属性
 							data: this.taskDate,
 							itemStyle: {
 								// 修改柱子圆角
@@ -96,16 +96,12 @@
 								shadowColor: "rgba(145,204,117,1)",
 								shadowBlur: 4,
 							},
-							name: "去年灌溉", // legend属性
-							label: {
-								// 柱状图上方文本标签，默认展示数值信息
-								show: false,
-								position: "top"
-							}
+						
 						}
 					]
 				};
-			}
+			},
+			
 
 		},
 
@@ -113,13 +109,26 @@
 
 		mounted() {
 			this.initEcharts()
+			let _this = this
+			var t1=setTimeout(function() {
+				_this.option.series = [{
+						data: _this.yData
+					},
+					{
+						data: _this.taskDate
+					}
+				]
+
+			}, 1000);
+			
 			
+
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-/* 	.mainview {
+	/* 	.mainview {
 		width: 100%;
 		height: 100%;
 	} */
@@ -130,7 +139,7 @@
 		margin-left: 40rem;
 	}
 
-/* 	::-webkit-scrollbar {
+	/* 	::-webkit-scrollbar {
 		width: 0rem;
 		height: 0rem;
 	} */