industry-database/src/components/RoadGrade.vue

<template>
	<div class="left_four">
    <CommonTitle title="道路等级" />
		<div class="content">
			<div id="chartOne">
	
			</div>
			<div class="right">
				<div class="top center">
					<div class="top_left center">
						面积(万㎡)
					</div>
					<div class="top_right center">
						{{num}}
					</div>
				</div>
				<div class="bottom">
					<div class="bottom_item" v-for="item in arr" :key="item.id">
						<div class="item_top center">
							<div :class="`dot ${item.className1}`">
								
							</div>
							<div class="name">
								{{item.dldj}}
							</div>
							<div :class="`percent ${item.className2}`">
								{{item.per}}
							</div>
						</div>
						<div class="item_bottom center">
							<div class="item_bottom_left">
								{{item.dlldcd}}
							</div>
							<div class="item_bottom_right">
								公里
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		setEchartsPie,getParametricEquation,getPie3D,option,optionArr
	} from '../echarts/option.js'
	import {
		getSelectDldjCount
	} from '../service/http.js'
  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
	let arr = ref([])
	let num = ref(0)
	onMounted(() => {
		getSelectDldjCount().then(res => {
			let total = 0
			arr.value = res.data.data.Rows.reverse()
			arr.value.forEach(item=>{
				total += Number(item.dlldcd)
			})
			num.value = total.toFixed()
			arr.value.forEach(item=>{
				item["per"] = ((Number(item.dlldcd)/num.value)*100).toFixed(2) + '%'
				if(item.dldj == "快速路"){
					item["className1"] = "bg1"
					item["className2"] = "color1"
				}else if(item.dldj == "主干路"){
					item["className1"] = "bg2"
					item["className2"] = "color2"
				}else if(item.dldj == "次干路"){
					item["className1"] = "bg3"
					item["className2"] = "color3"
				}else{
					item["className1"] = "bg4"
					item["className2"] = "color4"
				}
			})
			setEchartsPie(document.getElementById("chartOne"))
		})
		
	})
	
	
</script>

<style lang="scss" scoped>
	.center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.center_center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.right_item{
		height: 19%;
		padding-top: 20px;
		box-sizing: border-box;
	}
	.left_four {
		height: 20%;
		padding-top: 20px;
		box-sizing: border-box;
		
		.content {
			height: 80%;
			margin: 0;
			display: flex;
			
			align-items: center;
	
			#chartOne {
				width: 45%;
				height: 70%;
				background: url("@/assets/imgs/饼图底盘.png") no-repeat;
			}
			.right{
				width: 55%;
				height: 100%;
				
				.top{
					height: 20%;
					.top_left{
						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 14px;
						color: #FFFFFF;
						text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
						background: linear-gradient(0deg, #5FB3DD 0%, #FFFFFF 89.7705078125%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						margin-right: 14px;
					}
					.top_right{
						font-family: YouSheBiaoTiHei;
						font-weight: bold;
						font-size: 18px;
						color: #3DA6FE;
						text-shadow: 0px 4px 2px rgba(0,15,17,0.73);
						background: linear-gradient(0deg, #5FB3DD 0%, #FFFFFF 89.7705078125%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
				.bottom{
					height: 80%;
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					
					.bottom_item{
						width: 50%;
						height: 40%;
						margin-bottom: 10px;
						
						.item_top{
							height: 50%;
							.bg1{
								background: #10DCDC;
							}
							.color1{
								color: #50C5C5;
							}
							.bg2{
								background: #67CBFF;
							}
							.color2{
								color: #67CBFF;
							}
							.bg3{
								background: #71EAB4;
							}
							.color3{
								color: #71EAB4;
							}
							.bg4{
								background: #F1B062;
							}
							.color4{
								color: #F1B062;
							}
							
							
							.dot{
								width: 4px;
								height: 4px;
								border-radius: 50%;
								margin-right: 9px;
							}
							
							.name{
								font-family: Microsoft YaHei;
								font-weight: 400;
								font-size: 13px;
								color: #FFFFFF;
								margin-right: 5px;
							}
							
							.percent{
								font-family: YouSheBiaoTiHei;
								font-weight: 400;
								font-size: 14px;
								//background: linear-gradient(0deg, rgba(3,0,0,0.29) 0%, rgba(255,255,255,0.29) 100%);
								/* -webkit-background-clip: text;
								-webkit-text-fill-color: transparent; */
							}
						}
						.item_bottom{
							height: 50%;
							margin-left: 13px;
							.item_bottom_left{
								font-family: YouSheBiaoTiHei;
								font-weight: bold;
								font-size: 14px;
								color: #FFFFFF;
								margin-right: 5px;
							}
							.item_bottom_right{
								font-family: Microsoft YaHei;
								font-weight: 400;
								font-size: 12px;
								color: #FFFFFF;
								opacity: 0.6;
							}
						}
					}
				}
			}
		}
	}
</style>