1

src/views/pages/components/jbbarChart.vue

@@ -57,6 +57,12 @@ export default {
     },
 	setOptions({ date,gjzs, bfb} = {}) {
 	  this.chart.setOption({
+		  tooltip: {
+		      trigger: 'axis',
+		      axisPointer: {
+		        type: 'shadow'
+		      },
+		    },
 		  grid: { x: 50, y: 25, x2: 30, y2: 35 },
 			  xAxis: {
 			    data: date,
@@ -86,24 +92,19 @@ export default {
 					}
 				},
 			    axisLabel: {
-			      color: '#999'
+			      color: '#fff'
 			    }
 			  },
-			  // dataZoom: [
-			  //   {
-			  //     type: 'inside'
-			  //   }
-			  // ],
 			  title: {
-			      text: '件',
-			  			  left: "20",
-			  			  top: '-5',
-			  			  textStyle: {
-			  			    color: "#FFFFFF",
-			  			    fontWeight: '400',
-			  			    fontSize: 12,
-			  			    lineHeight: 24, // 行高
-			  			  }
+					text: '件',
+					left: "20",
+					top: '-5',
+					textStyle: {
+					  color: "#FFFFFF",
+					  fontWeight: '400',
+					  fontSize: 12,
+					  lineHeight: 24, // 行高
+					}
 			    },
 				legend: {
 					itemHeight: 10,
@@ -118,8 +119,9 @@ export default {
 			    {
 					name:'本月告警数',
 			      type: 'bar',
-			      showBackground: true,
-				  barWidth:6,
+			      showBackground: false,
+				  barWidth:8,
+				  barGap: 0.5, // 设置类目间距为20%的类目宽度
 			      itemStyle: {
 					barBorderRadius:[3, 3, 0, 0],
 			        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@@ -128,9 +130,9 @@ export default {
 			          { offset: 1, color: 'rgba(115,219,232,0.2)' }
 			        ]),
 					borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-					  { offset: 0.2, color: '#3A6DFF' },
-					  { offset: 0.5, color: 'rgba(0,240,255,0.45)' },
-					  { offset: 1, color: 'rgba(115,219,232,0.2)' }
+					  { offset: 0.2, color: '#56687C' },
+					  { offset: 0.5, color: '#56687C' },
+					  { offset: 1, color: '#56687C' }
 					])
 			      },
 			      // emphasis: {
@@ -147,26 +149,31 @@ export default {
 				{
 					name:'上月告警数',
 				  type: 'bar',
-				  showBackground: true,
-				   barWidth:6,
-				   
+				  showBackground: false,
+				   barWidth:8,
+				   barGap: 0.5, // 设置类目间距为20%的类目宽度
 				  itemStyle: {
 					  barBorderRadius:[3,3, 0, 0],
 				    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
 				      { offset: 0.2, color: '#FFFC00' },
 				      { offset: 0.5, color: 'rgba(255,126,0,0.45)' },
 				      { offset: 1, color: 'rgba(232,181,115,0.2)' }
-				    ])
-				  },
-				  emphasis: {
-				    itemStyle: {barBorderRadius:[3, 3, 0, 0],
-				      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-				       { offset: 0.2, color: '#FFFC00' },
-				       { offset: 0.5, color: 'rgba(255,126,0,0.45)' },
-				       { offset: 1, color: 'rgba(232,181,115,0.2)' }
-				      ])
-				    }
+				    ]),
+					borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+					  { offset: 0.2, color: '#56687C' },
+					  { offset: 0.5, color: '#56687C' },
+					  { offset: 1, color: '#56687C' }
+					])
 				  },
+				  // emphasis: {
+				  //   itemStyle: {barBorderRadius:[3, 3, 0, 0],
+				  //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+				  //      { offset: 0.2, color: '#56687C' },
+				  //      { offset: 0.5, color: '#56687C' },
+				  //      { offset: 1, color: '#56687C' }
+				  //     ])
+				  //   }
+				  // },
 				  data: bfb
 				}
 			  ]

src/views/pages/components/ltbarChart.vue

@@ -58,6 +58,19 @@
 			setOptions({date,gjzs,} = {}) {
 				this.chart.setOption({
 					color: ["#3398DB"],
+					tooltip: {
+					    trigger: 'axis',
+					    axisPointer: {
+					      type: 'shadow'
+					    },
+					  },
+					grid: {
+					    left: '10',
+					    right: '10',
+					    bottom: '10',
+					    top: '20',
+					    containLabel: true
+					},
 					xAxis: {
 						data: date,
 						axisLabel: {

src/views/pages/components/ltbgbarChart.vue

@@ -0,0 +1,308 @@
+<template>
+	<div :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+	import * as echarts from 'echarts';
+	import chartMixin from '@/mixins/ChartMixin';
+	export default {
+		mixins: [chartMixin],
+		props: {
+			className: {
+				type: String,
+				default: 'chart'
+			},
+			width: {
+				type: String,
+				default: '100%'
+			},
+			height: {
+				type: String,
+				default: '100%'
+			},
+			chartData: {
+				type: Object,
+				required: true
+			}
+		},
+		data() {
+			return {
+				chart: null
+			}
+		},
+		watch: {
+			chartData: {
+				deep: true,
+				handler(val) {
+					this.setOptions(val)
+				}
+			}
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.initChart()
+			})
+		},
+		beforeDestroy() {
+			if (!this.chart) {
+				return
+			}
+			this.chart.dispose()
+			this.chart = null
+		},
+		methods: {
+			initChart() {
+				this.chart = echarts.init(this.$el, 'macarons')
+				this.setOptions(this.chartData)
+			},
+			setOptions({date,gjzs,} = {}) {
+				var maxValue = Math.max(...gjzs);
+				this.chart.setOption({
+					color: ["#3398DB"],
+					tooltip: {
+					    trigger: 'axis',
+					    axisPointer: {
+					      type: 'shadow'
+					    },
+					  },
+					grid: {
+					    left: '10',
+					    right: '10',
+					    bottom: '10',
+					    top: '20',
+					    containLabel: true
+					},
+					xAxis: {
+						data: date,
+						axisLabel: {
+							color: "#FFFFFF",
+						},
+						axisLine: {
+							lineStyle: {
+								color: "#8CBAEE"
+							}
+						},
+						axisTick: {
+							show: false
+						}
+					},
+					yAxis: {
+						max: maxValue * 1.2, // 留出一些空间
+						axisLabel: {
+							color: "#8CBAEE"
+						},
+						axisLine: {
+							lineStyle: {
+								color: "#8CBAEE"
+							}
+						},
+						axisTick: {
+							show: false
+						},
+						splitLine: {
+							lineStyle: {
+								color: "#0B0842"
+							}
+						}
+					},
+					label: {
+					show: true,
+					position: "top", // 展示在柱子的上方
+					color: "#333",
+					},
+					// 立方体柱状
+					series: [
+						{
+						     // 背景柱（统一高度）
+						     name: '背景',
+						     type: 'custom',
+						     barWidth: 40,
+						     barGap: '-100%', // 使背景柱与数据柱重叠
+						     renderItem: (params, api) => {
+						     	const basicsCoord = api.coord([api.value(0), api.value(1)]);
+						     	const topBasicsYAxis = basicsCoord[1];
+						     	const basicsXAxis = basicsCoord[0];
+						     	const bottomYAxis = api.coord([api.value(0), 0])[1];
+						     	return {
+						     		type: "group",
+						     		children: [
+						     			// 左侧
+						     			{
+						     				type: "polygon",
+						     				shape: {
+						     					points: [
+						     						[basicsXAxis - 10, topBasicsYAxis - 4],
+						     						[basicsXAxis - 10, bottomYAxis],
+						     						[basicsXAxis, bottomYAxis],
+						     						[basicsXAxis, topBasicsYAxis]
+						     					]
+						     				},
+						     				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'
+						     						}
+						     					])
+						     				}
+						     			},
+						     			// 右侧
+						     			{
+						     				type: "polygon",
+						     				shape: {
+						     					points: [
+						     						[basicsXAxis, topBasicsYAxis],
+						     						[basicsXAxis, bottomYAxis],
+						     						[basicsXAxis + 10, bottomYAxis],
+						     						[basicsXAxis + 10, topBasicsYAxis - 4]
+						     					]
+						     				},
+						     				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'
+						     						}
+						     					])
+						     				}
+						     			},
+						     			// 顶部
+						     			{
+						     				type: "polygon",
+						     				shape: {
+						     					points: [
+						     						[basicsXAxis, topBasicsYAxis],
+						     						[basicsXAxis - 10, topBasicsYAxis - 4],
+						     						[basicsXAxis, topBasicsYAxis - 6],
+						     						[basicsXAxis + 10, topBasicsYAxis - 4]
+						     					]
+						     				},
+						     				style: {
+						     					fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#1F98CC'},{offset: 0.5,color: '#1F98CC'},{offset: 1,color: '#1F98CC'}
+						     					])
+						     				}
+						     			}
+						     		]
+						     	};
+						     },
+						     data: date.map(() => maxValue  * 1.1), // 背景柱统一高度
+						     animation: false
+						},
+						
+						{
+						type: "custom",
+						data: gjzs,
+						renderItem: (params, api) => {
+							const basicsCoord = api.coord([api.value(0), api.value(1)]);
+							const topBasicsYAxis = basicsCoord[1];
+							const basicsXAxis = basicsCoord[0];
+							const bottomYAxis = api.coord([api.value(0), 0])[1];
+							return {
+								type: "group",
+								children: [
+									// 左侧
+									{
+										type: "polygon",
+										shape: {
+											points: [
+												[basicsXAxis - 10, topBasicsYAxis - 4],
+												[basicsXAxis - 10, bottomYAxis],
+												[basicsXAxis, bottomYAxis],
+												[basicsXAxis, topBasicsYAxis]
+											]
+										},
+										style: {
+											fill: new echarts.graphic.LinearGradient(0, 0, 1,1, [{
+													offset: 0,
+													color: '#BDE2FC'
+												},
+												{
+														offset: 0.1,
+														color: '#006FBD'
+													},
+												{
+													offset: 1,
+													color: '#0883CD'
+												}
+											])
+										}
+									},
+									// 右侧
+									{
+										type: "polygon",
+										shape: {
+											points: [
+												[basicsXAxis, topBasicsYAxis],
+												[basicsXAxis, bottomYAxis],
+												[basicsXAxis + 10, bottomYAxis],
+												[basicsXAxis + 10, topBasicsYAxis - 4]
+											]
+										},
+										style: {
+											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+													offset: 0,
+													color: '#59B5F5'
+												},
+												{
+														offset: 0.1,
+														color: '#59B5F5'
+													},
+												{
+													offset: 1,
+													color: '#0B61A3'
+												}
+											])
+										}
+									},
+									// 顶部
+									{
+										type: "polygon",
+										shape: {
+											points: [
+												[basicsXAxis, topBasicsYAxis],
+												[basicsXAxis - 10, topBasicsYAxis - 4],
+												[basicsXAxis, topBasicsYAxis - 6],
+												[basicsXAxis + 10, topBasicsYAxis - 4]
+											]
+										},
+										style: {
+											fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#1F98CC'},
+												{offset: 1,color: '#1F98CC'}
+											])
+										}
+									}
+								]
+							};
+						}
+					}]
+
+				}, true)
+			}
+		}
+	}
+</script>
+<style lang="less" scoped>
+
+</style>

src/views/pages/components/morepieChart.vue

@@ -92,7 +92,7 @@ export default {
 		      {
 		        name: name,
 		        type: 'pie',
-		        radius: ['85%', '100%'],
+		        radius: ['75%', '85%'],
 		        avoidLabelOverlap: false,
 		        label: {
 		          show: false,

src/views/pages/index.vue

@@ -108,8 +108,9 @@
 			<Box title="通道告警比重分析">
 				<!-- /柱状图 -->
 				<div class="flext bgc">
-					<div style="width: 390px;height: 193px;flex:0 0 auto;">
+					<div class="barbox">
 						<ltbar-chart :chart-data="ltbarconut"></ltbar-chart>
+						<!-- <img src="@/assets/images/barbg.png" class="barbg"/> -->
 					</div>
 					<!-- 仪表盘 -->
 					<!-- <div style="height: 193px;flex: 1;">
@@ -118,37 +119,37 @@
 					<div class="morepie">
 						<div class="pieboxs">
 							<div class="piebox">
-								<pie-charts :chart-data="pieDataa"  width="52px" height='52px'></pie-charts>
+								<pie-charts :chart-data="pieDataa"  width="60px" height='60px'></pie-charts>
 							</div>
 							<div class="tit">{{pieDataa.name}}</div>
 						</div>
 						<div class="pieboxs">
 							<div class="piebox">
-								<pie-charts :chart-data="pieDatab"  width="52px" height='52px'></pie-charts>
+								<pie-charts :chart-data="pieDatab"  width="60px" height='60px'></pie-charts>
 							</div>
 							<div class="tit">{{pieDatab.name}}</div>
 						</div>
 						<div class="pieboxs">
 							<div class="piebox">
-								<pie-charts :chart-data="pieDatac"  width="52px" height='52px'></pie-charts>
+								<pie-charts :chart-data="pieDatac"  width="60px" height='60px'></pie-charts>
 							</div>
 							<div class="tit">{{pieDatac.name}}</div>
 						</div>
 						<div class="pieboxs">
 							<div class="piebox">
-								<pie-charts :chart-data="pieDatad"  width="52px" height='52px'></pie-charts>
+								<pie-charts :chart-data="pieDatad"  width="60px" height='60px'></pie-charts>
 							</div>
 							<div class="tit">{{pieDatad.name}}</div>
 						</div>
 						<div class="pieboxs">
 							<div class="piebox">
-								<pie-charts :chart-data="pieDatae"  width="52px" height='52px'></pie-charts>
+								<pie-charts :chart-data="pieDatae"  width="60px" height='60px'></pie-charts>
 							</div>
 							<div class="tit">{{pieDatae.name}}</div>
 						</div>
 						<div class="pieboxs">
 							<div class="piebox">
-								<pie-charts :chart-data="pieDataf"  width="52px" height='52px'></pie-charts>
+								<pie-charts :chart-data="pieDataf"  width="60px" height='60px'></pie-charts>
 							</div>
 							<div class="tit">{{pieDataf.name}}</div>
 						</div>
@@ -198,8 +199,7 @@ import {getCameraList} from '@/api/order.js'
 import Box from './components/box'
 import lineChart from "./components/lineChart.vue"
 import moreringChart from "./components/moreringChart.vue"
-import ltbarChart from "./components/ltbarChart.vue"
-// import morepieChart from "./components/morepieChart.vue"
+import ltbarChart from "./components/ltbgbarChart.vue"
 import pieCharts from "./components/morepieChart.vue"
 import jbbarChart from "./components/jbbarChart.vue"
 import radarChart from "./components/radarChart.vue"
@@ -408,15 +408,21 @@ export default {
 	  }
   }
 }
-.morepie{display: flex;flex-wrap: wrap;align-items: center;}
-.pieboxs{
-	margin-left: 27px;padding-top: 3px;
-	.piebox{width: 74px;height: 74px;background: url("~@//assets/images/piebg.png") no-repeat;position: relative;display: flex;align-items: center;justify-content: center;background-size: 100% 100%;
-			
+.barbox{
+	width: 390px;height: 193px;flex:0 0 auto;
+	.barbg{width: 389px;height: 26px;}
+}
+.morepie{display: flex;flex-wrap: wrap;align-items: center;
+	.pieboxs{
+		margin-left: 27px;padding-top: 3px;
+		.piebox{width: 74px;height: 74px;background: url("~@/assets/images/piebg.png") no-repeat;position: relative;display: flex;align-items: center;justify-content: center;background-size: 100% 100%;
+				
+		}
+		.tit{font-weight: bold;font-size: 12px;color: #FFFFFF;text-align: center;}
 	}
-	.tit{font-weight: bold;font-size: 12px;color: #FFFFFF;text-align: center;}
 }
 
+
 ::v-deep .el-select .el-icon-arrow-up::before {
   content: "\e78f"; /* 这里使用 Element UI 的 iconfont 图标，例如一个自定义的 iconfont 图标 */