样式

src/views/dataBoard/sida/cpts/fw02gxxq.vue

@@ -3,7 +3,7 @@
 		<div class="pieMain pieMain3">
 			<div class="pie"><screen-echarts-frame @myChartMethod="pieInitOk" ref="pieChart"></screen-echarts-frame>
 			</div>
-			<div class="legend">
+			<div class="legend vcenter">
 				<div class="legend-row" :key="'pie' + item.name" v-for="item in pieData" @click="handleClickItem(item)">
 					<div class="name">{{ item.name }}</div>
 					<div class="content">
@@ -44,7 +44,7 @@
 					series: [{
 						name: '',
 						type: 'pie',
-						radius: [70, 130],
+						radius: ['40%', '60%'],
 						center: ['50%', '50%'],
 						// roseType: 'area',
 						itemStyle: {
@@ -53,19 +53,20 @@
 						avoidLabelOverlap: false,
 						labelLine: {
 							show: true,
-							length: 50
+						
 						},
 						label: {
+							
 							normal: {
 								show: false,
 								formatter: '{title|{b}}\n{d}%',
-								fontSize: 24,
+								fontSize:24,
 								color: '#FFFFFF',
-								
 								rich: {
 									title: {
 										fontSize: 12,
-										 height: 25,
+										height: 25,
+										
 									},
 								}
 							}
@@ -172,11 +173,20 @@
 </script>
 <style lang="scss" src="@/assets/scss/dataBoard/renfang/index.scss" scoped></style>
 <style scoped lang="scss">
-	/deep/.pieMain3 {
+	/deep/ .pieMain3 {
+		justify-content: space-around;
+		margin: 0px;
+
 		.legend {
 			.legend-row {
 				margin-top: 10px !important;
 			}
 		}
 	}
+
+	.vcenter {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+	}
 </style>

src/views/dataBoard/sida/cpts/fwBarOption04.js

@@ -43,8 +43,8 @@ export function pieOption() {
 				alignWithLabel: true
 			},
 			axisLabel: {
-				interval: 1,
-				rotate: 40,
+				interval:3,
+				
 				show: true,
 				textStyle: {
 					color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
@@ -55,6 +55,7 @@ export function pieOption() {
 		}],
 		yAxis: [{
 			type: 'value',
+		
 			splitNumber: 5,
 			splitLine: {
 				show: true,
@@ -65,25 +66,6 @@ export function pieOption() {
 				}
 			},
 			axisLabel: {
-				show: true,
-				textStyle: {
-					color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
-					fontSize: 12 //更改坐标轴文字大小
-				}
-			},
-		}, {
-			type: 'value',
-			splitNumber: 5,
-			splitLine: {
-				show: true,
-				lineStyle: {
-					color: 'rgba(255,255,255,0.15)',
-					width: 1,
-					type: 'solid'
-				}
-			},
-			axisLabel: {
-				
 				show: true,
 				textStyle: {
 					color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色
@@ -94,9 +76,8 @@ export function pieOption() {
 		series: [{
 			name: '个性服务',
 			type: 'bar',
-			stack: 'Ad',
+		
 			barWidth: 12,
-			yAxisIndex: 0,
 			emphasis: {
 				focus: 'series'
 			},
@@ -114,8 +95,7 @@ export function pieOption() {
 			name: '完成服务',
 			type: 'bar',
 			barWidth: 12,
-			stack: 'Ad',
-			yAxisIndex: 0,
+		
 			emphasis: {
 				focus: 'series'
 			},
@@ -134,7 +114,6 @@ export function pieOption() {
 			type: 'line',
 			barWidth: 12,
 			stack: 'Ad',
-			yAxisIndex: 1,
 			emphasis: {
 				focus: 'series'
 			},
@@ -150,4 +129,4 @@ export function pieOption() {
 			data: []
 		}, ]
 	}
-}
+}

src/views/dataBoard/sida/cpts/fwBarOption05.js

@@ -43,8 +43,8 @@ export function pieOption() {
 				alignWithLabel: true
 			},
 			axisLabel: {
-				interval: 1,
-				rotate: 40,
+				interval: 3,
+				// rotate: 40,
 				show: true,
 				textStyle: {
 					color: 'rgba(255,255,255,0.85)', //更改坐标轴文字颜色