gx

src/view/analyze.vue

@@ -18,6 +18,13 @@
             <i></i>
           </div>
         </div>
+        <div class="minTopTitle"></div>
+        <div class="minTopNum">
+          <div class="numItem" v-for="(item,inex) in minData.minTop" :key="index">{{ item }}</div>
+        </div>
+        <!-- <div class="minPie">
+          <Pie3dMt :list="minData.minPieData1"></Pie3dMt>
+        </div> -->
         
       </div>
       <div class="flex1">
@@ -59,9 +66,22 @@
 </template>
 
 <script setup>
+import Pie3dMt from "./echart_analyze/pie3dMt.vue";
 import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
 import http from "@/utils/request.js";
 
+const minData = reactive({
+  minTop: ['4','9','1','6','2','人'],
+  minPieData1: {
+    wfgz:"1500",
+    xstp:"1610",
+    skym:"1610",
+    xxdc:"1610",
+    dzzh:"1610",
+    zq:"1610",
+  }
+})
+
 onMounted(() => {
 
 });
@@ -131,9 +151,6 @@ onBeforeMount(() => {
   background-size: 100% 100%;
 }
 
-
-
-
 .center_0 {
   background-image: url(@/assets/images/sjfx/bft.png);
   background-repeat: no-repeat;
@@ -163,10 +180,6 @@ onBeforeMount(() => {
   background-size: 100% 100%;
 }
 
-
-
-
-
 .yd_title {
   box-sizing: border-box;
   width: 98%;
@@ -289,8 +302,6 @@ onBeforeMount(() => {
     bottom: 100%;
   }
 }
-
-
 .mechanism {
   background-image: url(@/assets/YLTitle/titleImg10.png);
   background-repeat: no-repeat;
@@ -301,12 +312,6 @@ onBeforeMount(() => {
   padding: 12px 0;
 }
 
-
-
-
-
-
-
 /* 滚动条整体部分 */
 .rolling::-webkit-scrollbar {
   width: 5px;
@@ -327,4 +332,57 @@ onBeforeMount(() => {
   background: rgba(0, 162, 231, 1);
   -webkit-box-shadow: inset 0 0 6px rgba(20, 20, 20, 0.3);
 }
+
+.minTopTitle {
+  width: 100%;
+  height: 28px;
+  background-image: url(@/assets/images/sjfx/yjj.png);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  margin: 4px auto;
+  margin-top: 25px;
+}
+.minTopNum {
+  width: 100%;
+  height: 120px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .numItem {
+    width: 72px;
+    height: 114px;
+    text-align: center;
+    line-height: 114px;
+    font-weight: 400;
+    font-size: 60px;
+    margin: 0 3px;
+    color: #ffffff;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    background-image: url(@/assets/images/sjfx/mtNum.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .numItem:last-child {
+    width: 72px;
+    height: 114px;
+    text-align: center;
+    line-height: 114px;
+    font-weight: 400;
+    font-size: 36px;
+    margin: 0 3px;
+    color: #ffffff;
+    text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    background-image: url(@/assets/images/sjfx/mtNum2.png);
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.minPie{
+  width: 100%;
+  position: relative;
+  margin: -10px 0;
+  .minPieImg{
+
+  }
+}
 </style>

src/view/echart_analyze/pie3dMt.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     ref="chart"
-    style="width: 100%; height: 250px"
+    style="width: 100%; height: 240px"
   ></div>
 </template>
 
@@ -20,17 +20,14 @@ import "echarts-gl";
 
 const props = defineProps({
   list: {
-    type: Array,
-    default: () => {
-      return [];
-    },
+    type: Object,
   },
 });
 
 const chart = ref(); // 创建DOM引用
 
 const data = reactive({
-  list: [],
+  list: {},
   //   pieData: [
   //     {
   //       name: "61-70岁", //名称
@@ -71,12 +68,34 @@ const colorList = [
 
 const pieData = reactive([
   {
-    name: "高血压", //名称
+    name: "危房改造", //名称
     value: 0, //值
+    per: 2,
   },
   {
-    name: "非高血压",
+    name: "下山脱贫",
     value: 0,
+    per: 8,
+  },
+  {
+    name: "水库移民",
+    value: 0,
+    per: 10,
+  },
+  {
+    name: "小县大城",
+    value: 0,
+    per: 43,
+  },
+  {
+    name: "地质灾害",
+    value: 0,
+    per: 15,
+  },
+  {
+    name: "征迁",
+    value: 0,
+    per: 22,
   },
 ]);
 
@@ -226,14 +245,15 @@ function getPie3D(pieData, internalDiameterRatio) {
         "#F4BB29",
         "#49C384",
       ],
-      width: "40%",
+      // width: "40%",
+      height: '40%',
       //图例列表的布局朝向。
       orient: "vertical",
       right: 20,
       top: "center",
       //图例文字每项之间的间隔
       itemGap: 10,
-      show: false,
+      show: true,
       icon: "rect",
       itemHeight: 10,
       itemWidth: 25,
@@ -249,16 +269,11 @@ function getPie3D(pieData, internalDiameterRatio) {
         var target;
         for (var i = 0, l = pieData.length; i < l; i++) {
           if (pieData[i].name == name) {
-            target = pieData[i].value;
+            target = pieData[i].per;
           }
         }
-        if (name == "91-100岁") {
-          return `   ${name}           ${target} 人`;
-        } else if (name == "100岁以上") {
-          return `   ${name}          ${target} 人`;
-        } else {
-          return `   ${name}             ${target} 人`;
-        }
+
+        return `${name}：${target}%`;
       },
     },
     //移动上去提示的文本内容
@@ -296,14 +311,14 @@ function getPie3D(pieData, internalDiameterRatio) {
         rotateSensitivity: 0, //设置为0无法旋转
         zoomSensitivity: 0, //设置为0无法缩放
         panSensitivity: 0, //设置为0无法平移
-        alpha: 25, //角度(这个很重要 调节角度的)
+        alpha: 20, //角度(这个很重要 调节角度的)
         distance: 100, //调整视角到主体的距离，类似调整zoom(这是整体大小)
       },
-      top: "-30",
-      left: "-120",
+      top: "-10",
+      left: "-160",
       width: "100%",
       show: false,
-      boxHeight: 20,
+      boxHeight: 16,
     },
     series: series,
   };
@@ -550,13 +565,13 @@ const setChart = () => {
 // 使用生命钩子
 onBeforeMount(() => {
   setTimeout(() => {
-    // data.list = props.list;
-    data.list = {
-      gxy:"1500",
-      notGxy:"1610",
-    }
-    pieData[0].value = data.list.gxy;
-    pieData[1].value = data.list.notGxy;
+    data.list = props.list;
+    pieData[0].value = data.list.wfgz;
+    pieData[1].value = data.list.xstp;
+    pieData[2].value = data.list.skym;
+    pieData[3].value = data.list.xxdc;
+    pieData[4].value = data.list.dzzh;
+    pieData[5].value = data.list.zq;
 
     getOption();
     setChart();