柱状图修改

src/views/pages/components/ltbgbarChart.vue

@@ -87,19 +87,21 @@
 						}
 					},
 					yAxis: {
-						max: maxValue * 1.2, // 留出一些空间
+						max: maxValue +10, // 留出一些空间
 						axisLabel: {
 							color: "#8CBAEE"
 						},
 						axisLine: {
+							show:true,
 							lineStyle: {
 								color: "#8CBAEE"
 							}
 						},
 						axisTick: {
-							show: false
+							show: true
 						},
 						splitLine: {
+							show:false,
 							lineStyle: {
 								color: "#0B0842"
 							}
@@ -117,6 +119,9 @@
 						     name: '背景',
 						     type: 'custom',
 						     barWidth: 40,
+							 tooltip: {
+							     show: false  // 直接禁用该系列的tooltip
+							 },
 						     barGap: '-100%', // 使背景柱与数据柱重叠
 						     renderItem: (params, api) => {
 						     	const basicsCoord = api.coord([api.value(0), api.value(1)]);
@@ -138,22 +143,10 @@
 						     					]
 						     				},
 						     				style: {
-						     					fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-						     							offset: 0,
-						     							color: '#1F98CC'
-						     						},
-						     						{
-						     								offset: 0.1,
-						     								color: '#013262'
-						     							},
-						     						{
-						     								offset: 0.9,
-						     								color: '#013262'
-						     							},
-						     						{
-						     							offset: 1,
-						     							color: '#1F98CC'
-						     						}
+						     					fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+													{offset: 0,color: '#1F98CC'},
+						     						{offset: 0.1,color: '#013262'},
+						     						{offset: 0.9,color: '#013262'},{offset: 1,color: '#1F98CC'}
 						     					])
 						     				}
 						     			},
@@ -169,22 +162,11 @@
 						     					]
 						     				},
 						     				style: {
-						     					fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-						     							offset: 0,
-						     							color: '#1F98CC'
-						     						},
-						     						{
-						     								offset: 0.1,
-						     								color: '#013262'
-						     							},
-						     						{
-						     								offset: 0.9,
-						     								color: '#013262'
-						     							},
-						     						{
-						     							offset: 1,
-						     							color: '#1F98CC'
-						     						}
+						     					fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
+													{offset: 0,color: '#1F98CC'},
+						     						{offset: 0.1,color: '#013262'},
+						     						{offset: 0.9,color: '#013262'},
+						     						{offset: 1,color: '#1F98CC'}
 						     					])
 						     				}
 						     			},
@@ -200,7 +182,10 @@
 						     					]
 						     				},
 						     				style: {
-						     					fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#1F98CC'},{offset: 0.5,color: '#1F98CC'},{offset: 1,color: '#1F98CC'}
+						     					fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+													{offset: 0,color: '#1F98CC'},
+													{offset: 0.1,color: '#013262'},
+													{offset: 1,color: '#1F98CC'}
 						     					])
 						     				}
 						     			}
@@ -208,10 +193,11 @@
 						     	};
 						     },
 						     data: date.map(() => maxValue  * 1.1), // 背景柱统一高度
-						     animation: false
+						     animation: false,
 						},
 						
 						{
+						name:'告警比重',
 						type: "custom",
 						data: gjzs,
 						renderItem: (params, api) => {
@@ -234,18 +220,10 @@
 											]
 										},
 										style: {
-											fill: new echarts.graphic.LinearGradient(0, 0, 1,1, [{
-													offset: 0,
-													color: '#BDE2FC'
-												},
-												{
-														offset: 0.1,
-														color: '#006FBD'
-													},
-												{
-													offset: 1,
-													color: '#0883CD'
-												}
+											fill: new echarts.graphic.LinearGradient(0, 0, 1,1, [
+												{offset: 0,color: '#BDE2FC'},
+												{offset: 0.1,color: '#006FBD'},
+												{offset: 1,color: '#0883CD'}
 											])
 										}
 									},
@@ -261,18 +239,10 @@
 											]
 										},
 										style: {
-											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-													offset: 0,
-													color: '#59B5F5'
-												},
-												{
-														offset: 0.1,
-														color: '#59B5F5'
-													},
-												{
-													offset: 1,
-													color: '#0B61A3'
-												}
+											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+												{offset: 0,color: '#59B5F5'},
+												{offset: 0.1,color: '#59B5F5'},
+												{offset: 1,color: '#0B61A3'}
 											])
 										}
 									},
@@ -288,7 +258,8 @@
 											]
 										},
 										style: {
-											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#1F98CC'},
+											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+												{offset: 0,color: '#1F98CC'},
 												{offset: 1,color: '#1F98CC'}
 											])
 										}

src/views/pages/index.vue

@@ -111,6 +111,7 @@
 					<div class="barbox">
 						<ltbar-chart :chart-data="ltbarconut"></ltbar-chart>
 						<!-- <img src="@/assets/images/barbg.png" class="barbg"/> -->
+						<!-- <div class="barline"></div> -->
 					</div>
 					<!-- 仪表盘 -->
 					<!-- <div style="height: 193px;flex: 1;">
@@ -408,9 +409,9 @@ export default {
 	  }
   }
 }
-.barbox{
-	width: 390px;height: 193px;flex:0 0 auto;
-	.barbg{width: 389px;height: 26px;}
+.barbox{position: relative;
+	width: 390px;height: 193px;flex:0 0 auto;background: url('~@/assets/images/barbg.png') no-repeat;background-size: 389px 26px;background-position: 10px 140px;
+	.barline{border-left: 2px dashed #7FD6FF;position: absolute;right: 0;top:20px;width: 1px;bottom: 35px;}
 }
 .morepie{display: flex;flex-wrap: wrap;align-items: center;
 	.pieboxs{