industry-database/src/components/StructureTypeStatistics.vue

<template>
	<div class="right_two">
    <CommonTitle title="各年代建筑结构类型统计" :icon=true @changeType="changeType"  />
		<div class="content" id="chartFive" v-loading="isLoading"
         element-loading-background="rgba(0, 22, 52, 0.75)">
			
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted,
		nextTick
	} from 'vue'
	import {
		setEchartsSBar
	} from '../echarts/option.js'
  import CommonTitle from "@/views/c-cpns/CommonTitle.vue";
  import {getSelectJzncJzjgCount} from "@/service/http.js";
  const isLoading = ref(false);
  let currentType = "城镇";
  function changeType() {
    if(currentType == "城镇"){
      currentType = "乡村";
    }else{
      currentType = "城镇";
    }
    getCurrentTypeData();
  }
  function getCurrentTypeData(){
    isLoading.value = true;
    getSelectJzncJzjgCount().then(res => {
      isLoading.value = false;
      let data = res.data.data.Rows[0];
      setEchartsSBar(document.getElementById("chartFive"),data,currentType)
    })
  }
	onMounted(() => {
    getCurrentTypeData()
	})
</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_two{
		height: 30%;
		padding-top: 10px;
		box-sizing: border-box;
		.content {
			height: 90%;
			margin: 0 20px;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			
		}
	}
</style>