industry-database/src/components/RoadWidth.vue

<template>
	<div class="right_five">
    <CommonTitle title="道路路幅" />
		<div class="content"  id="chartThree"  v-loading="isLoading"
         element-loading-background="rgba(0, 22, 52, 0.75)">
			
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		setEchartsSolidBar
	} from '../echarts/option.js'
  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
  import {getSelectDllfCount} from "@/service/http.js";
  const isLoading = ref(false);
	onMounted(() => {
    isLoading.value = true;
    getSelectDllfCount().then(res => {
      isLoading.value = false;
      let arr = res.data.data.Rows;
      setEchartsSolidBar(document.getElementById("chartThree"),arr)
    })
	})
</script>

<style scoped lang="scss">
	.center {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
	.center_center{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	
	
	
	
	.right_five{
		height: 35%;
		padding-top: 10px;
		box-sizing: border-box;
		.content {
			height: 90%;
			width: 90%;
			margin: 0 20px;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			
			
		}
	}
</style>